A Common Approach

To help us get a handle on what it means to allow vertical expansion for these horizontal page components, let's use an example from the Weba site we'll refer to as The Best Store Ever (its real identity has been hidden to protect the guilty). The Best Store Ever is your typical e-commerce site, selling a variety of semi-useful products to improve your home. We've fictionalized the site for this chapter, but its design is based on real-world techniques. To demonstrate a common approach to designing a horizontal login/promotion bar, we're going to zoom in on that area of The Best Store Ever's Web site (Figure 3.1). At the top of each page sits a colored row that contains login and local store information, followed by a second row that contains a promotional message that is regularly updated. Each row contains no more than one line of text.

Figure 3.1. This shows the top portion of our fictitious example site, The Best Store Ever.

These two rows (along with the entire layout) are constructed using a series of nested tables. Graphics (such as the rounded ends of each row) and text are placed within the table cells.

Figure 3.2 illustrates how the table cells of the top row might be structured; each cell is outlined in red. You can see how each section of the row is in its own separate table cell, including the rounded-corner graphics at each end. This is an approximation of the table structure, without venturing too deep into The Best Store Ever's code. But the important point here is that tables, spacer GIF shims, and small graphics have been combined to form the two rows seen here.

Figure 3.2. Each section of the row is in its own separate table cell.

Using tables and spacer GIFs to position graphics and text is a technique that's been honed over the yearsit's the way most Web sites were built, and a lot of designers prided themselves on being able to replicate any possible design concept on the Web, right down to the last pixel. If you could design and print it, you could turn it into a Web page.

But we're all learning better ways of designing for the Web. And we're discovering methods that increase a site's readability and accessibility by using lean, semantic markup and CSS for design. A bit later we apply those methods to the two horizontal rows found at The Best Store Ever, but first, let's talk about why this design isn't bulletproof.