The Alabama Agricultural Experiment Station, Alabama Cooperative Extension System and College of Agriculture at Auburn University (AAES/ACES/COAG) Web sites are constructed around some general principles of organization, design and navigation that should guide the development of all official AAES/ACES/COAG Web sites. Following these principles is particularly important because these sites have a broad variety of audiences, and site visitors are looking for very different kinds of information and resources.

A Note About Home Pages
File Structure
Design
About Flash
About Frames
Navigation
Courtesy

Plan your site's proposed file structure graphically to establish links and hierarchy. Establish directories, subdirectories and navigational paths. This will also help you to determine how to use the AAES/ACES/COAG templates for your individual site. If you require assistance with developing a logical site structure, contact your communications department.

Follow these additional principles as well:

• Make sure that the default file in each directory and subdirectory is titled "index.php," all lowercase.

• Use lowercase titles for all your file names. File and directory names are case sensitive.

• Make sure that file names have proper extensions, such as .html or .inc, .htm, .jpg, .gif, .swf, .php.

• Do not use spaces or punctuation in file names, other than the hyphen  [-] convention.

• Use intuitive naming for your files and directories; keep file names as short and descriptive as possible.

• Place all your images and graphics in a subdirectory called "images." Dreamweaver and Contribute automatically create this subdirectory, which should be located within your site's top-level directory.

• Use relative pathnames for links and images, where possible. Dreamweaver and Contribute automatically create relative pathnames for links and images.

• Use your organization’s name (Alabama Agricultural Experiment Station, Alabama Cooperative Extension System, or College of Agriculture at Auburn University) in the top (title) bar of the browser window for every page on your site--even those in the lower tiers.

The purpose of Web design is to enhance and support the user experience. A site's design should not create distractions or confusion; it should emphasize the site's navigation and primary elements.

Perhaps the most important principle of user-centered design is consistency. Other design principles include the following:

• Use background images selectively. They frequently cause problems with readability, which is an essential component of usability. They also increase download time.

• Use animated GIF files extremely sparingly. Animated GIFs that repeat continuously on a Web page can be distracting and annoying.

• Use background colors selectively. Generally speaking, use light background colors for large bodies of text, the main content of your page. Darker colors can be used for navigation buttons, menus and side bars with small amounts of text. The AAES/ACES/COAG templates are designed using specific background colors in certain areas only.

• Avoid using visible tables, unless there is a compelling reason for all those column-and-row lines (like presenting data). Tables are best used as invisible components of page layout. If you use visible tables for presenting data, keep the lines small (border size 1).

• Use professional, legal graphics and images, and keep your image file sizes small, so the images will load quickly. This is particularly important for Web pages with numerous images. Further information on images is available in the Images and Graphics Guide.

• Do not use auto-loading sound files, unless there is a compelling reason to do so (as in a multimedia presentation, where the sound is part of the information content). Do not use looping audio files--the kind that continually play in the background as the user views the site.

• Be sure your site is ADA compliant.

Many Web designers are using Flash to add interest and interactivity to their Web site designs. Flash may be used on official AAES/ACES/COAG sites, but only as an extra element. The Flash components of the site must be reviewed by your communication department prior to launch. We recommend that you request an initial review EARLY in the development of your site, so any potential problems or issues can be resolved before you do extensive site development. Please refer to Usability and Accessibility.

The following principles apply to the use of Flash on all official AAES/ACES/COAG Web sites:

• Do not use Flash as the site's primary or exclusive navigation component or as a requirement to view the primary content of the site (i.e. no "all-Flash" sites).

• Make Flash site "introductions" or "splash pages" optional (i.e. provide a "skip intro" option). Audio components must be optional (provide an "off" option).

• Provide a fully-functional and accessible non-Flash site or version of the site. Include a detect script for non-Flash-enabled browsers, in addition to the required "skip" option for Flash-enabled browsers.

• Provide a direct link to the current download of the free Flash player on the site's main page. (i.e. "To view all the content on this site, you will need the Flash player, available as a free download here.")

Please do not use frames in official AAES/ACES/COAG Web sites. The AAES/ACES/COAG Web standards do not support the use of frames. The AAES/ACES/COAG templates are not structured to use Frames because Frames cause problems with accessibility, bookmarking and inter-site navigation.

For ease of site maintenance, use the Dreamweaver templating feature to create site elements (such as navigation bars) to retain and update common information for a variety of pages on your site.

There is one exception to the don’t-use-frames rule: I-frames. AAES/ACES/COAG templates will support the use of I-frames, which quickly load PDF files into a frame. Contact your communications department for assistance in setting up I-frames properly.

Navigation is the anchor of your site's usability. Navigation can make the difference between a user-centered site and a poorly designed site. The AAES/ACES/COAG templates are designed with the recommended navigation structure for AAES/ACES/COAG Web sites. Developers of official AAES/ACES/COAG sites should use this navigation structure or a similar one.

There are a number of principles for good site navigation. Here are a few:

• Organize your site navigation with user expectations in mind. Throw out your AAES/ACES/COAG divisional organizational chart; it is not a good model for organizing your site’s navigation. Your site's structure should require no institutional knowledge on the part of the user. A complete stranger should be able to figure out how to navigate your site.

• Keep your navigation consistent; let the user know what to expect and where to find it. Use intuitive navigation so users do not have to spend time figuring out how to use your site.

• Do not experiment with unusual navigational conventions. Your site's navigation should meet the expectations of people who use the Web. Even inexperienced users should be able to find their way around.

• Wherever links are present on your site, make it visually clear that they are links. It is also helpful to users to distinguish between links that have been visited and those that have not.

• Make the hierarchy of the site evident through your navigation (how to find information and how the information is organized). Users should also find an easy way to search the site.

It is important to design your site from a user-centered perspective, not an institutionally centered or departmentally centered perspective. Some rules of Web design courtesy include the following:

• Assume that your users do not know who you are, how your department or area functions and what your organizational structure is. Do not assume any institutional knowledge. Constantly consider what the users of your site will want and expect. Conduct basic usability testing on your site by working with people from your expected audience (people who do not know what you know about your area or department).

• Make sure your users know what to expect. Clearly indicate text links via underline, color change or button effects, but be consistent throughout your site. If a link on your site will cause the user to download a PDF file or Word document or other file, tell the user that the link leads to a download. If the user will need certain technologies to view or navigate particular components of your site (make careful decisions about this), indicate this information clearly.

• Do not force users to adapt to your navigational structure. While a good navigational structure will be the basis by which many users obtain what they want from your site, some users will encounter your site through entrances other than your home page (such as by using a search engine). Give your users navigational choices. Do not require them to use a specific browser or any non-standard technology. Let them know where they are. Make information and resources easy to find.

• If you use a back button, use a Javascript function that truly goes to the last page visited. Some users have navigational habits (such as the back button) that are part of common expectations.

• Do not force your visitors to accommodate both horizontal and vertical scrolling. In general, horizontal scrolling is discouraged. Try to design your pages to fit the general screen width that monitors and browsers accommodate. On an 800 x 600 pixel monitor, the acceptable page width is 760 pixels.

• Create your pages so that they can be printed. Even if you don't intend for people to print your pages, some will, and you should accommodate this option. For general page design, printable pages require certain design protocols, such as no reversing (light-colored) body text out of a dark background, for example. You should also avoid extreme landscape-oriented designs (larger than 760 pixels wide).