Design Hints

Why a Philosophy?

HTML (HyperText Markup Language) is a very general language designed to place information on web pages. It is not a word processing or desktop publishing tool. The sooner you come to grips with this fact, the faster you will become an effective webmaster. Here's why:

• No two browsers show a page quite the same way.

• Even if everyone were to use the same browser, not everyone would have the same resolution as you.

• It really never was intended to be as specific as a word processor, and its fundamental structure reflects this.

• Nobody owns the web. Therefore, standards are rather difficult to enforce.

Design Considerations for an Imperfect World...

• Assume everyone has their screen set to 640x480 and 256 colors..
  This minor detail is very often overlooked by web authors.
  • If you want to go "wide", then make sure that what you consider the material of primary importance to your reader is located on the left side of the screen. At BNB, you will notice that the "Network Bar" is on the right side, not the left!

  • Causes text to be obscured by side margin artwork.

  • Forces the user to use the right-left scroll bar to read the text.

  • Banner and navigation art can be unrecognizable. Even worse scenarios are possible with background images.

  • Do use TABLES (now supported by almost all browsers) to create some white-space in your pages.

  • Use very basic color schemes and avoid noisy background images.

  • Always use ALT (image descriptions) with your images so that people with text browsers can use and understand your pages. Not doing this prevents a lot of students from enjoying your site.

• Nobody has their own personal T-1 connection to the web.
  Okay, so maybe you have one, but most people are using either 28.8K or 56(haha)K modems. As a rule of thumb, do not create pages that take more than 30 to 60 seconds to load at 28.8K. You can accomplish this by:
  • Using graphics sparingly, and using color reduction when possible.

  • Use Interlaced GIF images (89a standard) when possible. These provide a nice fade-in effect that allows people a sneak preview of your image as it comes into view.

  • If you do have a lot of images to present on one page, use thumbnails (small versions) and link the larger images to them. If the reader wants, they can then view the picture in its full glory!

  • Always indicate the HEIGHT and WIDTH of your images. Many browsers cannot display any part of the page until it knows all of the dimensions of the objects that the page consists of.

  • Not expecting your personal web space that came with your Internet service to be fast. It may seem fast to you because you are on the same server, but page requests coming from the outside may be served at a very low priority.

  • Do not include the http:// directive when linking to pages and images located on your server. This prevents most browsers from caching (storing data for reuse) and causes the information to be reloaded as your readers navigate around your site.

• Be Consistent
  
  • Reuse navigation icons and provide a consistent look and feel to your site. There is also nothing wrong with using the same buttons as everyone else. In fact this can make people more comfortable with your site.

  • Pick a color theme and stick to it. Changing color schemes every page is confusing. This applies to background colors as well as colors for text, links, etc...

  • Stick to your mission. Do not fill your site with stuff that does not matter.

  As an aid to becoming more consistent in your page layout, work out a set of page layouts that you feel work for your site. The examples below are the layouts or grids that I use at this site. The one on the left is the Home or usual point of entry screen. The one on the right is what I use for most of the other screens.

  

• Avoid Glitz and the Cutting Edge of Web Technology.
  
  • Use animation sparingly. An animation is a nice touch and a great way to draw somebody's attention to something you want to feature. There is however, nothing as annoying and distracting than a collection of flashing images all over the screen.

  • Keeping in mind that no two browsers handle things quite the same, avoid what are called browser specific tags. If the viewer's browser does not support the tag, the item will either be ignored, or displayed as plain text.

  • Java and VBscript are great, but, not all browsers support them. Provide an alternative means of viewing your information. Do not tell them to get a real browser or don't come back.

  • Do not use FRAMES for the sake of using them! Although you can use the NOFRAMES tag to allow non-frames browsers to view your pages, you must design your pages to work in that environment. Simplicity and clean design are the keys. Please take a look at The US Jaycees web site for a fine example of this.

• Use the Right Tools.
  There is no point in trying to hammer a nail with a chainsaw. Do not expect one program or another to be a Swiss Army Knife. See my tools page for what I have found to be a great collection of programs. I have tried (and am always trying new programs!) just about everything out there. Most packages are great at a few things, but I have yet to find the Nirvana HTML editor!
  
  • Do not use an HTML generator for anything other than converting large text files to HTML. I say this for two reasons: you will lose creative control over your site- and you will not learn anything.

  • Do use an HTML generator if your primary job is not in systems, and you do not have the time to really mess with this stuff. If you decide that you want to, you can always start doing things by hand.

  • Have more than one browser on your system. If nothing else, be sure that you view your work using both Netscape and Microsoft Internet Explorer. If you happen to have an AOL account (or have a friend that does) check it out on that as well.

  • If you have a 56K modem or better, also try to have a 28.8K one as well. This way you can experience your page at the same speed(s) that 90% of the world will. When timing page loads, be sure to clear your browser cache first!

  • A utility such as quickres that allows you to change your resolution and colors on the fly. This is very handy in designing pages that can be viewed by almost anyone.

  • A good book. Read some HTML and Web Design books. Find one you like and keep it close by. Even with my background I find it easier to lookup something I forgot in a book than to page through the web looking for it.

• Make sure you put your site where it belongs.
  
  • If you are placing your site on your personal webspace that came with your Internet service, make sure you are aware of any restrictions. These include:
    • Maximum number of page accesses per month.

    • Maximum number of bytes downloaded per month.

    • Restrictions on commercial messages. Some providers even consider naming your employer a violation that could cause you to be charged commercial rates!

    • Can you have CGI-BIN and Server Side Includes. If not, you cannot have a nice interactive website.
  • Consider a virtual host. This is what I used before the site got extremely busy. It ran about $30 a month and I had:
    • My own domain name.

    • Several different mailboxes.

    • 10GB of monthly bandwidth.

    • An unrestricted Unix environment.

    • The ability to provide FTP downloads to my audience.

    • Freedom from having to manage the server!

• SPELLING & GRAMMAR: I cannot stress the importance of proper spelling and grammar strongly enough.

• Never include an image in any page that you are calling from somebody else's site! It is very rude in that it steals bandwith from the owner of the image. This can cause them to incur charges as well as have their site slow down. Actually, the odds are it will be your page that suffers! If you must, just take a copy and put it on your server. Do give credit where credit is due.