Good web design practices

For those of you familiar with my web site, you’ll notice a new design. I’ve created this by taking the default Drupal Garland theme and modifying it with graphics from the Alek 2.0 theme and markup from Wikipedia.

I’ve done this because I’ve been trying to improve my skills as a web designer recently. I’m interested in making sites that degrade completely and support variable font sizes. For an example of what I’m talking about, there’s Wikipedia. Wikipedia’s markup is a perfect example of accessible content: I can enlarge the font size arbitrarily without any layout consequences; and disabling CSS shows a clean page with the page content at the top and the site content at the bottom (and links to jump to the other sections of the page). I want to find more examples of accessible web design, so I can examine their markup as well. I checked out the CSS-based designs at OSWD, but all of the ones I looked at put the navigation at the top of the markup, meaning it gets in the way when browsing without CSS.

With this in mind, I’m putting together a list of well-designed sites. Help me fill it up!

Perfect sites

Sites in this category look correct when fonts are enlarged to realistically large sizes (26px for body text; that’s Ctrl+Plus four times on this web site from Firefox), and have little or no site-wide content at the top of pages when viewed without CSS.

• Cardkey Effect – I’ve fixed the few issues I had, making this site scale well at all font sizes.
• CSS Zen Garden – Though I must criticize some of the designs for using a fixed-width sidebar.

• Wikipedia

Good sites

Sites in this category have little or no site-wide content at the top of pages when viewed without CSS, but do not support scaling font sizes without major graphical glitches.

• A List Apart – Navigation disappears and issue number is white-on-white with larger font sizes. Navigation appears at the top of markup, but sidebar is at bottom.
• The Big Picture – Navigation is placed using CSS, though it is at the top of the markup. Fonts scale well without disrupting layout (though navigation images obviously don’t scale).

• CSS3.info – Navigation tabs don’t scale with font sizes. Navigation appears at the top of markup, but sidebar is at bottom.