NOTACON

High-Powered Style

Eric A. Meyer

Principal Consultant, Complex Spiral Consulting

Chief Bit Wrangler, meyerweb.com

Tired Old Myths

• CSS design is always boxy and boring
• There are too many limitations inherent in CSS
• Browsers are too inconsistent for CSS design
• Tables and Flash are necessary for good design

CSS Zen Garden

• http://www.csszengarden.com/
• Launched April 2003 by Dave Shea
• One document, many layouts, all through CSS
• No better example of how CSS design can be stunning
• One hundred official designs in its first year

How the Garden Grows

• Every entry uses the same fairly simple HTML document
• A server-side script associates the requested style
• An open resource—anyone can submit, although only the best become official
• Page weight tends to be higher than is common, but with good reason

CSS Vault

• http://www.cssvault.com/
• Surveys the Web for interesting CSS-driven designs
• Sites don’t have to be table-free, although most are
• Also sponsoring a monthly “extreme makeover” redesign contest

Web Standards Awards

• http://www.webstandardsawards.com/
• Features sites both well-known and little seen
• Monthly winners are judged by rotating panel of experts
• First two monthly winners:
  • The 85th PGA Championship
  • Jason Santa Maria

Using CSS For UI Features

• So CSS can give us great visual design—what else?
• How about popup elements and nested menus?
• We can do all these and more without scripting
• Nothing against JavaScript, but the less it has to do, the better

Pure CSS Menus

• With some simple unordered lists, we can create a menu system
• Submenus are just nested lists
• No JavaScript required—CSS is all you need!
• ...unless you want the menus to work in Explorer for Windows

Hacking Explorer

• A couple of leading packages:
  • Peter Nederlof’s whatever:hover
  • Dean Edwards’ IE7
• Both make “pure” menus possible in IE/Win
• It does require a tiny bit of proprietary coding and prevents validation
• Small prices for a huge benefit!

Hacking Explorer Even More

• PNG images should dominate the Web: lossless high-bit color, full alpha channel
• Explorer for Windows has long been the roadblock, but no more
• A number of PNG hacks are now available, including IE7
• There have been some glitches, but they’re being worked out with experience

Why Would We Bother?

• Standards-oriented design yields:
  • Reduced page weight
  • Increased accessibility
  • Reduced bandwidth consumption
  • Increased site response time
  • Search engine optimization
  ...all inherent in the technique!
• There are also expected benefits in terms of server load
• High-volume sites can become more responsive and chew up less bandwidth

A Case Study

• Slashdot is the perfect example...
• 50 millions page views per month, or 1.6 million per day (as of June 2000)
• Daily savings without cached CSS: 3.15 GB
• Daily savings with cached CSS: 14 GB

ESPN Gets Game

• ESPN converted its design to use CSS, no tables
• Page weight dropped by about half (100KB - 50KB)
• Page-view average is 40 million per day
• Do the math—it adds up!

The Whole Package

• CSS design can be (and often is) as beautiful as the designer’s vision allows
• Page weight reduction is an all-around win for users, designers, and adminsitrators
• Pages lay out more quickly
• Accessibility and SEO benefits come along for the ride
• Pages are easier to edit and maintain