Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Designing with Code: Leveraging Your Existing Content

Last updated Oct 17, 2003.

By Kris Hadlock

As technology progresses and information becomes more readily available, users become more demanding. Unless you already have a loyal audience, good information is usually not enough to attract new visitors. If you want to capture your visitors' attention, you must first pay attention to the presentation and placement of your information. Let's face it—information is worthless if nobody is reading it.

Of course, there are always exceptions, such as when people find your site when looking for something specific via a search engine. Still, most visitors will likely leave your page if they can't find the information they need immediately. And, if the page isn't appealing, it's all too easy to hit the back button to see many pages of results on the same topic.

Through a number of simple enhancements, you can create a site that's easy to find and a pleasure to read. In this article, I'll share a few such enhancements that have helped me over the years and that I still use today. I'll show you how to utilize your space without overdoing it, create a successful error page, and make recommendations that visitors find valuable. First, however, you must have a basic understanding of information design and how it relates to the web.

Information Design

First impressions are extremely important and can make or break your web site. The design and presentation of the information is as important as the information itself. In fact, most web users won't even read your information if the presentation isn't aesthetically pleasing. This actually makes a lot of sense; have you ever made the decision to not buy something from an online store because the site didn't look professional? Or, to support the original point, have you ever thought that the information on a web page wasn't credible because the web site didn't look professional?

Creating an aesthetically pleasing web page isn't about graphics and pretty pictures. In fact, it has nothing to do with graphics at all. Information design is about the presentation of the information itself. This includes the layout, fonts, size, spacing, color, contrast, and so on. Good design helps the eye find the important information right away while keeping supporting info within easy reach. One way to do this is to separate your content into distinct areas with the most important information in a main content area and supporting material in a sidebar. You create these distinct areas using white space.

White Space

Good designers use white space to create contrast, a basic design principle that's often overlooked on the web. Before designing your Web page, you need to think about what information will be on your site and how to best support that information through design.

White space is important because it allows the eye to easily focus on the key content areas, rather than jumping all over the page looking for a place to rest. As a designer, you want to use white space to create balance and guide the reader's eye in a logical manner though the page. Avoid overcrowding your page. As the saying goes, less is more.

Error Page

Error pages are a great place to offer up existing content. First of all, there are still many error pages out there without any customization at all. My first advice would be to at least customize your 404 error page by branding it, providing a user-friendly message, and a link back to the home page. Nobody wants to see an HTTP error returned from the server and most users don't know what to do when this happens, so they choose to leave when they could have at least been easily redirected to the home page.

As I initially stated, you can make more use out of this page by offering some of the existing content from your web site. For instance, let's say that you have some articles, projects, and products on your web site. Why not use this opportunity to offer some of the latest content from each of these categories? You could say something such as, "Sorry, this page cannot be found, but you may be interested in the following..." This is a simple way to leverage something that you already have without a lot of extra work. Plus, the payoff can be tremendous when the options are having the user leave or redirecting them to another location on your web site.

If you have search capability on your web site you can also provide it here, allowing users to search for what they were looking for in the first place. Another good idea is to provide a link to your contact page in case users want to ask you where you put an article that they bookmarked four years ago.


An error page isn't the only place you can make recommendations. Cross-referencing your content is a great way to create click paths through your site. As long as the recommendations are relevant to the information on the page, there is a good chance that people will click on them.

If you have an article about web design, for example, you can recommend other design related content, such as products, projects, or additional design articles. You can even try to generate revenue by recommending design books from Amazon. It's really a simple idea, but all of these concepts are simple and all of the content already exists on your site. That's the best part about it; it's simply about leveraging the existing content.