EMU Web Design Standards-Graphics

Colors

Avoid:

• The use of non-approved colors as backgrounds to tables, images, etc.
• The use of the BLINK tag, or any other means of producing blinking text.
• The use of the MARQUEE tag, or any other means of producing marquee-style text.

The table below shows a set of approved "generic" colors*:

* EMU recognizes that there are cases in which the "generic" EMU colors may be limiting. Some exceptions have been made for the default colors of the graduate program pages. Web Work Team will work with special requests and evaluate them on an individual basis.

With the introduction of a new design during the Summer of 2004, EMU's site relies heavily on CSS for the formatting of text, tables, and other html elements.The above colors should be used by applying a style to the element, not by typing in the color number in the color box (in Dreamweaver). These special styles are in the process of being set up, but are not yet available to curators. More information will be available soon. Please contact if you have a need for a special style.

Images [Top]

Use of good photographic images is strongly encouraged ont he EMU website. Curators who will be involved in posting images should obtain Adobe Photoshop image editing software (contact Informations Systems to order it for your office). Use of other "cheap" image editing programs often results in poor quality and high file size.

Following guidelines apply to all images used on official EMU web pages:

• Strong, single images should be used, not a collage.
• A feeling of natural light and space should be present in the images.
• Images should be high-quality and incorporate people wherever possible - do not use clip art or clip art-like illustrations.
• Images should follow the dimensions and format standards listed below.

Image Alternate tag [Top]

Entering alt tags for every image on our pages is the first step we can make in being accessible to people who may be visually impaired. Alt tags are also important because most search engines use this information to build search results.

An alt tag is easily entered when you click on the image; simply put a short descriptive phrase about the image in the space provided by Dreamweaver. Check pages that have been created in the past to make sure you meet this basic standard.

To help search engines, give your image files a name that directly corresponds to the picture. If it is a picture of a person, use their name. For example, john_paul_lederach.jpg

Image dimensions [Top]

The height and width for a picture is generally set automatically in Dreamweaver. Do not resize your image in Dreamweaver. Instead, set the image size to what you want in your image editor. For example, if your image is actually 500 pixels wide, don't place it in Dreamweaver and then resize it to 300. Rather, open your image in your image editor, resize it to 300 and save it. Then you can place it at its actual size in Dreamweaver.

Image formats [Top]

Refer to the load time guideline for recommendation on file sizes.

The easiest way for curators to facilitate short loading times is through discriminate use of images. Two image formats are used on the web. Each format is specially suited to a particular type of image. Misuse of the formats results in greatly reduced image quality and greatly increased image sizes, and therefore increased load times.

The GIF format is best used for saving line art and small pictures. The GIF format can only store 256 colors, making it unsuitable for photographic images. The size of GIF files can be further decreased by decreasing the number of colors in the file. Consult the documentation for your image editing program for information on saving GIF files.

This image is saved in GIF format because of the low number of colors (4) and the small size of the image. The file is 2 KB in size.	The same image, saved inappropriately in JPEG format. Although the quality of the file is the same, the file size has quadrupled to 8 KB.

The JPEG format is best used for saving photographs. Although GIF format gives a smaller file size for text, line art, and small pictures, JPEG gives a smaller file size and a much greater quality for larger images with many colors. JPEG images, unlike GIF images, can contain millions of colors.

JPEG images can be saved at varying levels of quality. Generally, a low quality level still provides acceptable use for display on the web. The WWT strongly recommends saving JPEG files at a quality of 30%.

The appropriate use of JPEG format in the image above preserves the quality of the original acceptably, at an equally acceptable file size of 8.9 KB. This file has been saved at 30% quality and still looks acceptable.	The same image, saved in GIF format. Although the loss of quality in saving a photograph in GIF format isn't too noticeable in this particular instance, the increase in file size is. The GIF file is 32 KB, more than three times the size of the JPEG!

When in doubt about which image format to use, curators should save an image in both file formats and compare the sizes of the two. The smaller image should be used on the website.