03/15/2004 Archived Entry: "Web design for absolute beginners - 20 rules to live by"
This started out as a response to an evolt email. But lots of people wrote in and said similar things - so I decided to put it here instead. These points are by no means original, but it's amazing how many web sites - even professionally designed web sites - have these problems.
- Please, please, please, get rid of all the animated gifs. They aren't cool.
- Don't put text over a patterned background. Especially one with rainbows or stars.
- Find a single colour scheme and stick to it.
- Get rid of all the bells and whistles and concentrate on the information that the user wants. I know it's fun to try out new whizzy things... but until you have everything else perfect you are wasting your time by inserting redirects, IP sniffers, counters, form-button page-turners and all the other things... besides, to be frank, most professionals don't use them and they make a site look amateurish.
- Put a quick 20 word blurb explaining what your Web site is about on the home page. Just because you have heard of Acme, doesn't mean everyone in the world knows about its great motor oil products. I have seen so many Web sites that look interesting, but since I have no idea what they are for, I move on.
- Avoid using pop-up pages unless it's absolutely necessary
- Use a consistent layout on all the pages. Keep the navigation in the same place on all the pages. Don't have navigation items popping in and out, appearing and disappearing on different pages, or moving around the window.
- Use short, descriptive page titles and navigation links. For example, if the whole site is about Acme Motor Oil, then your navigation could say "About" instead of "About Acme Motor Oil". You should also use titles that make sense to your customers not the company.
- Ensure that related items are visually closer to each other than to other items. For example, sometimes photos have captions that aren't close enough to the photo they describe - they're just as close to the next photo so it's hard to visually tell which photo they are describing.
- Do yourself up a site map. Even if you don't put it on the site, it'll be helpful for you to figure out the hierarchy of your site. Make the navigation reflect that hierarchy. Don't mix different navigation levels. Have different navigation levels that are clearly marked, otherwise, your navigation can get very confusing. Look carefully at how other sites do it if you have trouble figuring out how to place each page in the navigation hierarchy.
- Main navigation should always link to HTML pages - not to PDFs or other types of files. So if you have an important PDF you should link to an HTML page and then have an explanation for the "How to Change Your Motor Oil" PDF. Something like..."Changing your oil requires following a simple set of procedures. To ensure that you change your oil properly, please download and follow the instructions in our How to Change Your Oil Instruction Booklet" and then have it link to the PDF. Best of all, just make a How to Change your Oil Instruction Page in HTML. If you really want a PDF link to it from the actual page.
- Don't make your headlines the exact same colour as your link text. And for goodness sake, don't underline them. Your link text colour should be different than any other colour on your site - even if it's only that your headlines are a few shades different (dark blue instead of bright blue). If it's the same colour as the links, people think it's clickable and get frustrated when it isn't.
- Keep all of your text completely consistent in colour, size and boldness. All headlines should be the same. All body text should be the same - including links, lists, etc. etc.. All captions should be the same.
- Change in text size is a huge visual difference that should be used sparingly. As a rule, only headlines should increase in size and only "small print" or photo captions should decrease in size from the regular body text. Really you should only need 3 maybe 4 different sizes - large headline, sub-headline (if necessary), body text and small print.
- Don't centre align your text unless you are designing a wedding invitation or something similar. Centre aligned text is harder to read because your eye has to figure out where each line starts. It also tends to be more formal in character.
- Make sure all your link text can be read out of context and still describes what the link is to ("click here" isn't good enough). This is partially because screen readers have a function that allows the reader just to read all the links on the page and without any context. If you've got a ton of "click heres" then the person won't know what to click on... and really its the same for a sighted user that visually skims the page looking at links. Search engines also use link text to rank your page. So make the text meaningful.
- Validate your pages. Make sure your underlying code is sound. It will help you to figure out bugs and layout troubles.
- Don't stretch your images with HTML img width and height. Make sure they are clear and properly anti-aliased at all times.
- Have a separate "Contact Us" page with all your contact info on it. Get rid of the "Info Request" page or the "Contact Us" form - people don't like filling out forms if they just want to call you up to ask about something. I may just want to call someone at the company - not formally request information. Even if you have contact info at the bottom of every page, it's a good idea to have a separate page, because I may not have scrolled down to the bottom of the page to find the tiny-print phone numbers there. You might also want to put a map to the head offices if you get lots of customers visiting for meetings or whatever - saves employees from having to describe how to get there.
- Don't break the rules until you fully understand them. Until you breathe and live them. I do. That's why I'm allowed to break the rules. So there ;-P
