Skip to Main Content
Painting the Web
book

Painting the Web

by Shelley Powers
May 2008
Beginner content levelBeginner
656 pages
17h 41m
English
O'Reilly Media, Inc.
Content preview from 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.

A very simple tabbed interface

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 ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Reinventing the Organization for GenAI and LLMs

Reinventing the Organization for GenAI and LLMs

Ethan Mollick
Mastering PHP 7

Mastering PHP 7

Branko Ajzele

Publisher Resources

ISBN: 9780596515096Supplemental ContentErrata Page