Ms P's WebSite Design - Step 6: Graphics

Use graphic images to enhance, not overpower

     Graphics are a special challenge for Web designers, requiring balance between overuse and skimpiness. A site filled with images can have charm and impact. The secret of effective graphics is stick to the theme and identity of the website. Logos as an identity predate the Web, but a carefully chosen webpage logo clearly identifies the site and is a visual center of page design. 

Types of Images
    Two types of images are used on webpages: GIF and JPEG. GIF images are clipart type images; many are animated by a string of movements which cycle continually, or cycle once and freeze on a single image. JPEG images are typically photographic, with subtle shading and blending rather than crisp lines.

    Icons are small GIF images, about 25-30 pixels square. Visually descriptive icons can represent various subjects or links, especially if the icon is carried through to the page being linked to. [View this icon sample page-use Back button to return.] Intuitive icons, such as arrows, help navigation when used consistently throughout a site (although you should always provide text links at the bottom of a page for accessibility by the disabled). 

Size of Images
     Digital cameras or scanners create photographs or documents to put on webpages, but remember that district access is 100 times faster than the home modem of a visitor. A 100K image that displays quickly on a teacher workstation will take half a minute to load with a modem; several photos on a page can take more than a minute. Viewers won't wait long for a page to load -- the average is 10 seconds -- before clicking to something else. Limit large photos to one or two per page. Use an image editor to edit and reduce file size of digital camera/scanner images. 

    Be careful when using Image Properties to change the length and width of a graphic. While an image can be reduced for better page balance, enlarging images usually gives poor results. Also, an image reduced in this manner does not change its load time. Animated gifs cannot be adjusted.

Animation
     The Web design community persistently argues about animated gifs, but animated gifs can be effective, especially on school websites. A single animated gif at the top of a heavily texted page punctuates a theme and adds a bit of whimsy. When the visitor scrolls down the page, animation scrolls off the window, so the viewer is not distracted while reading. On navigation pages with little text, more animated images can be used, because the viewer spends too short a time on the page for movement to become annoying.

Placement of Images
    Placement of images on a webpage can enhance or undermine a page. A right-facing graphic looks better on the left side of a page, and a left-facing graphic looks better on the right side of a page. Centering such images may not alleviate the conflict in our perception--set them off-center, away from the direction they face. Use an image editor to flip an image for better orientation.

    Webpages are more 3-D than printed pages; since we unconsciously experience gravity, our senses are jarred by compositions that ignore it. Place weightier graphics further down the page than lighter ones or balance them with heavy text areas. Since we read from left to right, asymmetric page layout should have left-to-right horizontal and top-down vertical direction, so the eye flows to the lower right corner. Pages are often longer than a single window, so achieving such balance is a challenge. If a webpage looks odd, try rearranging text areas, graphics, and empty space for better balance. Templates designed for headers, footers and colors may need to be modified during graphic and content layout.

    Finally, be sure to include ALT text on every image you place on your page. Not only is this an ADA recommendation, but it can enhance your search engine placement. Read more about ALT tags.