WebWoman's Tips for Good Web Design

Here's a list of things that I think you should and shouldn't do when you're designing and creating your web site. I'm sure I've forgotten something, so you'll want to check back later for additions.

1. Content is King! - Give them a reason to come back. Tailor your information to speak to the interests of your audience.
2. Be Unique - What makes your site different? Identify these elements and use them to make your site stand out from the crowd.
3. Update your site frequently - The Web is a dynamic medium, so keep your site's info fresh. Give viewers a reason to keep coming back, for more!
4. Organize and Plan - Storyboard your website before you start to code.
5. Accessibility - Consider your audience and the equipment and software they may be using. Stick to the HTML specifications that will let you reach that audience.
6. Background Images - Don't choose background images that are busy or have high contrast designs. Text on a busy background is unreadable. What's the point of putting up text to be read if it's unreadable?
7. Background Images and Background Colors - If you're going to use a background image, set the background color to something similar, and also set the text, link, and visited link colors. You never know what the user has his or her default colors set to. Maybe the user likes black text on a white background. If so, then your white text, that you plan to display on a black starfield, won't show up until the background image has completely loaded unless you also set your background color to black.
8. Color- Stick to browser-safe colors whenever possible. At the very least, use browser-safe colors for background, text, link, visited link, and active link colors.
9. Background and Text Colors - Choose background and text colors that have high contrast. Black text on a white background is the easiest to read. If the web page is to be used as an overhead presentation, dark backgrounds and light text work best, especially blue backgrounds and yellow text. On a monitor, the opposite is true.
10. Whitespace in Anchors - Watch spaces around anchor contents. Example: <A HREF="home.html">My Home Page </A> will display with a trailing underscore if the viewer has link underlining turned on. Instead write it this way: <A HREF="home.html">My Home Page</A>. This is also true of images used as links. Weird little lines will appear before and/or after the image.
11. Image Borders - Turn borders off on Transparent GIFs that are used as anchors.
12. Anchors and Images - If you use an image next to clickable text, make the image a link, too. The reverse is also true.
13. Anchors - If you use text next to a clickable image, make the text a link, too.
14. Whitespace in Table Cells - Watch white space in table cells, especially when placing an image within a TD or TH element so that the picture appears to have a frame. Extra spaces before or after the IMG element can cause unwanted side effects. To make the frame hug the image write your code like this: <TD><IMG SRC="mypic.gif"></TD> not like this: <TD> <IMG SRC="mypic.gif"> </TD>
15. URLs and Slashes - Always use a slash at the end of a hypertext reference that does not reference a specific filename. For instance: http://www.microsoft.com/ . The slash tells the web server to look for a file with the server's default file name or if one is not available and directory browsing is turned on in that directory to display a directory listing. Without the slash the server has to try to figure out what you want, which delays finding and loading the page.
16. Spelling & Grammer - Check your spelling and grammer. Online consumers tend to be more educated and more critical, than the average consumer. Yu dont wannt two loock leyek a dumby. :-)
17. Images - Cut the clip art clutter. A picture can be worth a thousand words, but you don't want to hit your users with millions all at once! Use clip art in moderation and with purpose.
18. Icons - Ever been to a site where the navigation is a series of iconized buttons, but you haven't a clue what they're supposed to mean? If you really feel the need to provide an image as a link, at least be kind enough to include some descriptive text, too. Not everyone will instantly know that you intended that smiley face to convey that clicking on it will get information about you.
19. Animated GIFs - Keep them to a minimum. All those blinking and moving things attack the user's peripheral vision and beg for attention. That's why animated banner ads are so annoying popular. Too much, and the reader won't be able to focus on the text you really want them to read. The same goes for blinking text and sliding marquees.
20. Just because you can, doesn't mean you should. - Don't go overboard with high tech tricks.
21. CAPS - Don't type in all caps. IT'S CONSIDERED SHOUTING!
22. Font Faces - Avoid using them. If you must, always provide a general font option, such as serif or sanserif, as a final choice. You never know what fonts the user has on his or her machine. Try to stick to the basics fonts that load with Macintosh and Windows operating systems.
23. Type Faces - Limit the number of type faces that you use in a document. Don't use more than 3 to 5 different type faces on one page.
24. Filenames - Don't use spaces in filenames. Instead of naming a picture My Picture.gif, name it MyPicture.gif.
25. Filenames - Some web servers are case-sensitive about filenames. Make sure your code matches the case of the actual filename exactly.
26. Horizontal Rules - Don't overdo horizontal rules and bars. They serve a purpose, to break up content. Overdone and your page loses all flow.
27. IMG HEIGHT and WIDTH - Specify HEIGHT and WIDTH for all IMG elements. Your page will seem to load faster. The browser can then set aside space for the images and start displaying the text. Without HEIGHT and WIDTH specified, the browser has to wait 'til the images have fully transferred before it can display the text.
28. IMG ALT - Provide ALTernative text for all images, especially those used for navigation. For bullets, use ALT="*" to simulate a bullet. For bars, use ALT="------------------" or ALT="". For non-essential images, use ALT="". Note: if an image is not essential, you may want to reconsider using it.
29. File Sizes - Keep image file sizes small. A good target in terms of total web page size, including all inline images, is 20K.
30. Sign Your Work - Provide an address block with your name, email address, etc.
31. Indicate Status - Indicate the status of your work. Provide the date of the last update.
32. Titles - Title your pages. Use a title that is not context specific. For example, don't title a contact page "Contact Us". When a visitor bookmarks it, she won't have a clue whose contact info she bookmarked because the bookmark name will be "Contact Us" by default. Instead, title it "yourSiteName- Contact Us" (replace yourSiteName with your web site's name. Don't forget to give frameset documents titles, too.
33. Scrolling - Try to keep scrolling to a minimum. Note: To scroll or not to scroll is a continual debate among web designers. Still, it's a good idea to keep scrolling to a minimum in consideration of your reader and file size. At the very least, make certain that the most important information on your home page is "above the fold" so to speak. That is, make sure it is visible in the first screenful, before scrolling.
34. Be consistent - Keep your navigation scheme consistent throughout your pages, same style, same placement, etc. Keep your color scheme consistent. Users should be able to tell that they're still on the same web site.
35. Imagemaps - If you use an imagemap, provide a text alternatives (alt attributes).
36. Transparent GIFs - Only use one transparent color. Some graphics editing programs like PhotoShop will let you indicate more than one color to display as transparent. However, most browsers only support one transparent color.
37. Test, test and test again!
38. Test - with various browsers.
39. Test - on different platforms.
40. Test - all your links; both internal and external hyperlinks.
41. Test - look for broken images.
42. Test Again - after you upload.
43. Build the site and they will come. NOT! - SUBMIT IT to all the popular search engines.

Copyright © 1998-2000 by Tina McDuffie