unraveled

May 2003 Archive

Structural XHTML: div or Not?

Today, Jeffrey Zeldman commented on Segment Puglishing’s “elegantly minimalist design” and “simple, structural XHTML.” I wholeheartedly agree that it’s a work of beautiful minimalist design, but I’m not so sure it’s a good example of structural XHTML.

A quick look at the source reveals that they’re using div elements for almost every element on the page. While very useful for styling ranges of text and images, div elements don’t give a document much structure. They’re one of two grouping elements that offer a “generic mechanism for adding structure to a document.” That is, they add structure by grouping ranges of text and images, but don’t say anything about the content they contain.

h1 — h6, p and phrase elements give a document true structure. When I redesigned unraveled, I tried to use these structural elements as much as possible. Consequently, div and span elements are used as infrequently as possible. In no particular order, I use div and span elements only when necessary:

div elements work, but if you want to give your document real structure, I don’t recommend using them excessively.

All Hail mod_rewrite

I’m sure that I’m late to the party on this, but I just had to mention how awesome mod_rewrite is. If you haven’t heard of it, mod_rewrite is an Apache server module that uses a rule-based rewriting engine to rewrite requested URLs on the fly.

As you may know, I moved some things around during my redesign. I had a lot of pages that I wanted to redirect to new URLs. I also had a few pages that I removed completely, so I wanted to send the appropriate headers to the browser to indicate that they were removed. mod_rewrite handled both of these situations nicely. It took some reading and some help from the kind folks at WebmasterWorld, but I eventually figured it out.

Here’s an example of how mod_rewrite works:

The page located here:
http://unraveled.com/joshua/archives/2002/12/user_agent_accessibility_guidelines.shtml

was one of the many pages that I wanted to redirect. This specific page’s new home is here:
http://unraveled.com/archives/2002/12/user_agent_accessibility_guidelines.shtml

While I was figuring out how to use mod_rewrite, I used a JavaScript redirect, which worked well, but it wasn’t as smooth as I wanted it to be. I added the following two lines to my .htaccess file and my problem was solved.

RewriteEngine on
RewriteRule ^joshua/archives/([0-9]+)/([0-9]+)/([^\.]+)\.shtml$ /archives/$1/$2/$3.shtml [R=301,L]

The first line enables the rewrite engine. The second line says, “When the browser requests a page with the pattern, ‘/joshua/archives/(any number)/(any number)/(any file name).shtml,’ redirect the browser to, ‘/archives/(the first number above)/(the second number above)/(the file name above).shtml.’ Also, send a redirect flag with the code that means ‘Moved Permanently.’ Finally, stop the rewriting process here. To see mod_rewrite in action, just go to one of my old URLs.

If you want to learn more about mod_rewrite, I recommend the Apache documentation on the topic, A Tao of Regular Expressions and this thread at WebmasterWorld.

I’ve Stolen From Kottke

Okay, I admit it. I’ve stolen from Jason Kottke. Here’s the run down:

Thanks, Jason, for continuing to be an inspiration.

Redesigning, Part 3: Wrapping Up

The new unraveled design was built using 100% CSS for presentation. This means that every image used in the design, from the logo to the background image, was specified in the stylesheet - no exceptions. Images that are used as content - for example, images in weblog entries - are specified in the HTML. When people say that their site is all CSS, don’t believe them unless you view source and find out for yourself. I’m willing to bet there are many sites that say they’re “all CSS,” but continue to use images in their design.

The CSS specified in my global stylesheet doesn’t favor any one particular browser; it favors standards. Never the less, throughout the redesign I tested the design in as many browsers I could including IE 6/Win, Firebird .6/Win, Opera 7, Safari Beta 2, Camino .7, and IE 5.2/Mac. These browsers correctly interpreted 95% or more of the CSS. If a browser interpreted the CSS incorrectly, I made sure that it didn’t inhibit the usability or accessibility of the site.

Here are some of the CSS browser quirks that I learned about during the redesign:

Next, the about page has been updated to include accessibility information.

Finally, the last few design details were added today. Links to the mobile version, Movable Type and my Creative Commons License were added to the menu.

Thanks for reading along during the redesign.

Redesigning, Part 2: In With the New

I’m starting to build my new stylesheet today. As before, stay tuned to this weblog entry for thoughts along the way. To make sure your browser is using the most current style sheet, please reload.

While I’m thinking about it, I’d like to point out that I’ve added a body id of unraveled-com to all pages. This means that you can now create unraveled.com-specific overrides in your user stylesheets. The new markup is both structured and semantic, so you can have full control over my site presentation if you desire.

Evening: The unraveled logo at the top is temporary as a new logo is in the works.

Safari is cutting off the last line or two of my pages. For example, the homepage should have the link “Entry Archives” at the bottom, but Safari cuts it off. Any ideas? I don’t know what I did, but I fixed it.

19 May: The new logo is now at the top. I’m still trying to decide if it’s Neo.

If you’re lucky enough to be using browser that supports the max-width CSS property, the line width will reach a maximum of about 70-80 characters, which should comfortably accommodate most readers. If you’re unlucky, and your browser doesn’t support the max-width property, you’ll be able to make the line width as wide as your screen resolution allows, possibly making this site more difficult to read.

Thanks to Filip Lagerqvist, chybee.hu and k10k for the background patterns.

The redesign is coming along nicely as most CSS selectors are working splendidly. A few more details will be added in the next few days.

CSS Tabs With Submenus

Adam Kalsey recently made his own CSS Tabs with a subnav generated from a nested list. His HTML doesn’t validate yet, but I don’t think that’s too far away. He points out what makes his tabs different and brings up an interesting point: his list markup doesn’t change from page to page. The browser determines the highlighted tab in his list from the body id, not the li id or a id. Is is better to change the ID of the body element before another element? I don’t know. It probably is, but it’s something to think about for those who use lists to generate contextual navigation.

Redesigning, Part 1: Out With the Old

I’m starting to redesign this site today, live and unscripted. Things might will break. Stay tuned to this weblog entry for the new IA, design and other redesign thoughts.

13 May: “Watch me unravel, I’ll soon be naked.” Almost everything in /joshua will eventually move to root. Site will be rebranded as unraveled.com.

Tenative new IA:

Your comments are welcome. Next: strip out all CSS and images, remove /joshua from URLs, update headings. Done.

14 May: I’m going to have a bunch of redirects, and I’d rather do it through HTTP than HTML or JavaScript. If anyone knows anything about creating redirects using URL rewriting with htaccess, I’ve love to know. I think I need a regular expression that I can place in an htaccess file that will send people who go here:
http://unraveled.com/joshua/archives/2003/05/css_tabs.shtml

to here:
http://unraveled.com/archives/2003/05/css_tabs.shtml

Is this possible or am I just dreaming? Any suggestions on this would be fabulous.

14 May:: Sorry about the broken archives. It will be fixed ASAP. That is, tomorrow morning. Done.

15 May:: From now on <h1> tags will be used for page titles only as the W3C recommends, not the site title or domain name as others have done. Also, headings will always be used in decending order.

From now on presentational images will be specified in the CSS only, not in the HTML as I’ve done in the past. Next time I redesign, I only want to modify one external CSS file, not every single template - like I’m doing now.

Nate linked me from Web Graphics. Welcome, Web Graphics readers! (Thanks Nate!)

The “Joshua” section is gone. Since that section contained mostly professional related things like my résumé and portfolio, all that will eventually be moved to its own domain. The domain will be announced when I decide what name I want and if it’s available.

After lunch: Create place holder pages for new sections. Update navigation, search form and search results. Done.

Next: Go see Matrix Reloaded. Coming next week: Redesigning, Part 2: In With the New.

18 May:: Just a few more notes about the new markup: I added a body id of unravleled-com to all pages so that visitors can create unraveled.com-specific overrides in their user stylesheets.

The navigation list markup is modified so that each list item has its own id. Now the navigation markup remains unchanged across the site, which is good. I also added a body class of the section title to all pages. If I chose, I can now style each section differently based on the body class, which is cool.

The mobile link is removed from the navigation. I decided it wasn’t important enough to take up a line of the navigation. It will be added later when I decide what I want to do with it. The mobile version is still available.

Media Ownership Alert

Jeffrey Zeldman shares important news about media ownership:

On 2 June 2003, the FCC proposes to remove laws that prevent any single company from owning every TV channel or newspaper in your city.

If the FCC is successful in removing these laws, it will be a very bad thing for competition and diversity. Please take action by telling Congress and the FCC to preserve current media ownership rules. It only takes two minutes.

CSS Tabs

Since there’s been lots of talk about CSS tabs lately, I wanted to mention that I’ve been playing around with CSS tabs myself. Feedback is welcome.

Update: (10 Feb 07) CSS Tabs 2.0 released with compatibility across 16 browsers.

← April 2003 | Archives | June 2003 →