Black Cap Design Resources > Recent Articles

Articles ~ October 2007

Top 5 Layout Tips

Web Page Layout - How To Create a Welcoming Web Experience

Are you considering having a web site designed or re-designed?

Page layout is something most end-users seldom think about. People are likely to have a "yuck!" or "hmmm nice" reaction to a given web site, and don't give it much more thought. Good page layout keeps visitors at your site. Nothing gets people running for the exit doors faster than bad layout.

So, what is page layout? Simply put, it's where stuff is placed on your site's web pages. It's a bit like the layout of your house or apartment. When you have friends over, do they get lost on the way to the bathroom? (Hopefully the architect thought to include a bathroom when your place was designed.) Is there space for them to relax? How is your stuff organized inside of those rooms?

Web sites are no different. Think of each page as a room in your house. You want your place to be welcoming right? Here are 5 helpful tips for effective page layout:

Top 5 Layout Tips:

1. Make Sure You Have the Essentials

Every room in your house requires basic features; a floor, a ceiling, an entry/exit point, some furniture and lighting. Similarly, usable web pages have basic requirements. These include:

  • prominent placement of branding; your logo or name. It's usually placed in a header which spans the top of the page. This is the first thing people see, so it's important to grab your guests' attention and convince them they're in the right place.
  • a navigation menu. Site navigation is usually a horizontal bar placed just below the header, or a vertical bar placed in a left-aligned column.
  • an area for page content. The content area can be divided into columns or blocks; whatever most effectively gets your message across.
  • a footer. The footer can include another navigation menu, copyright information, and useful links such as a privacy policy link or a "back to the top" button. The footer defines the end of the page. It lets the user know, "that's all there is" and provides a way navigate elsewhere within your site.

2. Be Consistent

The Home page is the entrance where you typically welcome guests. But on the web, you don't control how people get in. Other sites and search engines will often link to pages other than your Home page. For that reason, while content will change depending on the page, the layout should remain consistent across all pages.

In other words, the essential features should be in the same place on every page. If they're not, users will quickly lose confidence, become disoriented and will head for the nearest exit.

3. Use White Space

Imagine going into someone's home or apartment where every inch of wall and floor space is crammed with stuff. How long would you stick around before running for the door? Unfortunately, many poorly designed web sites fill their pages with text and images in the hope of getting their message across. Sites like that are exhausting to visit because they don't allow your eyes (or your brain) a chance to rest.

The solution is providing ample space around blocks of text and images for people to think about what they've just read or seen. This space is called white space, ("white" because the term first applied to printed layout on white paper). The trick is to balance the right amount of white space: too much and people get bored because there isn't enough to keep their interest; too little and they're overwhelmed by all the stuff on the screen.

4. Choose Liquid vs. Fixed-Width Layout

The Web has one distinct difference from layouts in the physical world. In the physical world, your apartment isn't going to suddenly change size. In the virtual world, the amount of space available can be determined by how big your guest's monitor is. Because of that, space on the Web isn't "fixed"; it can expand and contract.

When you design your site, you can choose between a layout that expands to fill the entire screen no matter how big the monitor is, or a layout that has a fixed-width so it will always be the same width no matter how big the screen is.

Reasons to choose fixed-width layout:

  • Your site's page layout will be consistent regardless of your guests' monitor size or screen resolution.
  • You can easily control text line-length. When lines of text get too long, the content becomes difficult to read. (That's why newspaper columns are narrow.)

Reasons to choose liquid layout:

  • Liquid layout allows you to maximize "screen real-estate". In other words, the site will fill the entire screen regardless of how big the monitor is.

In the end, it comes down to your personal taste. Liquid design tends to present more design challenges and doesn't display as consistently as fixed-width design. But if you want your site to fill your guest's monitor, it's the way to go.

5. Get the Width Right (AKA Horizontal Scrolling is Bad!)

In recent years, with the improvements and cost reduction in flat screen technology, people have increasingly been purchasing larger monitors. As a result, many sites today are designed for these large monitors.

The standard layout width used to be 800 pixels wide. That has been changing. Many sites now feature layouts that are 1024 pixels wide - a 22% increase in layout width. If you have a large monitor set to 1024 pixels wide resolution, these sites will look great.

The problem arises for people using smaller 800 pixel monitors, or for people with huge monitors who have their resolution set to 800 pixels. They only see the left-most 78% of your site and have to rely on a horizontal scroll bar every time they want to see what's on the missing 22% on the right. That means every time they read a line of text, they have to scroll to the right, then back to the left to begin the next line. For that reason alone, it's a really bad idea to assume guests to your web site will prefer your 1024 pixel wide site layout.

Why would someone with an enormous monitor have their resolution set to 800 pixels wide? Sight impaired users and seniors often set their resolution to make screen reading easier. The rule of thumb is, design for the lowest common denominator - which is still 800 pixels wide.

That's it! Remember, a good web designer will include you in the design process. It's going to be your place, so it should reflect your personality and tastes. For more information, or to request an estimate for site design or redesign, contact .