New Style for the Web

Eric A. Meyer

Netscape Communications

(Re)stating some truths

• CSS is NOT a pixel-fidelity presentation language!
• The reader can always trump the designer
• Use structural (X)HTML elements when you can
• Tables are okay, but use them sparingly
• Write CSS that's readable to you

Where do we stand?

• Basic font and color controls are solid
• Layout and positioning is pretty firm, but gets shaky at the edges
• IE6/Win and Opera 7 join IE5/Mac and Gecko browsers in having "DOCTYPE switching"
• Improvements are coming all the time
• Old browsers can get content with minimal (or zero!) style

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

<ul id="navigation">
<li><a href="index.html">WidgetCo Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="fun.html">Widgety Fun!</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="about.html" id="current">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

• "Taming Lists"

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

/* simple separators */
#navigation {padding: 0; margin: 0;
  font: bold 12px Verdana, sans-serif;
  border-bottom: 1px solid gray; width: 13em;}
#navigation li {list-style: none; margin: 0; padding: 0.25em;
  border-top: 1px solid gray;}
#navigation li a {text-decoration: none;}

/* panelize */
#navigation {padding: 1px; margin: 0;
  font: bold 12px Verdana, sans-serif;
  border: 2px solid; border-color: #AAA #EEE #EEE #AAA;
  background: #CCC; width: 13em;}
#navigation li {list-style: none; margin: 0; padding: 0.25em 1em;
  border: 1px solid; border-color: #FFF #AAA #AAA #FFF;
  text-align: center;}
#navigation li a {text-decoration: none;}
#navigation li a:link {color: black;}
#navigation li a:visited {color: gray;}

/* highlighting and border effects */
#navigation {padding: 0 1px 1px; margin: 0;
  font: bold 12px Verdana, sans-serif;
  background: gray; width: 13em;}
#navigation li {list-style: none; margin: 0; border-top: 1px solid gray;
  text-align: left;}
#navigation li a {display: block; padding: 0.25em 0.5em 0.25em 0.75em;
  border-left: 1em solid #AAB; background: #CCD;
  text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {border-color: #FE3; color: #FFF; background: #332;}

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

/* simple inlining of previous example */
#navigation {padding: 0 1px 1px; margin: 0;
  font: bold 12px Verdana, sans-serif;}
#navigation li {list-style: none; margin: 0; border-top: 1px solid gray;
  display: inline;}
#navigation li a {padding: 0.25em 0.5em 0.25em 0.75em;
  border-left: 1em solid #AAB; background: #CCD;
  text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {border-color: #FE3; color: #FFF; background: #332;}

/* traditional navbar */
#navigation {padding: 3px 0; margin: 0;
  border: 1px solid #BBC; background: #DDE;
  font: bold 12px Verdana, sans-serif;}
#navigation li {list-style: none; margin: 0;
  display: inline;}
#navigation li a {padding: 3px 0.5em;
  border-right: 1px solid #BBC;
  text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {border-color: #88C; color: #000; background: #AAE;}

/* tabbed styles */
#navigation {padding: 3px 0; margin: 0;
  border-bottom: 1px solid #778;
  font: bold 12px Verdana, sans-serif;}
#navigation li {list-style: none; margin: 0;
  display: inline;}
#navigation li a {padding: 3px 0.5em; margin-left: 3px;
  border: 1px solid #778; border-bottom: none;
  background: #DDE;
  text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {color: #000; background: #AAE;
  border-color: #227;}

/* "current tab" style */
#navigation li a#current {background: white; border-bottom: 1px solid white;}

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

<ul id="navigation">
<li id="title"><h4>Navigation</h4></li>
<li><a href="index.html">WidgetCo Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="fun.html">Widgety Fun!</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="about.html" id="current">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

#navigation {padding: 0; margin: 2em 0 0;
  font: bold 12px Verdana, sans-serif;
  background: white; width: 11em;
  border: 1px solid gray; border-width: 1px 1px 0 0;}
#navigation li {list-style: none; padding: 0; margin: 0.5em 0;
  text-align: right;}
#navigation li a {padding-right: 0.5em; border-bottom: 1px solid gray;
  text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {border-color: red; color: #000;}
#navigation h4 {display: inline; margin: 0; padding: 1px 0.33em;
  position: relative; top: -1em; font-size: 1.1em;
  background: white; border: 1px solid gray;}
#navigation #title {text-align: left;}

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: wired.com

• In October 2002, wired.com redesigned using no tables at all
• CSS positioning is used for basic layout
• Daily color themes are handled with stylesheet changes
• Turn off CSS (or visit with a non-CSS browser) and you get just the content
• Cellphone and handheld browsers get the non-CSS version

• Wired News
• "A Site For Your Eyes"

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

• Eric Meyer on CSS companion Web site

Example: foxsearchlight.com

• Created by Jeffrey Zeldman and Hillman Curtis
• Uses transitional design and Flash
• Greatly improved download and layout speed
• Changes to layout and appearance are much easier

• Fox Searchlight Web site

The Balance of Style

• It turns out that CSS isn't just for authors
• Users can set up their own style sheets
• Why? They could be compensating for:
  • colorblindness
  • poor vision
  • unusual display conditions
• ...or being just plain anarchistic

• "The CSS Anarchist's Cookbook"

Roll With It

• No sense fighting it: users can restyle your work no matter what
• You can earn good karma by making site-specific user styling easier
• Adding a "tag" to your site's pages allows styles to target your site
• Example: a site with a signature can have its font size increased
• This is partly a hack to deal with current browser limitations

Designer Styles

• User styles aren't just for users; they're for designers too
• You can define "diagnostic" styles and use them in your work
• Outline structure or simulate accessibility
• Finding old markup to clean up can be made much simpler

• "Using CSS As a Diagnostic Tool"

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
  • Flowing text along a curve
  • Translucency effects
  • Popups menus without JavaScript
• We still don't know the limits of CSS-driven design

• css/edge

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