Graphics Standards

Here you'll find the requirements and best practices for developing images for use on the EERE Web site. Images can communicate a great deal of information while adding visual appeal to Web pages. At the same time, images on the Web cause increased download time and accessibility issues.

Requirements

All images must follow these requirements.

EERE Web Graphic Style

Feature graphics should be outlined with a 1 pixel line of an appropriate complementary color. The outline should be applied as: "Edit/Stroke/Inside." Please be sure that the stroke is applied "inside" the selected graphic and not "outside." Feature text may have a drop shadow applied to the text only if it improves the legibility. There should be no bevels or other treatments applied to the feature text.

Design site graphics and colors for no higher than a 16-bit color display.

Fonts

Feature Graphics should use Helvetica Neue Bold Condensed as a headline font. Helvetica NBC should be used at a font size no smaller than 16 pt.

Myriad Bold can be used as an alternative headline font, or in conjunction with Helvetica Neue Bold Condensed as a subtitle. Myriad Bold should be used at a font size no smaller than 12 pt.

If text is set in Photoshop, a text attribute of "Crisp" should be applied to all of the text options previously listed. (Do not use "None", "Sharp", "Strong", or "Smooth".)

Scope notes within feature graphics should use Myriad Regular at a font size no smaller than 10 pt. A text attribute of "Sharp" may be applied to Myriad Regular on very small text to make it more legible. Graphics other than features (those used within the body of EERE Web pages) should have similar treatment and style. The EERE fonts and colors should be used whenever possible.

Directories

Store and reference all images from a subdirectory labeled "images."

Alt Text

Screen readers use alt text to provide visually impaired users with a description of a graphic. See the guide to writing alt text to ensure your site complies with Section 508 standards.

Color Contrast

508 guidelines state that there must be sufficient color contrast between foreground and background colors to prevent problems for those who have color deficits.

Flickering Images

People with photosensitive epilepsy can have seizures triggered by flickering or flashing in the 4 to 59 flashes per second (Hertz) range with a peak sensitivity at 20 flashes per second. Use care when design animated GIF images or other refreshing content.

Graphic Size

Graphics must be sized to work with the EERE template.

Center Column

Graphics must be under a specific width in order to fit within the EERE templates. If you are designing graphics for a site in the Program or Subsite templates, your graphics must be no wider than 535 pixels for 3 column layouts, or 695 pixels for 2 column layouts.

All sites in the Office template should be in 3-column format. Graphics for these sites can be no wider than 546 pixels.

Right Column

Graphic features in the right column should be exactly 249 pixels wide.

Best Practices

Following these best practices will result in higher quality images.

EERE Photo Treatment Style

It is recommended in most cases that photos be "sharpened" in Photoshop using the standard sharpen filter "Filter/Sharpen/Sharpen."

Photos should be outlined with a 1 pixel line of the hex color #666666. There should be no shadow or bevel treatment applied to photos. The outline should be applied as: "Edit/Stroke/Inside." Please be sure that the stroke is applied "inside" the selected photo and not "outside."

Be sure photos are not so wide that they cause scrolling on monitors set to 800 x 600 resolution.

Photos should not be over optimized or degraded in any way. If degradation is noticeable in a photo, that photo should not be used. A better quality original should be found, or an alternative photo should be used in these cases.