September 27, 2006

Quick Tip: Designing Semantics

Remember “CSS Naked Day](http://www.dustindiaz.com/naked-day/? Well, there’s a reason for that event. The point was to see how your site would stand up when styles were completely removed. Would it look the same because you used nested tables and inline styles? Would it totally break because you used a mashup of both? Or, would it flow seamlessly in its nakedness? Here’s the tip:

Build your website without using any CSS and never turn on your styles until your content is completely in place. And then don’t touch it again.

“Duh,” you say? Sure, it seems obvious to some of you pros, but there are a good number of standards-friendly sites out there which have markup based on css instead of the other way around.

Hear me out

The most common example of this is in floating divs. It’s common to have a content and sidebar and to see them floating side-by-side. The problem comes in when you float them both left or right together. Depending on which one you want to be right or left, you may have to position the sidebar above the content in the markup. Since your sidebar is likely secondary content, this would be strange for someone with styles off. The fix? Style the sidebar to float left and the content to float right (or vice versa), but not both the same direction. For the record, I did this a lot my first year in CSS.

This is just one example. There are many other ways to muck up your markup without tables and inline styles.For inspiration, and to see more of what you can do leaving your markup alone, there’s the “CSS Zen Garden](http://www.csszengarden.com/ which many of you already know about, but it’s a great place to learn about CSS and positioning because so many beautiful designers are doing so much more with that plain old html page these days.

And before you say “That’s what the ’skip to content link’ is for,” you shouldn’t need to skip anything. Your content should be one of the first things people see after your title and a small menu (my rule of thumb is 7 items or less). Try Crtl+Shift+S (with the “developer toolbar](http://chrispederick.com/work/webdeveloper/) to see mine: title –> menu –> search –> content –> everything else.

Final thought

A naked web page should be like a naked human being - not quite as cute unstyled, but all the parts in the right places.

 

« Citations and Semantics Shortest Beta in History? »

Abort73.com

No Comments on Quick Tip: Designing Semantics

No comments yet.

Sorry, the comment form is closed at this time.