Strategies for Web Page Design

Getting Started

1. Make a simple page
2. Load it in a web browser
3. Make changes to the page
4. Reload the page and review your changes
5. Return to step 3

Basic HTML Tags

Other tags, most other tags, do need to be closed.

The general way to tell if a tag needs to be closed is by figuring out where you want the markup to end. In other words, you don't need to close the "strong" tag, used for boldface, if you want your entire document to be in boldface type.

The same thing would be true of the centering tag, "center".

Learning from others

Find a page you like.

"View" the html source and compare with what you see in the browser.

Complex pages or HTML: Save-as Source

Plug your own text into the code.

NOTE: Saving HTML source and using the tags and techniques for your own pages is a useful and legitimate way to learn the language and make pages. Downloading images may be a violation of copyright.

Making a "site" as opposed to making a page, is simply a process of building up pages and linking them in a rational fashion. One suggestion here is that you a site map showing the links between each document. This will help you think through the process of figuring out which documents should and do link to which others.

Technical Tips and Considerations

• Who is your audience?
  • What kind of equipment are they likely to be using?
  • What speed network connection will they be sitting behind?
• What people will come to your site to find?
  • Are you an information broker or provider?
  • Are you an advertiser?
  • Are you a teacher?

• Make it easy to navigate your site
  • Create an index.html page which is an index
    • Make your homepage as small as possible.
      1. The page will load more quickly.
      2. Your users find what they want more easily.
  • Have top-level pages for each topic
    • make separate sub-directories for sub-topics
    • make the top-level page for each sub-topic an "index.html" page.
  • Have second-level pages for each sub-topic
• Make it easy to get back to useful pages
  • Use the same button gifs or task bars for identical tasks on all pages.
  • Locate your controls in the same place on all pages.
  • Have your controls do the same things on all pages.
• Title your pages.

Control Issues: Programmer vs. Browser

• paragraphs
• tables
• lists
• images.

One of the most useful attributes of HTML is that it allows users to control much of the display by setting the browser preferences.

If you pick html tags and attributes that pass control to the user as much as possible, you will have widely readable pages, accessible to the widest range of client software packages and users.

A good test of your pages is to view them with as many different browsers as you can, and under as many different kinds of conditions as possible.

Given that many people on the net are surfing the web from either text-based browsers (like lynx) or behind slow modems, with graphics turned off, it is a good idea to take a look and find out what your site looks like with lynx or with a browser with graphics turned off.

HTML is not a:

• Page description language - like Postscript or Troff
• Page formatting language - like PageMaker or Quark Express

FRAMES

1. The window is already too small
2. The back button frequently doesn't work
3. Bookmarks mark the main page and not the one the viewer wants
4. If the viewer goes off your page to another one, the new page will load in the frame window - even if it's on another server.

FONTS

1. Do not specify fonts or typefaces in your documents.
   • problems with hi-res monitors and display postscript
   • problems with machines that don't have that typeface
2. Do not enlarge or reduce font sizes in your windows.
   • Use h1/h2/h3 for headlines
   • resist the urge to tell the user that you know better than they what size they should use to view your pages.

If you must exert this kind of control, buy Adobe Acrobat and make pdf documents. Do it right. Don't screw around trying to force the issue with HTML.

Finally, keep your HTML to a minimum. Instead of concentrating on how many tricks you can use, see how sparse you can make your code.

The more "tricks" you use, the more difficult it will be to insure that your site is visible to a wide range of browsers.

The more you try to control the layout of your page(s), the more difficult it will be to insure that your site is visible to a wide range of browsers.

Conclusion

The thing I like best about the web is that web pages are never cast in type or fixed on the page. They are open environments where it is always easy to make changes. This gives them an immediacy that is missing in books.

This quality unfortunately leads people to treat web documents a bit more lightly than they would otherwise.

Ah ... but that's another soapbox.

Other Resources

Useful Books
• Designing for the Web Jennifer Neiderst. (Good choice for beginning web programmers)
• HTML: The Definitive Guide, Chuck Musciano and Bill Kennedy. (The choice for more advanced web programmers)

Copyright © 1998, Bruce Jones

Back to BJ's Home Page