Design Tip:
5 Steps To Readable Pages

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

Reading on a monitor is more difficult and more tiring than reading printed material. Ideally, you want to design a site where visitors linger and return frequently (a "sticky" site). But if visitors have a hard time reading your content, they're less likely to stick around. Let's consider some easy design techniques that make online reading easier.

1. More contrast please!

This may be the single more important aspect of readable page design. It may also be the one that's most often ignored! A trend with some designers is to use text and heading colors that are very close to the background color: something like light green text on a beige background.

How well can you read this on our white background?

It's probably hard. How long do you think you'd stick around if all our Webmaster Tips were presented in light blue on a white background? How long before we'd all need glasses?

2. Choose a readable font size

While we're discussing glasses, it's probably a good time to discuss text size. Reading online is already more tiring than reading printed material. That's a problem, but some Web designers exacerbate the problem by using tiny text that visitors have to strain to read.

It's not uncommon to find sites that use 10 or even 8-pixel font sizes like this one. Can you read it?
What if it's also in blue?

On his UseIt.com Web site, usability expert, Jakob Neilsen, discusses his two theories of why this is a problem with so many sites:

Stand back a few feet from your monitor. Can you still read the section headers and identify the links and navigation system? If not, your site may be a problem for visitors.

3. Say it clearly and quickly

Because online reading is more difficult - and because many users are impatient to begin with - people tend to scan Web pages and make a quick decision whether to stay or look somewhere else for information.

Avoid placing important information inside big blocks of text and instead break it out into bullet lists. Lists give visitors a visual clue that the section contains important points.

Which example would you be more likely to read on a Web page?

This one:

Our full-service restaurant offers the best fine dining in the Middle Tennessee area. We're the only restaurant offering gourmet French cuisine in a romantic setting with dining rooms available for private parties and receptions. We offer full-service catering, an extensive wine list, and valet parking.

Or this:

Gourmet French cuisine Private rooms for parties and receptions Full-service catering Extensive wine list Seasonal outdoor dining Valet Parking

You only have a few seconds to win over visitors. Make your important points clearly and succinctly.

4. Clearly define page sections with color

Images add more than just visual interest to a Web page. They also increase the page's download time - sometimes by a great deal. You can't make your point quickly if visitors have to wait for the page to display. Visitors will begin leaving within 8 to 10 seconds, so it's important to always check your page load time with HTML Toolbox and use GIFBot to optimize your image file size.

But also consider whether you really need the images at all. You can often create just as much visual interest using Cascading Style Sheets (CSS) to add colored borders, horizontal rules and colored section headers.

Since color is rendered by the browser, no extra downloads are required. It's even possible to use CSS effects to create site logos, but you don't have to go that far.

Use colored backgrounds and borders (always remembering to retain good contrast and use complementary colors!) to draw attention to important points and guide visitors attention through the page.

Let's go back to the previous restaurant example. We used a bullet list to emphasize the important points. What if we also placed them inside a DIV tag and apply a colored background?

This isn't a technique you want to overuse. Then the page gets too busy: the eye jumps from element to element without really focusing on each one.

5. Know your page display

Visitors have to be able to actually see page content before they can even think about reading it. Always test your pages thoroughly before you post. That's the only reliable way to identify and fix browser and operating system compatibility problems before your visitors find them!

Browser bugs and operating system compatibility problems can be incredibly frustrating because you have to view the page on particular equipment and in a particular browser to see the problem. Browser Photo simplifies debugging by showing you actual screen shots of your Web page in 16 different browser and operating system combinations. It alerts you to problems that can break your page in some browsers.

How bad can those problems be? Well, suppose you're using a table for layout and you accidentally delete the closing table tag. Explorer displays the page with no problem, but Netscape won't display the table at all. If you only test in Explorer, you won't realize that visitors using Netscape will see nothing but a blank page!

Our browser compatibility tutorial has even more information and examples that are sure to send you running for the nearest testing and debugging tool!

Creating attractive, readable pages is enough of a challenge. Be sure to test your pages and make sure that visitors can actually view the content you so painstakingly designed!