Principles of Web Site Design

Introduction

In this document I describe the principles I follow when I design web pages and web sites. It’s a sparse document now, the result of an hour-long braind-dump one evening. I will be adding to it from time to time as I learn some new principle or become aware of some principle I’ve been using all along. It’s eventually going to be a lot of stuff …but if this were really easy, then everybody would be doing it.

Content is King

When it comes to web sites I design, in the never-ending duel between content and layout, content wins. Without the layout, the words may be weak; but without text, layout is worthless. The fundamental principle, to which I will be referring thoughout this page, is that Content is King.

Organization and Navigation

Once your web site has grown to any appreciable size, split it up into sections by subject and interlink the pages according to some intelligent scheme. A disorganized flood of notes is not very useful, nor does it make it easy to find some specific piece of infromation.

Your web site should have some logical system of interconnecting the pages. Unless you have a really good reason to do otherwise, try to stick to a heirarchical system of organization and avoid making the whole site resemble the Winchester Mystery House. A menu of choices in a consistent place int he web site is a very good idea; it provides a sort of base camp from which the web site visitor can explore the new territory of the site. But such a menu should itself be consistent: don't confuse your visitors by changing the menu’s links on each page.

Proper navigation means finding the right balance between what you want to tell your guests and what they want to see. If you're selling something, the first thing your web site guests—your customers—want to see is your products. I've seen web sites that require the visitor to plow through all sorts of irrelevant pages about the company's philosophy, its founding principles, the people who make the stuff, and so forth before the actual products can be seen. German web sites, for instance, generally want you to download some huge PDF file that contains their entire catalog. They don't seem to get it.

It’s not terribly useful to design the organizational scheme in the absence of material to organize. You may find that once you have a lot of material for your web site, it is best organized in some other scheme than you thought up to start wth. If that happens, go ahead and reorganize the site. Make it easy for visitors to find what they’re looking for.

Make useful 404 pages. Between people mistyping URLs that they should be copying and pasting and web indexes somehow recording bad URLs for pages in your web site, 404 errors do happen. You can keep those visitors by designing your 404 page so that it helps them find what they're looking for.

Monitor your 404 hits and adjust your .htaccess page appropriately. If another web page or web index provides a bad URL into your web site, you can correct that error with an entry in your .htaccess file. It's much easier to fix a bad URL this way than to try to get the webmaster to fix the link.

Layout

Content is more important to me than layout, but neither do I want to ignore the importance of layout. I strongly recommend Robin Williams’ books on the subject. Start with The Non-Designer’s Web Handbook. Miss Williams is an expert on the subject, and I defer to her expertise. Get her books. Read them.

When you use tables, keep in mind that not everybody is blessed with a 1600x1200 display. Make your table widths scalable. I hate web sites that force me to spread out my web browser to some specific width so the page looks good—especially when that is wider than my screen. The most common screen width may be 1024x768, but a significant number of web surfers still use 800x600. What marketing genius voluntarily ignores 15% of his market? Furthermore, 1200 pixels wide is not as easy to read as, say 500. Try narrowing your browser window to about a third or half your screen's width—I bet it will be easier to read. Ever wonder why newspapers and magazines break up the text into columns?

Frames use up an awful lot of space on the screen. I used to use them a lot for navigation bars, but once I learned how much better a page looks without those yucky scrollbars, I revamped all my web pages to use tables in single documents instead of frames. If you must use frames, at least don’t make me scroll sideways!

If you must use frames in your web site, then when you link to outside pages, use the target=new argument in the a href tag. It's not nice to pretend that someone else's web site is part of yours. If I find you doing that with my web site, I will retaliate by adding target=_top to my own links.

If you must use frames in your web site, make sure your visitor can’t end up in the situation where a frame contains itself. It’s annoying and looks really stupid.

Graphics

A picture is worth a thousand words. Appropriately used, graphics can make the difference between a dull, boring, and lifeless site and an interesting, engaging site—and between that and a cluttered mishmash of clashing and conflicting images.

Some of my web pages, such as this one, don’t have much in the way of illustrations. That’s because they don’t need it. Other pages, such as the web site I made for the Motorcycle Emergency Response Corps, benefit from a standardized layout facilitated by tables and a template. And still others, such as my web site about the legendary Spagthorpe Motorcycle Company, benefit hugely from illustrations.

Whenever I use illustrations, I follow some ismple rules…

Don’t steal other people’s images! If you must steal them, at least put them on your own server. I don't want to serve up my images for your web site. (I may even program my web server to do mean things when an image is requested not as part of an authorized web page. Your web page could show some very surprising things if you give me control of the images.)

Do your images merely serve the layout, or are they an integral part of the site? Remember, Content is King.

Templates

Dreamweaver has a pretty good facility for making and using templates. The feature is highly convenient and makes it easy to make site-wide or section-wide changes to a layout.

Index-Friendly

Forget word-of-mouth. Web indexes such as Yahoo and Google are how people will find your web site. It’s up to you to design your web site so that search engines can find and correctly index it. For instance, Google traverses tables left to right, top down. Set up your text layouts so that the bits of text that Google and other search engines display for a page are from the content and not the navigation sections of the page. Content is King, and you’ve got to make it possible for people to find it.

Sometimes index-hostility is appropriate. If you move or rename a directory and remap with the the .htaccess file, then web crawlers still still see the old URLs. Discourage them with appropriate entries in the robots.txt. file.

Colors

For the main text, try to stick with a dark neutral color of text on a bright neutral color background.

Red and green may be opposite colors, but it’s actually very difficult to read text of one color on a background of the other. Worse yet, people who wear glasses—espially ones made from Coke bottle bottoms—get wild chromatic abberation effects if they don’t point their heads precisely straight at the monitor. Ten percent of the male population is red/green color-blind. These men would find this text even more difficult to read.

Use your color scheme in titles and illustrations, but keep your text easy to read. Remember: Content is King.

Identification

Somewhere on your web site, easily reachable by visitors (not in the bottom drawer of a filing cabinet in an unused room in the basement with a sign on the door reading “Beware of the Leopard”), you should provide information about the web site: when it was made, who made it, who owns the copyright, and how to get in touch with the webmaster.

End Construction!

If you’re building a house, skyscraper, or freeway, the signs of construction are unmistakable. There are barriers all over the place that keep you from getting in. On the Web, however, there’s no excuse for a link that leads to a page that’s “under construction.” Just don’t provide he link in the first place. There are web sites whose lazy owners haven’t built certain promised sections in years—and probably never will. In the mean time, thousands of visitors drop in, get frustrated, and leave.

Many web sites are continually being updated, mine included. I have specific as well as hazy plans for expanding my web sites, but I never insult my guests by promising something I know I can’t deliver yet. Content is King. Sell what's available today. End construction.

Type

I defer to the expertise of Robin Williams, who covers the subject thoroughly in Your Mac is Not a Typewriter and in The Non-Designer’s Web Handbook.

Don’t choose font sizes that are too small to read. What’s the point of that, anyway?

Links Pages

I did not visit your web site just to see your list of favorite links. Yes, it is cool that web sites refer to each other through hyperlinks, but remember that Content is King. It’s perfectly reasonable to publish a book that has no bibliography, but what idiot would publish a bibliogaphy without a book? Unless your web site actually contains something, you might as well not have it. If you are publishing a bibliography or a search engine, then be Google or Yahoo.

If you do need a links page, chances are someone else has already put one together for that topic. You might as well link to that page … and let the author know. Who knows; he may link back to your page and increase your traffic.

One useful kind of links page is the Site Map, which lists every page on the web site and shows their relationship to one another. I like to put a link to the sie map on the 404-error page. That way, if someone enters a wrong URL, or follows a link to a page I moved ot deleted, he has a chance of finding what he was looking for.

Compatibility

“Anyone who slaps a ‘this page is best viewed with Browser X’ label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network.” —Tim Berners-Lee (creator of the Web)


Principles of Web Site Design. Revised July 8, 2003.
Copyright © 2002, 2003 by Michael Roeder. All Rights Reserved.
URL: http://www.sonic.net/~mroeder/sitedesign.html
Home Page: http://www.sonic.net/~mroeder/index.html