Web site essentials

TrilobiteWhat are the elements to consider when designing web sites? Here are my ideas... by Ian Chadwick, Ordovician Webworks.

There are six basic elements every web designer should consider. These should be foremost in the designer's mind as he or she starts to work. All six meld together in a gestalt that determines if a web site works successfully or not:

  • Content

  • Accessibility

  • Navigation

  • Layout

  • Interaction

  • Maintenance

Content: Is there enough here to satisfy the users, to keep them here, or to bring them back? After they tire of the special effects, will users find what's left on the site useful?

Are you providing information or just data? Information means data presented in some useful format. For example, a list of stars in a segment of sky is data. A list of stars in constellations is information. A list of town streets is data. A map is information.

The strength of the web lies in its ability to make content available to a large audience. Small interest groups, hobbyists, clubs or simply people with specialized professions or interests find common ground in the web. Here they can form larger communities to share information and resources, discoveries, exchange ideas and debate issues, to present source and reference material. They need platforms with content to satisfy their needs; content is the core for web users. All else is simply chrome.

A caveat: the web is also a vehicle for perpetuating bad content. The web is rife with urban myths and hoaxes. A good example is the myth that the "rule of thumb" saying springs from an old English law that allowed a husband to beat his wife with a stick no larger than his thumb. This has been debunked numerous times, but like other myths, it is persistent. It gets repeated and picked up by other sites, beguiling less critical or gullible readers into believing that, if it is repeated so often, it must be true. It isn't. This is the information equivalent of a virus. Don't spread it, or other items like it. It discredits the site and its author. Do your research first: make sure what you post is to the best of your ability authentic and accurate.

Content is not always textual. Graphics, images, maps and other visual elements may convey more than text alone, or enhance text. Graphics should be chosen to provide the maximum meaning, or to enhance content. Gratuitous images only slow page loading and don't contribute to base content.

Accessibility: Information alone is not sufficient. It needs to be presented in ways the user can get at it easily and quickly, ways that make it understandable.

The output must logically answer the user's needs or questions. For example, listing every business in a town alphabetically is inadequate for users who don't know the name of a particular business, but know the type of business they need (shoes, hardware, computer store, photocopies, etc.). A listing by category is more effective in presenting this kind of information. Simply naming hotels is not information to users looking for specific services or types of accommodation. Information presentation must be tailored for the site's goals.

Another common error is presenting information or data in awkward segments. For example, presenting only six listings at a time from a list of 200-300 makes it difficult for the user to see enough content, and to navigate to the information he or she needs. Must he or she page through the list, six listings at a time, to get to the middle or end of the list? How can a user get to the content they need?

The other error is presenting too much information at once. Three to five hundred names on a single page can overwhelm the user. Very long web pages of information are as inefficient as, but more cumbersome than, very short lists.

Navigation: Users should be able to move within a web site or sub-site easily and efficiently. There should be visible, well-identified links to top, adjacent pages, key pages and so on. Without adequate navigation, users may flounder trying to find other sections or pages. Don't depend on the user swiping his or her mouse over a page to find links. Identify them.

Remember that many users will come to a site through a search engine, and arrive mid-site, not necessarily at the front or top page. They will not always be able to discern how to get around the site from the URL: they need navigational directions. Back and Next icons are not sufficient tools unless you explain where back and next lead.

Users should also be able to easily navigate through information lists and data.

Sometimes you have to design navigation within a page: let users move to top and bottom with a single click, or to key elements on the page. This is especially important for long pages.

Frames are excellent tools for providing convenient site navigation. Links can be placed in a frame where users will always have access to them. Because a user may enter a site at a page other than the frame(s) definition page, there should be navigation links to that frame index page on every other page.

Site maps are sometimes useful guides for large, complex layouts.

Layout: The computer screen puts limits on layout. Users see only the top part of a page when they first load it, so designers need to have important information and links at the top. Many users have 14-15 inch screens, and work at 640 x 480 resolution. They may lose content from the right hand side of a wide page. Many printers will also truncate the right edge if the content is crowded by graphics and frames.

But layout is more than physical display. How and where content is presented is important. Poorly designed data or information output such as the results of a search or clumped data in a large list lower the user's ability to access the content. Make easy to read and find. Tiny type may look fine on a high-resolution, large-screen monitor, but for users with standard, low-res screens, it is difficult to read - especially difficult for users with less than perfect eyesight. Use appropriately contrasting colours to make text readable. Artistic preferences aside, a web site that can't be read because of colour combinations or brightness levels serves only the designer, not the users.

Large graphics, animations, scripts, music and other special effects can slow load times. Large images may be necessary, but it's better to present them as thumbnails, and let the user decide whether to click to see the full size. Automatic music may be the worst offender online: never force users to listen to music, always make it their choice. Don't clog bandwidth with unnecessary material.

Interaction: The web is an active platform, not simply passive like TV. It offers the dimension of interaction, something unavailable in most other media (ever try to get a response from a magazine or book publisher?). Better sites provide a means for users to respond, to comment, to exchange ideas or make corrections. Feedback forms and guest books provide more opportunity to comment - but are most valuable if the results are posted back onto the site for other users to see. Not every site is suited to guestbook format, of course, but reader comments should always be allowed and made easy to present. At the very least, every web site should have easily identified email links to the site's authors and/or web master.

Any site that doesn't have accessible contact information (or forces Internet users back to mail or phone) is working against the web. It's working against the users, too, because it disallows their ability to connect online.

Maintenance: Web sites are not static. They are organic forms that need to be revised, pruned, updated and edited constantly. Navigation has to be correct, web links tested and verified. Content must be updated to remain current; news ages rapidly into history. Web sites can't be left to gather dust.

Sites should be designed with maintenance in mind. Page templates, common graphic elements and style sheets make maintenance and adding pages easier. It also helps the site's overall image to have a consistency of layout and design. Putting common elements together in tables also makes it easier to maintain. For example, putting links in a table at the top or bottom of a page makes it easy to change the links section on all pages by copying and pasting the revised table over the older one.

The difficulty most web masters face is that the Net is a constantly shifting, organic entity. Very little is static and it's often hard to impossible to keep up with it all. Sites change, hosts change, pages come and go, moving and evolving. What we really need is a dynamic link manager to do it for us.

Click here to download a PDF colour chart of the named HTML colours, or click here for a Corel Draw version (V12), and here for a Corel Draw palette file.

Top of page.

The HTML Writer's GuildThe author is a member of the
HTML Writers' Guild.

Post your comments, share opinions and ask questions on the Mumpsimous FORUM.

Looking very pompous and proper.Email me at ichadwick@rogers.com if you want to add your two cents' worth or to just comment. Check back again. Last updated March 20, 2005.

Click here to go back to my home page. Click here to go to my site about Ordovician Webworks.