Web Design Guidelines
 
Site Design    Page Design    Browsers/Platforms    Text    Graphics    Sound

If you've ever surfed the Internet, you probably ran into pages that take forever to load, have you scrolling in all directions, or maybe they were hard to read due to crowded information, mismatched colored text and backgrounds, and distracting flashing images.  How often was it the case that you just couldn't find the information you were looking for, and found yourself following links in circles?   These are the kinds of things that make web site visitors leave quickly, and the kinds of things to avoid in all web site designs.

The following information is provided simply to help you understand what is focused on and what is avoided when creating any web site.

Site Design Considerations

The most important consideration in site design is to make sure the visitor doesn't leave before they get the message you are trying to convey.  To do this involves providing an easy to follow and accurate navigation system.  Links within the site need to be clearly presented, and access to all major pages should be possible between them.  For sub pages, it is good to provide access to the major page that brought you there, as well as the home page of the site (as a minimum).

When it comes to linking outside of your site, there are different opinions.  To maintain visitor accessibility, an external site can be presented in a new window in order that the original site remain when the visitor closes the linked site.  Some people find it aggravating that they have to close another window if they are done, but if they desired to return to your site and had to search for it again, they might give up.  The decision lies in who to serve when--those that want to return, or those that want to leave (the answer is not fixed).

This leads to another very important factor for web design... give the visitor all the information they might be looking for.  The reason for this should be obvious.  If visitors can't find what they need to find, they won't be around long and probably won't be back.  If you sell products or services, provide all the data that a customer will need to make a decision.  And provide a means for them to ask questions, either via email or through a form.  Be sure that any inquiries are handled without delay.  Internet users have a low tolerance for waiting for most anything to do with on-line interaction, and meaningful communication is usually the biggest offender because it usually requires human interaction.

Page Design

No offense is intended when saying that page design should follow the KISS principle.  A good site design won't try to clutter all the information into a single page.  It is better to keep page information within a topic, and provide clear access to other topics via menu selections or other linking means.  White space plays an important role in making a page easy to read and locating information.

Color schemes.  If your are trying to present text information, dark on light works the best, specifically black on white, but shades of colors near these extremes work equally well.  If you find yourself squinting to read a page, something is wrong, and it probably has to do with color schemes.  The use of bold and/or dark colors for backgrounds is not ruled out, but this type of design needs careful handling in the way of making things readable and avoiding color clashing.

A business site should avoid the use of web gimmicks simply for the sake that they can be done or are interesting to look at.  Things like flashing text/images, animations that have no relation to the subject, or flashy page effects don't buy much in terms of winning customers.  It's just more waiting time or distraction.  A business site simply doesn't need to impress people with page effects (maybe just a little to catch their attention).  A business will do better to focus on impressing people with their products and services.  Entertainment-based sites are the better place for the flashy things.

Accommodating variable monitor settings is another factor that should be considered when designing a web page.  Computer users have different preferences when it comes to what they set their monitor to.  The two most common monitor settings are 640 x 480 and 800 x 600 (pixels), but with larger monitors coming into their own now, larger settings are becoming common as well.  As a practice, it is best to aim for the smaller targets, and if possible, design the page so that it either adjusts automatically to a large setting, or simply fits the larger page design well.  Many sites are currently adopting the 800 x 600 setting as a fixed size, and it does fit well with the larger monitor settings.  There are choices available, and the level of effort (cost to the customer) is driven by which way one chooses to go.

One definite no-no in web site design is the horizontal scroll that results from designing for the wrong monitor setting.  They are a nuisance, and any site the has them needs some work (unless it is a data presentation that requires an extended horizontal sizing).  Most web visitors are willing to work the vertical scroll bars to read a page, but to have to bounce back and forth will quickly send them away in search of easier reading.

Browsers/Platforms

Ever hear of the "browser war"?  It's real, and the ones who suffer most from it are those who have to design to satisfy both of them (Internet Explorer vs. Netscape).  Neither of the companies that created them seem to understand that they should talk the same language and handle everything the same.  IE seems to be provide more dynamic features, and currently has the larger share of the market.  From what I can tell, that won't be changing in the near future.

Then there's the platform side of things.  PC's and Macs don't play by the same rules, and special coding needs to be used at times in order to insure that both platforms present things as expected.

Text

Most web pages utilize a limited set of fonts (character styles), and for a good reason.  Not all computers share the same fonts.  The ones that are most common are Arial (this page) and Times New Roman.  Helvetica and Verdana are two others that are often utilized (the Mac versions ).  Beyond these few fonts, a designer may be taking a chance that the page will not appear as intended.

As far as which is preferred, a sans serif style such as Arial is easier to read.  This is simply because the serif fonts carry little extensions that can cause characters to blend together visually.

It is possible to embed fonts in a site, such that they are presented independent of the visitors stock of fonts.  The only drawback here is that Internet Explorer is the only browser that currently supports this capability (they invented it, so it's understandable).  The best bet is to stick to the basics, and if a special font is needed, create an image of it.  That way it's guaranteed to appear as intended, it's just limited by how much memory such an image might take up.  This leads to the topic of web graphics.

Graphics

Images are usually what makes or breaks the success of a web site when it comes to the time it takes for a page to load.  There are a number of ways to deal with images to help make them load quickly.

The most significant way to make images load quickly is to reduce the image file size.  There are a couple of ways that this can be done. 

Image optimization is a process of reducing the image file size by reducing the number of colors the image uses.  Colors that are reasonably close in value are changed to the same color.  This process alone can provide more than %50 size reduction with little impact on the visual quality of the image.

Another way to reduce image file size is to change the dimensions of the image.  Some images really don't carry that much weight in a presentation, so whenever possible, such images can be made smaller without degrading the message of the page.  Some images may require that great detail is visible.  In these instances it can be helpful to provide a thumbnail version of the image that is linked to a page containing the full sized version.  In this way, only those visitors that have interest in seeing the image will have to wait for it to load, and they are more likely to be patient waiting for it.

Another way to help images load quickly is to use Javascript to preload images for the site.  What this does is load all the images specified before the page is fully loaded.  This is very helpful when a page utilizes image flipping.  If the images weren't preloaded, then the image change would be delayed until the image is loaded for the first time.

Breaking large images into pieces and using tables to piece them together is another means of getting images to load faster.

Sound

Sound can be included in a web site either as background for the site, for a page, or to coincide with an event such as a mouse click.  There are efficient and inefficient ways of incorporating sound.  The most efficient is to have streaming audio content.  Streaming audio is a load as you go process, such that the sound begins playing shortly after loading begins, and continues loading ahead of demand to maintain a continuous flow.  In any case, streaming sound is not reliable across the board when it comes to visitor variations. Often the user must have the appropriate plug-in for playing music. And there are certain types of sound files that are best suited for use with streaming audio.

It would be unlikely to recommend using any sound on a business site as it stands.  If your interest lies in selling music, then it's likely critical to insure you can handle user variations, but if you're business lies elsewhere, there is little logic in trying to turn your visitor's attention away from your products or services. Another thing to realize with any audio file is that if it's musical in nature, it's most often copyright protected material.

This page  ©  Copyright  2001,  NedWebs