Designing a Web Site That Works

Last Updated Dec 13, 2007 1:24 PM EST

Considering most people visit Web sites to find information, it's not surprising the majority of sites focus more on presenting content than showcasing graphics. The most successful sites are built around the information they offer visitors. The most effective ones use graphic elements to enhance what readers take away—not to dress up the site. In designing your Web site for greatest impact, focus on:

  • a standardized design for presenting information throughout the site so readers can easily find the content they want
  • a simple, clean, page layout that makes the content easy to read
  • avoiding unnecessary graphics and multimedia experiences
What You Need to KnowWhat does "Web site design" mean?

Web site design is about organizing the information you're making available to the world so that people can find it and read it easily. Web site design is a form of publishing: presenting content in a way that is both useful and attractive to visitors.

Why are there so many poorly designed Web sites?

As is the case with most anything in life, it's much easier to sloppily cobble together a lousy site than to plan and execute a good one. Some organizations haven't defined what their Web sites are intended to achieve. Their sites have evolved as page after page of disconnected ideas. This is often because the organization lacks a clear vision for its site and an effective method of organizing its efforts to produce the site leaving critical decisions on content or information to design to technical specialists rather than information specialists. The results may be essentially unusable from a consumer's point of view.

Who should be in charge of the Web site?

The Web is a publishing medium, and a Web site is a publication. So an editor should oversee the design and execution of the Web site. The primary job of an editor is to understand content; the primary purpose of a Web site is to publish content.

What's the prime aim of my Web site's design?

Remember, people use the Web as they search for information, and then they read it. That's as true for sites selling products as it is for news sites. Many Web sites ignore this and make their content unnecessarily hard to read. You don't have to try too hard to find sites with overly elaborate color schemes, small fonts, and poor layout. If you think of your Web site visitors as readers, the importance and function of your Web site's design becomes far clearer.

What to DoCater to Your Readers' Needs, Not Your Ego

Design your site around the needs of your visitors and remember that the person who visits your site:

  • is there to find some information;
  • will scan your pages, moving quickly from one piece of text to another without reading all the words you put there;
  • is generally in a hurry, may not wait for elaborate pages to download and may not read all of what you put on a page no matter how fast it loads.
Create Compelling Content

Writing for the Web requires a punchier, more concise approach than writing for other media. Time-poor visitors don't want to wade through reams of text, so remember to:

  • keep it brief. Most information blocks should be between 500 and 700 words, with paragraphs of between 40 and 60 words. Sentences should be short. There should be no more than 9 to 12 words per line of text;
  • use useful descriptive headings and summaries;
  • update regularly. Out-of-date content is useless and makes you look incompetent.
Organize Your Content

Think of your Web site as a directory to what your visitor wants to find. If you have wide variety of products or services to sell, structure the site in such a way that visitors can both find a specific item and browse through your inventory easily. eBay and Amazon do this particularly well.

If visitors can't easily find their way around a Web site, they will leave in frustration, unlikely to return. Your site needs to employ certain devices to effectively organize the content on your Web site. Metadata, navigational design, and a search function are fundamental to a site's organization and accessibility. Metadata, invisibly embedded descriptive information, delivers essential information on a document or Web page including data such as: publication date, author, keywords, title, and summary. Searching for information, one of the most common activities people do on a Web site, depends on metadata to be truly effective. The search function must be available on every page. Navigation is critical: to use your site, a visitor needs to find his or her way around it. The better the site's design, the faster and easier it will be to move through it effectively.

Invite Visitor Contact

Comprehensive details about how a visitor can contact your firm should be prominently available on your site. Your contact page should cover the appropriate range of e-mail and telephone contacts. Physical addresses, with location maps, should also be provided. Online community options such as chat, discussion boards, and e-mail discussion lists can enhance a visitor's understanding of the organization and its products. E-mail newsletters can allow the organization to keep in touch regularly and at low cost.

Set High Standards

Newspaper designers have found that people follow a certain pattern when reading content in a newspaper. This is true of reading content on a Web site, too: people tend to navigate and search in a certain way. That's why it's important to maintain consistency between all your Web pages—it helps a visitor find what they're looking for without having to work hard at it. When you have different designs in different sections of a Web site, or between Web sites in the same organization, you confuse people and waste their time.

Some of the generally accepted standards and conventions for Web site design are included in this list:

  • All Web pages should have a consistent set of navigation links that is visible when the first screen loads, pointing to key areas within your Web site. This essential navigation (sometimes known as global navigation) should always begin with a link back to the home page of the Web site. Essential navigation should contain links such as Home, About, Products, and Contact.
  • The masthead is the top of the page area, and should be slim, like the masthead of a newspaper, maximizing the space on offer for the content your visitor came to get. Your organization's logo should also appear in this area, and you could place essential links and a search box here too.
  • Make sure a footer appears on every page, featuring a copy of the essential links, contact information (address, telephone, fax, e-mail), and links to copyright, trademark and privacy policy information.
  • Minimum accessibility standards for Web sites are increasingly becoming a legal requirement. In any case, implementing best practices in accessibility design generally leads to a more effective Web site.
  • Every page on your site should have a consistent presentation format with consistent layout and navigation, and include elements such as a heading, summary, author and date of publication if appropriate.
  • For maximum readability on screen, use sans serif fonts such as Verdana and Arial; they tend to be easier to read on a screen than serifs. The minimum font size recommended for documents displaying on a screen is 10 point. Although you may be keen to roll out your corporate color palette on your Web sites, nothing beats black text on a white background.
  • Avoid using italics, which some people find heard to read on line. It's also best to avoid underline for emphasis, as people will think it's a link (moreover, underlining as a typographical device went out with the typewriter).
  • Graphics should be in small file sizes for fast loading. If it's absolutely essential to feature a larger graphic, you could use a thumbnail approach, where you display a small graphic and link to a larger version of it, which users can download if they want.
  • Although Internet Explorer is by far the biggest player in the browser marketplace, you should still make sure that your site can be can be viewed properly in browsers based on the Mozilla standard such as Firefox and Netscape Navigator. Test your Web site using a variety of browsers, and different browser versions.
  • Your Web pages should contain the information they need to present the information they promise to your visitors and nothing more. Keep your content focused and refrain from adding unnecessary graphics and multimedia elements.
  • Frames are a technical device to break up a Web page into separate, independent sections. They introduce more problems than they solve, however, and are difficult to code, maintain, and even print. The Web content expert Gerry McGovern gets straight to the point in his book Killer Web Content: "Frames? Just not a good idea."
  • A splash page is an introductory or initial page presented to visitors before they can get to the actual home page: splash pages are sometimes used to advertise a hot new product, for example, but tend to annoy visitors as they are another (functionally useless) to get through before they can do what they came to do. Think carefully before you use them.
  • Use hypertext (links) liberally; the colors that have become accepted as "standard" are blue for unclicked, purple for clicked. People have become accustomed to these colors.
  • No gimmicks: blinking or swirling logos, animated e-mail mailboxes, and page counters (who cares!) are signs of an amateur Web site.
Test with Real People

The only way to know how well your site works for the people it is supposed to serve is test it with them, getting as much feedback as possible. Asking for feedback, or better yet, actually watching people use your site, is the best way to find out what's working and what isn't.

What to AvoidYou Focus on Attention-grabbing Gimmicks

Many marketers are used to creating brochures and advertisements that seek to grab attention. However, when someone visits your Web site, you've already got their attention. They don't want to see a swirling logo or self-indulgent introductory screen—no matter how "cool" you might think it is—before they get to your actual site. People are coming to your Web site because they want to find out something about your product or service. If they didn't come to your site for dancing logos and you force them to watch your self-aggrandizing gimmicks, you've wasted their time.

A large proportion of Web users go online to find information and perhaps complete a transaction. Yes, gimmicks may grab their attention for a few seconds, but in the main they get in the way and keep people from doing what they came to do.

You Simply Create an Electric Brochure

Some companies treat their Web site design as though it were advertising brochure design. A Web site is a distinct medium and your site's design should incorporate the distinct advantages of presenting information on the web, such as making full use of links to related information. Your design should allow you to update your Web site with new content easily. A Web site is more like a newspaper than a brochure and should be designed accordingly.

Where to Learn MoreBook:

McGovern, Gerry. Killer Web Content. A & C Black, 2006

Websites:

A List Apart

W3 Schools