The Standards Payoff

Eric A. Meyer

Netscape Communications

The Standards Payoff

Standards Are Cool, But...

Okay, so everyone wants you to ditch tables and "use standards"
What's in it for you, economically speaking?
Conversion/redesign process will take time and energy
Obviously, there's no point if the cost outweighs the benefit

Standards-Oriented Design

Standards-oriented design markup is easier to maintain
Updates and redesigns are much simpler and don't require a return to Square One
Markup supporting this type of design is more lean
Leaner markup means smaller pages, which means improved performance all around

What About The Hindmost?

Okay, so obviously ancient browsers can't do everything today's browsers can
First step: realize that "looks the same in all browsers" is impossible (and always was)
Look for ways to deliver similar experiences without crippling yourself or your users
Take a cost-benefit approach to your design decisions

Example: Fox Searchlight

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

Example: OfficeMax

List of over 50 links on left side of page
Every link is preceded by a blue arrow image
Converting to an unordered list using CSS to replace bullets with images would save about 5KB of markup
Is the bandwidth cost worth the benefit of a more consistent look?

Example: ESPN

In March 2003, ESPN's home page moved to a non-table layout
ESPN.com serves between one half and one billion page views every month
Initial page-weight reduction was just over 50KB
Doing the math, we discover there's a pretty clear benefit

Performance Profiling

Using the Windows Performance application, we can actually see how pages do
Tests were run on variants of a typical "portal"-type page
56Kb dialup connection used for testing
Cache completely cleared before each test; page loaded and then re-loaded to compare uncached with cached performance

Profile: Initial Page

Profile: Whitespace Stripped

Profile: Simplified Structure

Profile: Non-Table Layout

Easing the Bytes

Obviously, smaller pages mean faster pages
They also mean reduced server load and faster servers
Even on broadband, the faster responses pay off
Happier users mean more loyal users and more return business

Accessibility Wins

Documents with strong markup structures are almost always more accessible
Screen readers do better with structural markup, and can use things like headings to improve user experience
If you remove your CSS and the page looks like a 1994-era masterpiece, you're golden!
"Skip to" links can provide even more help, and be hidden from visual browsers

Multimedium Support

With standards-oriented design, supporting other media becomes a snap
Aural medium support falls out of the accessibility wins
Supporting cell phones and PDAs is mostly handled simply by being accessible
Creating print-medium styles is easy, and if you've planned ahead you can get professional-looking printouts
You can even create slideshows, given the right tools

Example: Wired

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 properly written handheld browsers get the non-CSS version

Example: DevEdge

In February 2003, DevEdge redesigned using no tables at all
CSS positioning is used for layout
User-selectable themes driven by stylesheets
Printer-friendly pages driven by medium-specific stylesheet, and has extra features for advanced browsers

In Conclusion

Reduce page weight!
The stronger and leaner your structure, the better for all your visitors
Accessibility and multimedium support are much easier with standards-oriented design
Reduced maintenance and redesign costs provide extra long-term benefits
Ancient browsers need not be completely frozen out