Minimal Markup, Surprising Style
Eric A. Meyer
Netscape Communications
Minimal Markup, Surprising Style
(Re)stating some truths
- CSS is NOT a pixel-fidelity presentation language!
- Tables are okay, but use them sparingly
- Use structural (X)HTML elements when you can
- Use efficient, readable CSS as much as possible
Tripping the list fantastic
- Navbars, toolbars, sidebars—they all have one thing in common: they're collections of links
- We can represent such a collection as a list and style it
- With this simple structure, we have a lot of presentational flexibility
- Whether the list is ordered or not is up to you; unordered is more likely the sensible choice
Making a sidebar
- By removing the bullets and indentation, we have what looks like break-separated text
- We can get a lot done just by styling the
li elements
- Separators are a breeze, and you can cap the list using the
ul element
- It can be a panel, an open list, almost anything you want
Making a navbar
- It's a little trickier, but you can turn a list into a horizontal navbar
- Instead of blocking out links, we need to make the list itself inline
- Now we can visually separate the links with borders
- Watch out for how inline elements behave in different browsers, especially whitespace between them
- With some creative styling, we can even create a "tabbed" interface
Another quick effect
- Let's go back to the panel and add a heading, inline it, shift it up a bit, and flip some styles around
- By making the heading inline, we end up "shrink-wrapping" the text
- Adding a background color obscures pieces of other elements
- Relative positioning moves the element out of its usual place
- Some changes to backgrounds, borders, and text alignment, and we have a whole new menu look
So what's the catch?
- Maybe none—it depends on your visitor demographics
- NN4.x is not going to respond well to the inline list technique, and IE4 isn't likely to be much happier
- If you hide the styles from them, they'll just render an unordered list
- That could be okay for a sidebar, depending on how you place it on the page
- Weigh the old-browser situation against the accessibility and efficiency wins
Example: "Travel Guide"
- A conversion project from Eric Meyer on CSS
- Starting with a table-in-table design, markup is stripped down and cleaned up
- A simple table is used for "top-level" layout
- CSS styles the contents of the framing table
- This approach is often referred to as "transitional design"
Example: Netscape DevEdge
- In February 2003, DevEdge went from transitional design to fully positioned layout
- CSS makes subtle but useful effects very easy to accomplish
- "Wireframe" layout is managed by its own stylesheet; themes are in separate stylesheets
- Menus based almost entirely on CSS, and don't require JavaScript in some browsers
- Print-media styles automatically insert link URLs into text for advanced browsers
How far can we go?
- CSS looks simple, and in a basic sense it is
- It's also highly complex and gives rise to surprising effects
- We still don't know the limits of CSS-driven design
- Some pioneering sites are beginning to explore CSS design
Example: css/edge
- A site devoted to pushing the CSS envelope
- All markup is (fairly) structural and is thoroughly readable sans CSS
- Translucency effects can be achieved with four JPGs and some CSS1
- Text can flow along a curve or other irregular outline
- Popups sans JavaScript? You betcha!
Example: CSS Zen Garden
- Created by Dave Shea and extended by contributors
- The same document is presented in very different ways
- The core structure is very straightforward, almost simple
- No tables are used, which affords vast flexibility
And last
- Sophisticated layout doesn't mean complicated structure!
- You can offer a less rich but still readable site to v4 browsers
- Alternate and user styles can mean complete redesigns without markup changes
- Stronger structure means wireless-friendly and accessible design
- If you get creative enough, there are deeply surprising possibilities