Painting the Web

Accordions: Smooshable Spaces

Another neglected graphical element in web pages is space. Nowadays, people cram as much as they can on a page, especially if any of the objects so crammed are ads or other moneymakers. We debate the benefits of color, argue about fonts, discuss endlessly the merits of photos and other visual devices, but rarely do we sit down and talk about space.

Space is just as much a component of a site's visual design and display as the color and the images. One of the central questions with space is, how do we continue to cram in all we want in the page while still providing enough empty space to be visually pleasing?

There are two ways to manage the space problem in a web page. One is to provide tabbed pages and add functionality to "open" pages when a tab is clicked, as in Figure 10-12.

The problem I have with tabbed pages is that they can be confusing, especially if you have a horizontal menu bar in addition to the tabs. My preferred alternative, and also the more accessible, is to provide a horizontal accordion: content separated into individual blocks that can be opened when clicking on the title bar.

Figure 10-12. A very simple tabbed interface

The accordion does require scripting, but if scripting is not enabled, the content displays vertically, as it would anyway—no harm, no loss of access.

Along with the reusable image expander, I also have a packaged accordion ...