Designshift

on point: from archive 2004

Streamlining with Stylesheets

Clive Sweeney — January 5, 2004

We've taken the plunge. Our site is now completely laid out using CSS positioning. This is a very big step, and it's about time.

But what's the fuss?

Cascading Style Sheets — a.k.a. CSS — are not new; almost every site you visit today uses CSS to some extent, most commonly to control the fonts and colors used for the text. Even with this limited application, it makes pages much, much easier to develop and maintain, and more efficient to display.

But from Day One CSS was intended to do so much more. We knew stylesheets would someday replace the misuse of tables and spacer gifs to lay out our pages. We've just had to wait a few years for our browsers to catch up. Just a little bit longer, just a little bit longer... but finally the time has come. Every day there are more and more sites throwing out the tables (except, of course, the ones used for actual tabular data) and dumping the rigid little hacks that used to hold the text and images in place.

And it's not just the experimental, bleeding edge sites. There are some very big, very commercial sites riding the wave — ESPN, Wired, Fast Company, and Lee Jeans' One True Fit to name just a few. Of course, just visiting these sites you can't tell the difference. You have to look under the hood.

Even now, if you look at the HTML markup — the source code — for most sites you'll find a convoluted arrangement of tables within tables within tables providing the framework that holds the visual display in place. While this is not what tables were intended to do, it worked (once you made the table and cell borders invisible). What's wrong with using tables for layout?

  • It adds considerably to the file size and thus the download time of the page.
  • It makes the layout of the page much, much harder to edit and maintain.
  • It mixes up the actual content of the page with the "instructions" for how the page should be displayed.
  • It makes markup more "dense", which hurts rankings by search engines.

Wouldn't it be much nicer to keep the instructions separate, and use the same instructions for different pages? The basic display instructions (the stylesheet) can be downloaded once, and they'll apply to each new page. Then if you want to change the layout or display characteristics of several pages, or of your whole site, you can edit one stylesheet document rather than every separate page. And you can have different stylesheets (different sets of instructions) for different uses, such as printing the page. Display the page one way on a computer monitor but print it another way.

But there are other, long-term benefits as well. The separation of structure/presentation (the CSS) from content makes the HTML content easier for search engines to handle and thus can improve a site's rankings in search results. While older browsers were designed to be forgiving of non-standard markup and thus accommodated coding hacks like table-based layout, newer browsers may tend to be stricter in requiring valid, standards-based markup. Certainly web standards and CSS layout help make a site more accessible to users with disabilities.

That's the power of CSS-based layout:

  • Easier to maintain and update
  • Less bandwidth required
  • Adaptable to different display requirements
  • Search engine friendly
  • More compatible with newer, standards-based browsers
  • More accessible

And finally we've reached the point where our modern browsers can meet the challenge. Now it's up to website developers and their clients to realize the potential and learn to take advantage.

Related article: But What About Netscape 4? — about whether we should let the limitations of the Netscape 4 browser continue to hold us back.

See more on point articles in the archive.

Comments

If you have any questions or comments about what you've read here, please let us know.


Valid XHTML 1.0 Valid CSS