HTML Utopia: Designing Without Tables Using CSS. Chapter 4: CSS Web Site Design

CSS Success Stories

The following sites serve as great examples of what can be accomplished with CSS page layout:

SitePoint (http://www.sitepoint.com/)

I know, I know... it's unseemly to use my own publisher as an example of why CSS works, but you've got to hand it to these guys. They've not only taken a tired, table-laden layout and replaced it with a fresh, standards-compliant design, but they've also made the site vastly more usable in the process.

Though the flat colors in use on this site may look simplistic at first glance, this “low fat” approach to the design keeps the pages loading quickly, despite often lengthy content and a plethora of navigational options.

A List Apart (http://www.alistapart.com/)

Since its inception in 1998, this site, and the associated mailing list, has become one of the leading sources of information and advocacy for CSS design and layout. The site itself is a model of simplicity, but it demonstrates that simple doesn't have to mean boring or ugly.

Netscape DevEdge (http://devedge.netscape.com/)

DevEdge is Netscape's resource site for Web developers. With Netscape 6 and 7 having been based on a standards-compliant Web layout engine, it seemed only logical to redesign the site to take advantage of this technology. They've even published an article that covers their approach to this redesign.

ESPN (http://www.espn.com/)

The first mainstream, commercial Website to be built with CSS page layout techniques, ESPN.com is the ice breaker that the Web design community has been waiting for!

When pitching a site design idea—especially when you propose to use “new” technologies like CSS layout—clients will often ask if you can show them another site that has implemented a similar solution successfully. Until now, all the best examples of CSS site design were either sites written by Web developers, for Web developers, or personal sites that could afford to take risks because they weren't in it for the money.

For an in-depth interview with one of the designers behind this site, visit Netscape DevEdge.

Fast Company Magazine (http://www.fastcompany.com/)

The online presence for a popular business magazine, this site was redesigned to make use of CSS layout and semantic markup. The actual look and organization of the site hasn't changed drastically from its previous version, but thanks to CSS, its pages load much more quickly.

Our Sample Site: Footbag Freaks

For the rest of this book, I will relate each of the techniques we discuss, wherever possible, to a sample site that has been developed especially for this book. Called Footbag Freaks, this fictitious site can be found online at http://www.footbagfreaks.com/. The source code is also available for download from this book's Website. You can see the front page of the Footbag Freaks site in Figure 4.2.

Figure 4.2. The Footbag Freaks Home Page

This site makes full use of CSS for both page layout, and the styling of text and other page elements. The HTML code is entirely semantic. The site has been designed and tested to work on the following browsers:

Internet Explorer 5 or later for Macintosh and Windows
Opera 6 or later
Mozilla 1.0 or later and related browsers, including Netscape 6 or later and Camino

The site complies with the following W3C Recommendatons:

XHTML 1.0 (Strict)
WCAG 1.0 (AAA Rating for Accessibility)
CSS 2.0

Summary

In this chapter, I provided the justification for all that is to follow. I explained in detail the most important advantages that CSS has to offer for your Web design work. These advantages fell under the headings of:

increased stylistic control
centralized design information
semantic content markup
accessibility
standards compliance

After presenting a few success stories—sites that have used CSS design techniques to good effect—I introduced our own, admittedly fictional, success story: Footbag Freaks. Throughout the rest of this book, we'll explore the wide range of CSS features and techniques that go into making a site like this one.

Chapter 5, Building the Skeleton, begins this process by looking at how to build the skeleton of a page layout, and flesh out major pieces of design using, pure CSS techniques.

^[9]Specifically, the media attribute.

^[10]A deprecated element or attribute is one that has been tagged for removal from the specification, and which therefore should not be used. For a document to strictly comply with the specification, it should not use any deprecated tags or attributes.