Bulletproof Web Design: Expandable Rows
This chapter is from the book
This chapter is from the book
This chapter is from the book
Resist specifying height, and plan for vertical expansion of horizontal page components.
Horizontal page components such as site headers, login bars, breadcrumb trails, and search bars are no strangers to a typical Web site. These areas are often positioned near the top of the page and may contain a mixture of graphics (whether a background or otherwise) and text. In general, these areas are designed in such a way that prohibits vertical expansion—assuming that a larger text size or an increased amount of content would either never happen or wouldn't harm the design. While it's customary for areas that contain articles or long sections of text to accommodate any length or size of text and content, it's important—and not impossible—to treat other horizontal areas this way as well.
This chapter takes a look at a common approach to designing a login/promotional area that occupies the top portion of a typical Web page. We deconstruct the design and then rebuild it to accommodate any text size or amount of content.
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 Web—a 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 years—it'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.