Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
Positioning tips.
search engine optimization story search.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


Increase traffic.
Volume 8 (2005)
   September
   June
   April
   March
   January

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

Volume 4 (2001)
   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 (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   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
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

Design Tip:
The Value Of White Space

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

  
March 2005
Vol. 8, No. 2
 • Promotion Tip
 • JavaScript Tip
 • Design Tip
  

"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!

While a fluid layout can change the amount of white space on the page, other techniques can cause even more problems - sometimes breaking the page entirely in some browsers! NetMechanic's Browser Photo tool helps you find and fix coding errors and design techniques that can turn visitors away. You can quickly view actual screen shots of your page in 16 different browsers, browser versions, screen resolutions, and operating system combinations.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2007,
Keynote NetMechanic
All rights reserved.