The Marriage of Presentation & Structure

Molly E. Holzschlag & Ethan Marcotte

The Courting Period

• Table-based layouts:
  • Munge the markup to “look right” in target browsers
• CSS-based layouts
  • More robust; more lightweight; more accessible
  • The emphasis on “content first, presentation later” can be a difficult one to grasp

Separation or Integration?

• We advocate separating structure from style
• Writing great CSS means understanding document structure from the ground up
• The relationship between structure and style is an integrated one
• Separation is in the layers, but together they form a whole

What is Document Structure?

• Correct use of required syntax:
  • Proper DOCTYPE declaration
  • Root element html
  • head and title elements
  • body element

Use of Semantic Markup

• Headers signify headers (h1 does not mean “big bold and ugly”)
• Paragraphs are used to denote paragraphs
• Use of lists for all list-based structures including navigation
• Correct use of tables (they aren’t evil!)

Understanding why Structure is Important

• A well-structured document results in a clear document tree
• Well-structured documents tend to be streamlined and very clean
• This enables designers to work more efficiently

Your Markup Tree

Using the Tree as a Guide Helps You …

• Use the cascade effectively
• Tap into the power of inheritance
• Work with specificity
• Prepare documents to be styled with savvy
• Reduce errors and streamline CSS

A Natural Pairing

The CSS Kool-Aid

• “The new black” for your website
  • Valid, well-structured markup
  • A layer of well-applied style

Blogs do it…

• SimpleBits
• Stopdesign

Studios do it…

• Cinnamon
• Monc

Even public-facin’ companies do it!

• Sprint
• Disney Store UK

Starting small

ul li { color: #C00; }

The Relationship

The “Dear John” Letter

Preparing Documents for Styling

• With clearly defined structure, the designer can easily begin to identify elements that will require styling
• By adding divs and id’s as needed, the designer prepares additional “hooks” for precision style
• The designer can now write more effective CSS, building on the structural aspects of the document

Putting it into practice

• Case study: Harvard.edu (and á table)

1. Outline areas of content
2. Mark up with meaning
   • divide sections appropriately
   • id/class descriptively
3. Apply style
4. ...
5. Profit!

You’re never valid enough

• Know thy validators:
  • http://validator.w3.org/
  • http://jigsaw.w3.org/css-validator/
• Invalid code—CSS or markup—can cause errors
• Valid code facilitates distributed maintenance

To the happy couple (In closing)

• Like marriage, just because you don’t know what you’re getting into doesn’t mean you can’t have fun with it
• Forget what you already know, and expose yourself to a new layout model

Thanks!

• Molly Holzschlag
  • http://molly.com/
• Ethan Marcotte
  • http://sidesh0w.com/