Design Tip:
The Value of White Space

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

"Above the fold" isn't just a newspaper term. On the Web, it refers to the part of a Web page that appears in a visitor's browser without scrolling. It's the most valuable part of the page - and everybody in an organization wants that prime spot. But, in trying to please everyone, Web designers often try to stuff too much inside too small a space.

Remember the value of white space. It makes your page look more attractive, professional, and legible. All are key components of a successful Web site!

Get Active With Your White Space

White space is a design term that refers to space that isn't occupied by text, images, or other visible page elements. The amount and use of white space is a key component of a page's readability and legibility. There are two kinds:

  • Active white space: Space that's deliberately left blank to better structure the page and emphasize different areas of content.
  • Passive white space: Empty space around the outside of the page or blank areas inside the content that result from a poor design.

 

A page with too little white space makes visitors feel uncomfortable because the page seems cluttered and hard to read. Visitors quickly get overwhelmed and move on to a more welcoming site. In contrast, pages with too much white space seem empty, as if there's not enough content to fill the page. Visitors may wonder: "why bother with this?" and go somewhere else.

Used properly, white space is an integral part of a page's design and a large contributor to usability. The content feels structured, it's easy to find information, and the page layout works with the content to emphasize the most important information.

Designing With White Space In Mind

So when you're designing or redesigning your page layout, consider how to use active white space to create a consistent look and feel. Create your own template or select a ready-made template with white space in mind.

A good page template includes active white space as an intentional page element that visually separates the navigation, content, header, and footer. Visitors can predict where the navigation and content areas will be as they jump from page to page.

Often, it's best to do your first page layout design on paper rather than coding it. You avoid the temptation to start adding the site logo and "just a little content" and instead focus on how the individual elements blend to create the whole effect. When you've spent a lot of time coding the example, you're less likely to change it - even if the page isn't that great.

Consider creating shadowboxes as content placeholders. You get a better feel for page weight and contrast without getting distracted by content.

Here's an example. With just a glance, you can immediately identify the blank areas of passive white space:

 

And in this example, you can see that there's definitely a need for a more organized and structured page layout. Although there's some active white space around the navigation, logo, and page header, the content area seems disordered and the long lines of unbroken text may be hard for visitors to read:

 

Fluid Layouts Can Affect White Space

A fluid layout is one in which DIV and TABLE sizes are set to percentages. In a static layout, the DIV and TABLE sizes are set to a fixed measurement. For instance, note the difference in these two opening DIV tags:

  • Fluid: <div height="100%" width="80%"> Fills 80% of the browser window's horizontal size even when the browser window is resized to be larger or smaller.
  • Static: <div height="320" width="600"> Horizontal measurement of this DIV will always be 600 pixels, no matter what the size of the browser window.

 

The browser display difference is obvious: in a fluid layout, visitors will rarely see a horizontal scroll bar. The page content arranges itself based on the width of the browser window. It's more flexible and gives visitors more control.

Which is exactly what many designers hate about fluid layouts! It's a lot harder to predict just where page elements will appear in relation to each other. Individual visitors may have completely different browsing experiences. Consider the display difference when a fluid layout is viewed full size on a 19 or 21-inch monitor compared with a 12-inch one!

When the layout adjusts to fit the browser window, there may be less active white space - or more passive white space!

There's nothing inherently bad about using a fluid layout. In fact, you'll get a big pat on the back from coding purists, but you will need to spend some extra time testing the layout in different size monitors. You want to make sure that the page is at least legible and understandable to all visitors!

When you test, check these three variables in particular:

  1. Watch for passive white space that appears when the page is stretched in a large browser window.

  2. Make sure that text content doesn't stretch all the way across the page. Shorter columns are easier to read because people tend to process blocks of words instead of focusing on one word at a time.
     
  3. Keep blank space around content at all times. This emphasizes the content and makes is more readable. Remember: newspapers and magazines always leave a border around the page!

 

Webmaster Tutorials

 Webmaster
 Resource Center

Browse our Webmaster Tips library organized by topic. Learn about search engines, JavaScript, HTML, &  more!


Quick Search

Search our newsletter archives by keyword phrase.

 
                   

Volume 7 (2004)

 November
 September
 July
 June
 May
 April
 March
 February (Part 2)
 February
 January (Part 2)
 January

Volume 6 (2003)

 December
 November (Part 2)
 November
 September
 August (Part 2)
 August
 July (Part 2)
 July
 June (Part 2)
 June
 May (Part 2)
 May
 April (Part 2)
 April
 March (Part 2)
 March
 February (Part 2)
 February
 January (Part 2)
 January

Volume 5 (2002)

 December (Part 2)
 December
 November (Part 2)
 November
 October (Part 2)
 October
 September (Part 2
 September
 August (Part 2)
 August
 July (Part 2)
 July
 June (Part2)
 June
 May (Part 2)
 May
 April (Part 2)
 April
 March (Part 2)
 March
 February (Part 2)
 February
 January (Part 2)
 January