Implementing your design


Piece by piece

Go slowly. Start with one page and make an outline in HTML of what needs to be put in it. Let the content team worry about the precise information, the HTML team should worry about the page itself.

When Rich Barrette created this set of courses, he first created the topic list. Then he made each header, and put in the NAMEs of the different areas. Only after all of the headings and main links were in did he put in the content you are now reading. Every once in a while he would add something to the list, and take something away. Only at the very end did he split it into separate files.

Here is an example of how this page was developed.


Test it first

Make sure that other people try all of your links to make sure they are sound. If you are implementing something fancy like an imagemap (we will discuss them later), click everywhere, not just on the spots you think are right.

Get some people who have never surfed the web before to try your pages. If anyone can break them, they can and will. It is easy to mistype anchor URLs while writing your page.

Here is a trick that I use often, just before I roll out a new set of pages. These instructions are for Netscape 4.6, but similar capabilities exist in most modern browsers:

  1. From the Edit menu, choose "Preferences..."

  2. Choose the main Navigator section (not one of its sub-sections).

  3. In the History section, click expire now.

  4. Test your links one by one to make sure they all work.

Using the above trick, you will be able to see exactly which links work, and which ones you have tested. The visual cues (link color changes) make it very easy to verify all of the links in your pages.


Multi-platform Support

One of the biggest mistakes web developers make is looking at the pages on only one type of machine, and under one resolution. Remember that web browsers exist on just about every type of computer platform there is, and they are all a little bit different.

Make sure you view your page on a high-resolution display. Nothing will cause more giggles about your pages than formatting errors that would have been revealed by viewing them on a large screen. Images that line up just right on your 640x480 14-inch monitor will go all over the place on a 1280x1024 display. Unless you or a friend view your pages on a high resolution display, you won't be able to fix the errors, because you won't even know they exist.

Likewise, consider how your pages will appear on the small display area of a Palm Pilot or similar PDA.

Different displays will render color images differently. Often an image that has smooth gradations in color when viewed on a good monitor will appear striped or blotched on a more common display that is capable of fewer colors.

Be very aware of LYNX, and how your pages look when viewed through a text-only interface. Sometimes you may not care very much, but it is important to at least look at it under LYNX before you roll it out. I certainly do not advocate making major changes to your design because of small formatting discrepancies when viewed with a text-only web browser, but the information should be accessible. If you are going a highly graphical route, make sure there is a separate version for LYNX users. In a few years LYNX may be less important though, now that high-speed connections are more common, so don't let it limit your design too much.

Do be aware that LYNX or similar browsers will continue for years to come as the browser of choice for visually impaired people, because it is so much easier to automate audio output for text. The United States government has published guidelines on the application of the Americans with Disabilities Act ("ADA") to questions of Web site design, in order to ensure that all students have full access to on-line educational resources.

A more thorough discussion of these and other design issues is available on-line in Memo 85, Appendix VI, "Keeping Your Web Pages Robust."

Back   Topics   Next


Dick Piccard revised this file (http://www.ohiou.edu/pagemasters/class/html2/implement.html) on January 29, 2002.

Please E-mail any comments or suggestions to acatec@www.ohiou.edu.