Creating an Effective Web Site - Part I  pwp home  >   Reference Library  >   Optimizing  >  Effective Web Site Part 1

A website is not a bunch of unrelated pages thrown up on the Web. It is a coherent, interrelated whole, with each page able to stand on its own, yet related to the others in both design and content. To create such an integrated whole, you must focus on both the individual pages (making them similar in design, tone, and style while retaining their separate worth) and the overall site (creating an intentional structure and planned navigation routes.)

In this first installment of this two part series, we will look at creating a page template; in the second, we will discuss how to create a 'storyboard' of your site, choose a structure, and create effective navigation paths.

Creating a template for your pages assures a visual consistency for your site and simplifies page creation and maintenance. All your pages can follow this template to some extent; you plug in differing text, graphics, and special features, but the overall 'look and feel' remains consistent. (Home pages, links pages, forms, and other 'special pages' will deviate the most from the template, but still include many common elements.)

First, make some design decisions about consistent elements that will tie your pages together, considering the tone and style you want to convey. Some of these elements might be:

Background: You can choose a white, a colored, or a patterned background for your pages. A white background increases legibility and makes the page elements stand out. Colored and patterned backgrounds can enhance a mood; just don't sacrifice readability, even at lower resolutions. And please, if you use a background image, and have changed text color to be seen against it, set the background color to match the image, to assure that 'no image loading' users can still see your text.

Logo: You might design a 'logo' for your site, an identifying graphic that symbolizes your company or message. On the main page, try a large version of this logo as part of a title banner across the top. On 'sub-pages', try a smaller version; the pervasive presence of the logo integrates your site.

Dividers: Either use <HR> or design a graphic rule to set off bite-sized sections of your page (watch the bandwidth!). Both the color and the graphic can reflect the tone of your page, elegant or whimsical, etc.

Navigation aids: You can use the graphical scheme of your dividers to create small, similar buttons to help users get around your site (back, next, home, etc.), or use text links. Place a 'navigation bar' of buttons or text links on every page in the same place, or put it in an unchanging frame, or use an image map. Don't forget to provide text alternatives for 'no image loading' users.

Header info: Make sure to include a <!DOCTYPE> statement in your Head section for validation, and a <TITLE> tag with the name of each page; this will appear at the top of the user's browser window. Include <META> tags with Description, Author, Keywords, robot directions, etc. Besides informing users, these are often used by search engines.

Now draw a rough GRID of a typical page in your site. For example, here's where the logo or title always goes, let each page have an intro paragraph here, lay out the main info. and fit in rules, bullets and other separating elements this way, here's where the e-mail links, special info (modified date, browser logos, copyright notice) and navigation bars go. 'Main' pages may have a slightly different layout (larger logo/title, less text, etc.) than 'branch' pages, but the designs are congruent.

Navigation aids (buttons, bars, image maps, etc.) are key; they should be identical in look and placement across the pages, and provide users a way to at least go up to the home or index page, to the previous page when appropriate, to the next page, perhaps to other 'main' pages. The logo/title is also useful for letting users see at a glance where they are; size can indicate the page's place in the hierarchy.

As I said earlier, your home page will have some special features. This is where a larger main logo might be, perhaps a choice between different versions of the site (text vs. graphics, framed vs. unframed, etc.) and perhaps a more detailed navigation system. Your home page should be like a front door or store front, user friendly and inviting. It is to introduce, entice, and provide a menu. Remember to hook the user early with the answer to their question, "What's in it for me?" Use the home page also to highlight news and announcements and provide a prominent mail-to capability.

Also plan for some special pages which are not just content pages, like guestbooks or interactive forms, resource pages w/outer links, order or contact pages. Although they may not follow the exact template you've set for your information pages, they should still carry through the 'look and feel' of the whole site to provide consistency. 'Links pages' that provide just links to other resources rather than original content should have the links grouped by subtopics with a menu or map of segments and navigational aids in each segment to get back to the top and menu.

Now you're ready to choose a structure for the site and create a 'storyboard' to design and manage it better. Stay tuned for Part II.