Chapter 4. CSS Web Site Design

The development of any Website begins with its design. Typically, you'll have a statement from your client, or at least a rough idea in your head, of the intended capabilities of the site. If you're a by-the-book sort of developer, this may even take the form of a detailed specification document, which may describe the use cases (i.e. things that visitors can do) the site needs to support, the official specifications and recommendations the site must observe, and the list of browsers and platforms that must be able to access the site.

At this stage, it is customary for the designer to create a series of mock-ups, progressing from paper sketches, to prototype designs in a graphics application, to actual Web pages in HTML. If you have some experience in traditional site design, you probably produce even your very first paper sketches with a mind to the HTML code that will eventually replicate those layouts on screen.

As you move from tables to using CSS as your primary page layout tool, you'll have to learn a whole new set of design principles upon which to base your initial mock-ups. In this and the next few chapters of this book, I'll guide you through those principles so that you can come to grips with the new limitations, and let your imagination run wild with the new possibilities.

It is human nature to resist change. When you encounter things that CSS can't do, you'll be tempted to cling tightly to the heavy handed control offered by table-based design, rather than to brave the new world of CSS layout, where the layout of a hundred pages can hinge on a single rule. In this chapter, I'll endeavour to coax you out of your comfort zone by explaining some of the "big picture" advantages of CSS-based design, and present some success stories of Websites that have taken the plunge and are reaping the rewards of CSS layout.