Multimedia: Graphics, Animations, Video, Audio, etc. - Web Style Guide

See also Video / Audio / Multimedia on Ohlone College Websites in the Web Style Guide.

Graphics and Animation

  • Refer to the Ohlone College Logo section of the Web Style Guide for information on proper use of the Ohlone College logo on websites.

  • Make file sizes for graphics and animations small using an image editing software program (do not resize images by changing the height and width attributes of the <img> tag). More about Graphics.

  • Use graphics or animation where they add value to the web page.

  • Do not use graphics or animations just because you can or you think they are cute or cool. All content on a web page should provide information or otherwise add value to the page. Animated graphics can be annoying, distracting, and can cause problems for site visitors sensitive to movement.

  • Re-use graphics used on other pages.

  • All <img> Tags Must Use the Width, Height and Alt Attributes - The width and height for each image must be the image's actual size in pixels. Do not resize an image by changing the height or width attributes - you should properly resize an image using an image editing software program, such as Photoshop or Paint Shop Pro. Using width and height attributes helps to minimize the time it takes a page to load in the visitor's browser. This is an example of a properly coded <img> tag:

    HTML example:
    <img src="smiley.gif" width="100" height="120" alt="Smiley face">

    XHTML example:
    <img src="smiley.gif" width="100" height="120" alt="Smiley face" />

    The alt (alternative text) attribute aids in accessibility and is useful for people who view web pages with graphics turned off in their browser. In addition, many browsers will display a "tool tip" near the mouse cursor when the mouse cursor is positioned over an image having an alt attribute; this is useful for providing a short description about the image. Recently-released browsers such as Netscape 6.x and Mozilla 1.0 do not display the tool tip unless a title attribute has been used in the image tag; for example:

    XHTML example:
    <img src="smiley.gif" width="100" height="120" alt="Smiley face" title="Smiley face" />

    The alt attribute is required. The title attribute is optional.

  • Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2Hz and lower than 55Hz. 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 as well as quick changes from dark to light (like strobe lights). More about Accessibility.

  • Avoid avoid blinking content unless you provide a method to stop the blinking. More about Accessibility.

  • Use the "alt" attribute for every <img> tag. Use an empty "alt" attribute (example: alt="") for images that have no particular meaning (such as horizontal bars or spacer images). More about Accessibility.

  • Use client-side image maps instead of server-side image maps. Use the "alt" attribute for each link in the image map.

  • Use appropriate image formats for images:

    • GIF format for images with large flat areas of color (such as clipart, logos, line drawings, simple illustrations)
    • JPG format for images with small areas of color (such as photographs and images containing gradients)

Video and Audio

  • See also Video / Audio / Multimedia on Ohlone College Websites in the Web Style Guide.

  • Do not automatically play video or audio (this does include music) when a page is loaded. Instead, allow the site visitor to decide when he or she wants to listen or the music or view the video.

  • Always provide the site visitor the ability to start and stop the video or audio file.

  • Provide volume controls.

  • Provide rewind controls.

  • Provide alternative content for visitors who cannot hear or see the video or audio. These are also useful for site visitors in public areas (libraries, shared offices, etc.) and those who using computers without the software/hardware/plug-ins required to listen to audio or view/listen to a video.

  • Follow web accessibility guidelines for video and audio: provide captioning, provide controls, provide alternative contents, etc. More about Accessibility.

  • Keep file sizes small to minimize the time required to load the page.

  • Indicate how large the file is so the visitor can decide whether he or she wants to view it. For example:

    Children Playing - QuickTime movie (376 KB)

  • Provide multimedia files in low, medium and high resolutions (small, medium and larger file sizes) so the visitor can choose the appropriate file to view for his or her needs. For example:

    Children Playing - QuickTime movie (153 KB) (376 KB) (501 KB)
    Children Playing - QuickTime movie (low - 153 KB) (medium - 376 KB) (high - 501 KB)

Plug-Ins

Some web technologies require the use of a browser plug-in. New versions of plug-ins are continually being created. Site visitors may not have the required plug-in installed or their version of the plug-in may be outdated.

If you use web technologies that require plug-ins, you must provide a link to the page on the manufacturer's site where the plug-in can be downloaded to the site visitor's computer. Examples of technologies requiring plug-ins are:

More information about Multimedia is available in the Web Center.