Personal & Departmental Web Site Planning & Design

Good planning and design are instrumental in creating an effective web site. The planning process begins by creating a site proposal. From that proposal it is possible to create a site architecture, navigation, and aesthetics that will all work together to achive your goals.

Site proposals

A site proposal describes the Web project to the client, and defines the project for the designer. A well thought out proposal will be an invaluable reference tool during the design process. Every good Web site proposal will answer the questions:

• What are the goals of the site?
• Who is the audience of the site?
• What is the content of the site?

Architecture

How we organize all this information will greatly affect whether the site achieves the goals we outlined. If users are unable to find the information pertaining to their needs, they will become frustrated and leave the site.

There are two kinds of architecture we should separate out: the physical structure, which is our system of folders and naming conventions for storing the files; and the logical structure (also known as the virtual structure), which is the structure the user interacts with.

Before you begin building the actual pages to your site, create a diagram of the site structures. By taking the time to do this work before you start creating the pages, you can spot potential problems with the structure and fix them before you've invested hours of work.

It is important for us to remember not to make the user go more than 3 clicks before they either get the content they are looking for, or receive positive feedback that they are about to get to that content.

Navigation

Good navigation is the key to building an effective web site. You want to help your users to find their way around your site with as much ease as possible. Without a good navigation scheme, users soon become lost or frustrated. Key points to remember are: give people access, help them remember where they are and where they've been, and be consistent.

Use clear descriptive links. One of the most common mistakes in navigational design is to provide links that do not provide any idea of where they might lead.

A simple, well thought-out navigation allows users to jump to various main sections of the site and sometimes to a few key documents as well.

If you build a large or complex web site consider creating a page that serves as an index to your site. This can be as simple as a table of contents, or it might be a site map or an alphabetical index.

There are a few more rules of thumb to keep in mind as we design our navigation:

• let visitors know what page they are on;
• not all navigation will be the same for every page -- your main navigation should remain the same and consistent, always appearing in the same location, but some sub sections of your site may have different sub navigation;
• lengthy files that require significant scrolling usually should have "back to top" links periodically, and if possible, should have a document navigation at the top that links to "anchors" throughout the page; and
• convention dictates including a logo or branding on each page, and often that logo will link back to the home page

Aesthetics

The aesthetics of your site are critical. If the combination of images, typography, and colors don't mesh well, users may become frustrated and not stay to find the information you want to share with them. Remember that what you are familiar with looking good on paper may not be effective on the screen.

Images

Images are essential to web design, bringing web pages to life, providing interest and variety, allowing branding, and presenting information that cannot be easily conveyed with text. A web designer's use of images is often what can make or break a site and the two keys to success are quality graphics and fast download times.

Image formats: GIF vs. JPG

If you scanned one of your family photos and wanted to use it on your web site you will need to compress it to reduce the file size. Currently there are two types of compression used for almost all web graphics -- GIF and JPG. Using the best format for your image, GIF or JPG, goes a long way toward designing a quality site.

Optimization is key

Minimizing the size of images is an essential when working on the web. User interface studies show that users will wait an average of only 10 seconds for a page to appear (up to 30 if something is "happening" on the screen).

If your web page is more than 50 K, including all images, it runs the risk of alienating visitors. As you'll see later, 50 kilobytes is a tough limit to stay under.

You will find that to successfully scan your images, you want a fairly high resolution, such as 300 dpi, in order to have enough detail to manipulate the image. As part of the optimization process, you should save all your images at a resolution of 72 dpi, the accepted standard for Web images. The lower resolution helps reduce file size dramatically.

You need to use a good photo editor to manipulate and optimize your images for the Web. Consider either Adobe's Photoshop or Photoshop Elements.

Typography

Presenting text that is both legible and readible is important if you want viewers to actually read something on your web site. Bad typography will distract your viewers or completely turn them off. Good typography will grab their attention. It will also help viewers find their way around your page and prioritize your information.

Two Styles

There are two major font styles: serif and sans serif. An example of serif would be Times New Roman or Garamond. An example of sans serif would be Arial or Helvetica.

In the web world sans serif is considered the easiest to read and so is most often used for text blocks and serif is often used for larger headlines (this is because screen resolutions do not pick up the subtleties of serif at smaller sizes).

Standard Fonts

There are only a handful of fonts that tend to be on every PC and another handful on every Mac. They agree in only a few places [check Yale's Web Style Guide on line for a list]. So it is highly recommended to specify two or more font faces in case the first one is not on the viewer's system.

Sizes

There are very limited font size specifications in HTML, the language of web design: the range is from 1 to 7. The default setting on a browser is 3 for paragraph text. Size can also be expressed in relative terms. For example, to get smaller text you would specify -1, which means one size smaller than the default. Sizing is not the same on Macs and PCs. Macs using Netscape 4.7 or older or pre-IE5 browers see text smaller. So do not use a text size smaller than 2 (or -1) if you like Mac people. Cascading Style Sheets give you greater flexibility to specify the size of the font than HTML does. The greater flexibility, and a host of other benefits, makes it well worth learning a few extra principles to implement CSS.

Physical Styles

Text can be set in bold or italics for emphasis or to create headlines. Italics are common in the print world, used for titles, emphais, quotes, etc. However, italic text is hard to read on the web, particularly at smaller sizes, so use it sparingly. It is recommended to use other textual styles such as bold or a color changes instead of italics for any large amount of text.

While underlines are often used in the print medium, avoid underlined text for the web! Underlines mean "hyperlink" in the web world.

Logical Styles

Headings are a logical style, meaning that they say what the text is used for, and while they do effect text formating, this is not specifically why they are used. They provide important structural information to text readers and some search engines. In the future as we adopt CSS and as search engines get better, heading tags will be more important helping to distinguish levels and importance of information. Therefore it is essential to use <h> tags only for headings and not for general textual emphasis.

Here are a few other logical styles:

• <em> emphasis=italic
• <kbd> keyboard=<tt> or monospace type
• <Strong>=Bold

Font Graphics

You can use your graphic's software to give you more typefaces and more controls over your type such as spacing between letters and lines. Text done in this way is considerably larger in data size. Most designers use such such graphics sparingly -- as headlines or branding or some special text effect. There are some designers who will use graphical text for all the text on a page (like we did in the graphics example). While this might be a good idea for portfolio or showcase pages, this of course slows down the page load considerably.

Readability

A few pointers on making your text easier to read:

• Use all capital letters infrequently. They are tough to read quickly.
• Plan any large block of text so that your line length is around 40 characters long (give or take 20).
• Avoid having text flush against the left side of the screen or the visible border of any table.
• Contrast type against background. Dark type against light background is best.
• Too many different fonts on your page is distracting. One for the text and perhaps another for the titles is usually enough.
• Use bulleted text to get attention.
• Use information headers and subheaders.

Color

Often colors do not look the same on a Mac as on a PC (Macs are lighter). Users with older computers also run into problems that Macs and PCs do not use the same colors. There is something called a web safe pallette. This is 216 colors that are shared between Macs and PCs.

We can use color in many different places to change the appearance of our site. Here are a few of the most important places we can use color:

• page background
• table background
• table border
• font

Remember that it is very difficult for users to read a lot of text which displays on a dark background.

More Help

The Web development team here at George Mason has put together a site with more helpful information for putting up your web site. Visit http://www.gmu.edu/mlnavbar/webdev/ to find answers to questions about style guidelines, server space, and much more.

For help with accessibility issues, you may come into the Instructional Resource Center to test your site, or talk with a member of the staff.