DOs and DON'Ts - Layout's and Design

DOs and DON'Ts to consider in laying out and designing your web pages.

The previous article asked you to define a clear purpose for your web site. You need to consider that in your page design, too. You also need a clear idea of who you are targetting your pages for. Is your site of value to everyone on the nets, or are you really designing for a more limited group? Are you designing for those who are very web savvy, have fast connections, and have the latest equipment, or do you want to reach beginners, those with slow dial-up modems, and those with old equipment and software, too? Do you want to reach the visually impaired? Do you want to reach those who use text-only browsers like Lynx, and never view your graphics? Keep those considerations in the front of your mind as you design your pages. Don't shut out a major part of your target audience!

Your decisions on your target audience can have a major impact on your design. If you are writing for a very limited audience, for example, only those with the latest equipment and software, you can use features you would avoid otherwise. But if you want to be accessible to all, here are some things to consider:

• Graphics: Make your graphics as small in filesize and as fast loading as you can. Then your page is accessible to those with slow modems. See the articles How to Create Small, Fast Loading Graphics for Web Pages and How to Lose Your Web Viewers for a lot more help with this. Use graphics for a purpose. Graphics should inform, help understanding and navigation, entertain, or attract attention. But don't use graphics just for the sake of using graphics. Use them for a purpose, and always realize that they are the slowest loading part of your page. ALWAYS use height and width tags with a graphic, since it speeds loading of the page. The rules for the use of graphics on the web are very different from those for print media!

• Image maps: Avoid image maps--or at least provide parallel menu selections. If you use an image map without a parallel menu, those who cannot see the graphics are stuck and can proceed no further.

• Java and JavaScript: Think long and hard before using Java and JavaScript or provide alternatives. Otherwise only those with the latest browsers will be able to make use of them. There are many differences in implementation of Java and JavaScript between Netscape and Microsoft Internet Explorer (MSIE) and their different versions. If you do use them, test them with both browsers, and think about how users whose browsers do not support them will be limited. Provide alternatives. If you have time to write both a Java and a non-Java version of your pages, provide both. With appropriate software, you can detect what browser a person is using and automatically route them to the right version of your page--if you have the time and know-how to do it.

• Plug-ins: Think twice before using anything that requires plug-ins, such as ShockWave or QuickTime video. Sure, you can use them, if it just a side feature, not a vital part of your content. Most people will not have the plug-ins and will not take the time to download them. Be careful you don't turn off the people who do not have them.

• Browser unique features: Don't use features that are only supported by one browser unless you can create an equivalent method for other browsers. Before the version 4.0 browsers, if you wanted to automatically play a sound file, you had to use the EMBED tag for Netscape and the BGSOUND tag for MSIE. That problem has been solved except for those with older browsers, but new problems develop with each new version of the browsers. As mentioned above, compatibility between versions of Java and JavaScript for the two major browsers is not very good.

• Frames: Think very carefully before using frames. There are still a lot of older browsers around which do not support them. The contents of frames are usually not indexed by search engines, too. Provide alternatives, if you can. The major advantage of frames is in keeping navigation menus in sight at all times. A good alternative to frames is to keep your pages short and provide for navigation at both top and bottom of the page.


Think about where people may want to go from your pages, and provide links or buttons or menus to those places. Make it as easy as possible to navigate. Not everyone has mastered the Back function of their browser. Make it easy for them. Some people don't like to scroll pages, so keep your pages short. It is better to have several consecutive pages than one long one. If a page has to be scrolled, consider navigation links at both top and bottom of the page. Be consistent in your buttons or links. Don't change them from page to page without reason. It is much easier to use if it is consistent. For a feature like this, which is broken into multiple pages, start with a table of contents.

Some "features" of web pages are more annoying than they are useful. Here are some of them:

• Blinking text: One of the most annoying things you can put on a page is blinking text. Sure, it attracts attention--at first! But after a few repetitions, it is an annoying distraction. I have only seen one legitimate use of the blink function. It was consisted of a single letter blinking to call attention to an error in a complex string that someone else had originally typed. Even then, bolding the character would probably have been better.

• Scrolling text: I find scrolling text, created with MSIE's MARQUEE tag or with JavaScript particularly annoying, too. It never scrolls at my reading speed, and if it overwrites the status bar at the bottom of the browser screen, it robs me of information I expect always to be there.

• Overuse of animated GIFs: Animated GIFs are another "feature" that helps attract attention. Sometimes they are clever, but more often than not, they rapidly become annoying. They are used very frequently in banner ads to make sure you look at the ads. Some pages will have three or four animated GIFs, all competing for your attention. If you create them, set them to repeat three or four times and then stop. It is much kinder to your readers! If you are an advertiser, think how much good will you can earn if your ad stops repeating after people first see it.

When you have a lot of text on a page, never let the text flow to the full width of the page. It is much harder to read text that runs from edge to edge than text that is limited to a fixed width column. After the first few lines, it is hard to pick out the right line to return your eye to on the left after you read way over to the right, and it slows down reading and comprehension speeds. A lot of people dislike reading onscreen, and this is one of the main reasons for it. But it is easy to control column width with tables, and almost all browsers support this use of tables. Try for a maximum width for text of 400 pixels (50 or 60 characters with typical fonts), and less is better. This column is 350 pixels. View your pages and judge for yourself how readable they are. For some types of pages, consider using two columns of text if text is the main content on the page.
Another consideration is to avoid using very small print just to pack a lot of material onto a screen. There are lots of people who cannot read fine print at all, and why annoy them! It is better to break your page into mulitple screens, if necessary.


Hypertext and hypermedia give you very powerful educational tools to help people who don't understand things on your pages without boring those who do. Write first for clarity and second for the more knowledgable viewers. Then review the vocabulary and technical concepts for things that some will not understand. Link to definitions and explanations where you see the need. There are a number of links in this article that do just that. For example, click on "Hypertext and hypermedia" at the top of this paragraph.
Another thing to consider is putting either a link to a message base or a reply form for feedback from readers. Their ideas and questions inevitably help you improve your pages. Much of the Internet Glossary here was developed from readers' comments and questions. No one knows better where your pages can benefit from improvement than your readers! See the next page.
If you are serious about your web pages, get both MSIE and Netscape on your system and view all your pages with both of them. If you are using Java or JavaScript, be sure to test all its uses with both browsers, too. Then test the pages with several of these services:

• Web Site Garage: Enter any URL for an evaluation. In addition to an HTML check, it looks for dead links, number of links to the page from elsewhere, spelling, and load times.

• W3C HTML Validation Service: A new service from the HTML standards organization.

• Bobby: One of the best validators to check that your page is accessible to all.

• HTML Validator, the same validator which is used with the excellent HomeSite HTML Editor. Also known as CSE 3310 HTML Validator.

• Lynx – me, This page shows you how a text-only Lynx browser user sees your page. This is important if you want your page to be useful to text-only users.