Web site Design Objectives

A web site design is affected by many considerations. The content to be displayed, the way the page is to be served, how the page will be viewed, what display and computer, what operating system and what application, and finally, if the content if dynamic. All of these things will conspire to make the designer's job more difficult.

The Sands Mechanical Museum was designed and re-designed over many years. Some of the design was done to make the content more appealing. Some of the designs were done as an exercise to learn and keep up with new technologies. Some was even done in a mistaken attempt to improve our rankings with the search engines. Many of these considerations result in design considerations that are in conflict with each other! Here are some of the design considerations and the reasons behind them.

Some of the information below is technical. Please feel free to ignore the parts you do not understand. Ultimately the designer can create almost anything, albeit with great difficulty. You need not concern yourself with the tools, just pay attention to the look.

NOTE: Do not assume everyone sees the same page that you see! Do not assume everyone's computer and browser are configured the same way as your's. For example, white text on a black background might look acceptable on your screen but when viewed on antique or poorly adjusted monitors, the text may be illegible. Or, do not assume any colors you like will appear the same on other monitors.

Fluid or Liquid Window and Navigation

  • work on all sized monitors
  • work with all text sizes
  • work with all browsers

The biggest design consideration was the layout of the window. Note how there is a banner on top, a footer at the bottom and the navigation appears in a column on the right. Surprisingly enough, this was extremely difficult to do. I wanted the important part of the page to appear first as you read, on the left. The less important part, how to move about, appears on the right.

The difficulty comes about because of the various ways visitors arrive at the site. Some come with powerful computers and large displays. Others come with an old relic for a computer and a tiny display. Some come with a variation of windows and the Explorer application, while others come with something else, perhaps a Macintosh and Safari. The browser wars resulted in many different implementations, including my favorite, FireFox. All visitors want to see what you have to offer, but the tool each one uses is vastly different. This presents a huge challenge to the designer and the programmer.

Many designers give up on the complexity and design a static site. These are pixel perfect images and do not change size. They assume a monitor of a specific resolution and the user much view the site in a window of specific dimensions. The good news is the site always looks the same, sort of. The bad news is it constrains the visitor. Worse the site breaks when the visitor changes text sizes or prevents loading of certain types of content. Try changing the text size in your display. What happens to the content and navigation areas?

This site is is liquid. This means the visitor can adjust the size of the window and the content will flow to fill it. Text will fill the content area, thumb nail images will expand or contract to fill the area, and text can expand in the content area of the window. A person with a small screen can make a small window and view the content as a person with a large monitor can expand the window and see all the content at once. People with a vision handicap can see the content by enlarging the text and opening the window.

The banner is the brand of the site and appears at the top. It should not be tall as it takes away from the content area. The navigation is on the right, and should be narrow, providing only a hint on how to move about in the site. The footer shows where the end of the content is. Even more important is how is the content affected when the window is made larger or smaller. For example, do the images get an individual scroll bar when they are partially obscured as the window contracts?

Most important is consistency. Does the web site appear similar when viewed with all browsers? This is critical and most difficult to accomplish! Microsoft, with their various versions of Explorer, admitted to not conforming to the World Wide Web standards. As a result the different versions of Explorer required various tricks to make their content appear the same. Microsoft has admitted the mistake and Explorer 7 is supposed to be compliant, but the damage is done and may people still visit using previous versions of the browser.

Conformance to Standards

  • conform to html, css, and code standards

Pages need to conform to the standards. The language used to create the page has a syntax and the syntax needs to be perfect. There are various syntax checkers. Almost all the pages in the Museum conform. This is important because it helps make the pages appear the same. It is also important because the search engines will rank well developed pages higher than poorly developed pages.

Separate Content From Style

  • do not use tables to format content
  • use cascading style sheets (CSS) to style the page
  • use different style sheets for print and hand held devices

Cascading Style Sheets (CSS) provide the ability to style a web page. The content is contained in the page and the various parts are labeled. Then CSS is is used to layout the page, provide margins, colors, fonts, and even behaviors. The content can be the focus for the page. Later someone can style the content and even more fun, the style of the whole site can be changed with a couple of key strokes. Well, that is the promise anyway.

User Interface Guidelines

Some considerations need to be made to effect a good design. Most guidelines have a basis in research, however sometimes it is difficult to find the references. Here are some things I have learned while developing web sites, both commercially and personally, since the early 1990s.

  • White text and a dark background are difficult to read.
  • Colors are never the same on any two displays and the differences can range from subtle to dramatic. Stay with one of the 256 web safe colors if color is important.
  • Maintain high contrast between the background and the text. It may look good on your display but it will look different on another display and worse, the visitor may be sight disabled.
  • Brand and be consistent. The visitor will recognize the next page and will remember your site.
  • Surround your content with lots of white space. See Apple web site or read their user interface guidelines.

Do Not

  • No pop up windows.
  • No frames.
  • No dynamically moving interfaces (no Flash).
  • No music.
  • No video unless it is on a separate page and the user is warned before entering. Reference YouTube.