That Bright Line - Part 1 of 2

Several weeks ago I got an appreciative email from Karen, a JG reader and a former student. She was thanking me for hammering away at the idea that web page design calls for the separation of document structure from style. I was relieved to hear that, if for no other reason than because I sometimes wonder if my message ever gets across. I know I repeat it so often I get bored with it.

I wasn't just relieved. I was elated. Who doesn't want people to remember what they say, especially when the words form the basis of what one teaches? More from good student Karen in a sec.

In web page design, structure is done through the use of XHTML, the mark up system that lets us format web documents. XHTML is only about organizing content into headings, paragraphs, list, forms and the like. It is nothing about style, appearance, page layout, or typography. That's the job of CSS.

The more I have come to understand the separation of structure from style, the clearer I see That Bright Line which divides the two. As I have noted in previous JGs, that paradigm is found in all things designed - buildings, clothing, appliances, tools, and everything you can think of. Architects speak of form following function.

The more I see That Bright Line, the more of a purist I become and the more I understand what best practices of making web pages and sites is all about.

Examples Of The Separation

What do all of these have in common?

• Stefan Mischook's Killersites.com Blog
• A List Apart
• Wired
• Happy Cog
• Gawker

Take a look under the hood (look at the source code). Generally, no tables are used for layout, and XHTML/HTML is used to markup content, that is, to organize content into headings, paragraphs, lists, links, and so on. All the styling and layout is handled by CSS.

(Gawker? A Manhattan gossip blog? What am I getting into?)

Telltale Signs

If you're using any of the following in your web pages, you're mixing layout and styling in your markup. These are a few clues to look for:

• XHTML Elements

• table
• font

• XHTML Attributes

• align
• valign
• bgcolor
• background
• width
• height

I'll bet you won't find these tags or attributes in the code for the sites cited above. That's because they clearly see the line separating structure and style. As sites - large and small - are revised and redesigned, you're not likely to find them there either. When pages get rescued, using services like my Code Aid, they are freed from bloated, useless code and that freedom opens up many creative possibilities.

What Does Karen Have To Say?

Oops, I went a little long, so I'll get to that in the next issue of JG. Karen offers up a few pointers of things she does and shows us better ways to do web page design by separating structure from style.

She sees That Bright Line too!!