General site standards for official EMU web sites

In addition to specific directions found elsewhere on this site, there are some general principles that should guide the development of all official EMU web sites. The purpose of these principles is to help you construct a site that is user-centered and works with different types of computer systems. Please note that official administrative sites are expected to adhere closely to the EMU templates, and official academic and auxiliary sites are expected to adhere to the core template navigation and concepts.

Organization | Design | About Flash | About Frames | Text | Navigation | Courtesy

Organization

Begin with a sustainable, platform-independent organizational structure for your site:

• PLAN your site's information architecture (IA) before building the site. Establish directories, subdirectories, and navigational paths. If you require assistance with developing a logical site architecture, contact the director of Web Communications.
• Make sure that the default file in each directory and subdirectory is titled "index.html", all lowercase.
• Use lowercase titles for all your file names.
• Make sure that file names have proper extensions, such as .html or .htm, .jpg, .gif, .swf, etc.
• Do not use spaces or punctuation in file names, other than the underscore "_" convention.
• Use intuitive naming for your files and directories--keep file names as short and descriptive as possible (less than 15 characters where possible).
• Place all your images and graphics in a subdirectory called "images." This subdirectory should be located within your site's top-level directory.
• Use relative pathnames for links and images, where possible.
• Use the University's name in the top (title) bar of the browser window for every page on your site--even those in the lower tiers. You may abbreviate to EMU, but it is important to identify all official EMU web pages as such.

Design

The EMU web site templates are established to help you set up official EMU sites according to the principles listed here. If you wish to use the templates with modifications, or to develop a customized site according to the template concepts, you must contact the director of Web Communications before doing so.

• Understand that 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 element of user-centered design is consistency. The EMU templates contain the recommended navigation structures for EMU sites. In general, 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 use background images. In most cases, these repeating images add nothing to the design, and are distracting and unappealing. They frequently cause problems with readability, which is an essential component of usability.
• Use background colors selectively and sparingly. Avoid using background colors behind large amounts of text. The EMU templates are designed using specific background colors in certain areas (the navigation bar) only.
• Avoid using visible tables, unless there is a compelling reason for all those column-and-row lines. Tables are best used as invisible components of page layout. If you must use a visible table, 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 section of this web site.
• Avoid using 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.

About Flash

Many web designers are using Flash to add interest and interactivity to their web site designs. Flash may be used on official EMU sites, but only as an auxiliary element. The following regulations apply to the use of Flash on all official EMU web sites:

• Flash may not be used as the site's primary / exclusive navigation component or as a requirement to view the primary content of the site (i.e. no "all-Flash" sites).
• Flash site "introductions" or "splash pages" must be optional (i.e. provide a "skip intro" option).
• Audio components must be optional (provide an "off" option).
• A fully-functional and accessible non-Flash site or version of the site must be provided. Preferably, a detect script should be included for non-Flash-enabled browsers, in addition to the required "skip" option for Flash-enabled browsers.
• A direct link to the current download of the free Flash player must be provided 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.")
• The Flash components of the site must be reviewed by the director of Web Communications 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.

About Frames (don't use them)

The EMU templates, design and standards are structured not to use frames. Frames cause problems with accessibility, bookmarking, indexing (searchability), printing, page refresh, URL tracking, copyrights, and inter-site navigation. The EMU web standards do not support the use of frames. Please do not use frames in official EMU web sites.

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

Text

The following is general information for site developers. Additional, more specific information about text and style is located in the text and style guide section of this web site.

• Use cascading stylesheets to set your text and layout specifications. We strongly recommend that you link to the EMU stylesheet for all your official EMU web pages. (Specifications in the stylesheet are here). If you wish to use your own stylesheet, please be aware that you will be responsible for ensuring that your site continues to comply with EMU's evolving site standards in the future. Please integrate the following guidelines:
• For text, use dark colors on a light (preferably white) background for maximum contrast and readability. Use black text (hex color #000000) for any text longer than a couple of lines.
• Do not underline text for emphasis; use bold (<strong>) or italic (<em>) text instead. For web users, underlined text signifies a link.
• For links in text, use the browser default colors OR an intuitive color structure (the EMU style sheet specifies link colors). For example, unvisited links should be darker in color than visited links. Make sure text links are underlined so the user knows they are links. For graphic links, construct the navigation so links are obvious. Be consistent with text throughout your site.

Navigation

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 EMU web site templates are designed with the recommended navigation structure for EMU web pages. Developers of official EMU sites should use this navigation structure or a similar one.

The most important dual principle of navigation is clarity and consistency. If a site visitor needs more than a moment or two to understand your site's primary navigation structure, the structure is probably not sufficiently intuitive. Navigation is not the place on your site to experiment with unusual conventions. Your site's navigation should meet the expectations of people who use the web--and 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 which links have been visited and which have not.

The hierarchy of the site should be 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.

Courtesy

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:

1. 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).
2. Make sure your users know what to expect. If your site has links, clearly indicate that they are links (the best way to do this in text is to retain the underlining convention). 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 navigation particular components of your site (make careful decisions about this), indicate this information clearly.
3. While navigation is critical, you should not force users to accommodate your navigational structure. A good navigational structure will be the basis by which many users obtain what they want from your site. Still, some users will encounter your site through entrances other than your home page (such as by using a search engine), and some users have navigational habits (such as the back button) that are part of common expectations. 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.
4. Do not force your visitors to accommodate both horizontal and vertical scrolling. In general, horizontal scrolling is denigrated. Try to design your pages to fit the general screen width that monitors and browsers accommodate. The standard used to be 640x480. While some web designers still use this standard, the acceptable size has now increased to about 760x600.
5. Follow established guidelines for professional presentation--no flashing .gifs, no blinking text, no super-saturated colors, no huge or tiny text sizes, no looped sound files, etc. Do not use automated popup windows (link-based popup windows are fine).

Questions about this site should be referred to the director of Web Communications.