Image & Web Page Guidelines | Accessibility | PDF | HTML/Browser | User Environment | Client-side Code | Video and Audio

Image & Web Page Guidelines

Design to support the predominant types and versions of browsers while following the state Internet standards for Hypertext Markup Language (HTML). Design for your intended audience and test for multiple browsers, various operating systems, and for backward compatibility as needed. Use Web server logs to identify browser and platform trends.

Image files fall into three general quality categories. Low resolution (72 dpi) for e-mail and website use; medium resolution (150 dpi) for desktop printing and full screen viewing; and high resolution (300 dpi) for photo quality print output use. Images at 150 or 300 dpi should be used as downloadable files only. Not for display on website.

Follow these helpful guidelines when using images on a webpage:

• All images on a web page should add up to 300k or less.
  For example, use one photo at 300k or three images at 100k each.
• Optimize images for faster download times.
• Design pages that load within 10 seconds
• You can calculate download time using Martindale's The Reference Desk.
• A text description should be provided for every image file by using the “alt tag” feature.
• If an image is large, save it as a PDF file.
• JPEGs are best suited for displaying photographic images; GIFs are best suited for line art or icon images
• Whenever possible, reuse graphic images throughout the website to eliminate additional download time.
• Monitor resolution determines the display size of an image. For a PC, it's 72 ppi and for a MAC, it's 96 ppi. It cannot be changed by the user
• Design your pages so that they display effectively on 15” monitors without requiring the user to scroll horizontally
• Design for monitor display of 800 x 600 pixels
• Design to support the predominant types and versions of browsers while following the state Internet Standards for HTML
• Minimize client-side code by using server-side logic

Tools/Web Links/Templates:

A Word on Graphic Image Resolution Graphic image resolution tips from IEEE

Compression & Optimization Tips Tutorials and tips for image compression and Web page optimization.

Computer Images Information on bitmap and vector graphics

Accessibility

DSHS Internet subsites must meet the current Web Content Accessibility Guidelines 1.0 (WCAG) Priority Checklist checkpoints. Implement Priority 2 and 3 checkpoints, as needed, especially if the website uses tables, frames, or form controls. Create a logical tab order for navigation. People using access devices often navigate among objects such as form controls and links with the tab key instead of the mouse. Specifying a tab order allows them to access these items in a logical order. Test and modify as needed with an accessibility evaluation and repair tool.

Many of the WCAG Checklist of Checkpoints for Web Content Accessibility is incorporated into Section 508 of the Rehabilitation Act, which establishes accessibility standards for federal agencies.

Tools/Web Links/Templates:

W3C list of Evaluation and Repair tools. Large selection of 3rd party products and solutions

A-Prompt Tool-kit Evaluation and repair tool

The Wave Evaluation tool

Vischeck Colorblindness information and evaluation tool

MAGpie Synchronized text generator for multimedia files

*Dreamweaver by Macromedia Development, validation tools and training

Washington Assistive Technology Alliance Information and training

508 Universe Online training

Curriculum for Web Content Accessibility Guidelines 1.0 Training available online or in a downloadable format

*Mention of products is not an endorsement.

Portable Document Format (PDF)

The Adobe Portable Document Format (PDF) is commonly used for electronic document distribution. The Adobe Acrobat product is required to create a PDF document while the Adobe Acrobat Reader is necessary to view documents.

The Adobe Portable Document Format (PDF) is commonly used for electronic document distribution. Adobe Acrobat is required to create a PDF document. The Adobe Acrobat Reader is necessary for the user to be able to read a PDF. Users must download and install the Reader as a plug-in.

Consider the following for distributing large PDFs via the Web:

• Reduce the size of PDFs. A number of options are available from Adobe to reduce the size of a PDF including:
• Compress text and line art
• Lower dpi settings for images
• Lower quality setting to minimum
• Remove fonts from "always embed" list
• Split document into smaller files
• Remove extra pages
• Remove embedded tags
• Optimize for page-at-a-time viewing
• If possible configure server software to support page-at-a-time downloading. Contact Microsoft for info if you use IIS. If you are using Apache, use version 1.2.1 or later, or run a CGI script that enables page-at-a-time downloading. If using other server software, contact the manufacturer for information about page-at-a-time downloading
• Use URL's with 256 or fewer characters
• If possible, create PDF files with embedded accessibility tags. Word 2000 or later as it embeds the accessibility tag information into the file automatically. Also run the accessibility checker from the PDF file
• NOTE: Page-at-a-time downloading is also referred to as "byte serving" or "Fast WebView"

Tools/Web Links/Templates:

Tips for Distributing PDFs on the Web Optimize PDFs from Adobe

Adobe Acrobat Accessibility

HTML/Browser Compatibility

Some applications may require a higher-level browser for security, compatibility, or functional purposes, depending on business needs. Identify a recommended minimum when needed and provide a Web link to the free browser upgrade and any necessary plug-in.

Designing for multiple types of browsers while following the state's Internet standards for HTML provides the ability to deliver web-based information and services to the widest possible audience.

The use of the W3C standards gives you clean, future-proof code that still displays acceptably on legacy browsers.

Tools/Web Links/Templates:

The Complete HTML 4.01 Reference HTML 4.01 Tags

HTML Validator W3C HTML Validation Service

HTML TIDY

User Environment

Performance

Design pages that load within 10 seconds and allow the user to access information quickly. Web performance is most commonly interpreted as the time it takes a page to load for the user. The most important issue in response time is providing the user a screen of useful information. If the user can start acting on some information quickly, it doesn't matter as much if the full page takes longer to load.

Consider the following components that affect response time:

• Throughput of the Web server
• The Web server's connection to the Internet
• The Internet itself
• The user's connection to the Internet
• The rendering speed of the user's browser and computer

Research on response time has shown that pages need to be delivered to users in 10 seconds or less. Staying below the 10 second limit is required for users to keep their attention on the task. Response times over 10 seconds produce higher bailout rates (the proportion of users who do not wait for the full download).

You can estimate file download time using Maringdale's "The Reference Desk": File Download Time Calculator.

Client-side Code

You must minimize client-side code by using server-side logic. This is consistent with the Internet direction for portable logic as adopted by the Information Services Board (ISB) in 12/1999. Excessive processing on the client may exceed the capabilities of the user's browser and the capacities of the user's computer.

Only plug-ins available at no charge will be allowed. Advise user of workstation requirements and give complete directions for downloading the plug-in.

If you are using an alternative format such as Word, Adobe Acrobat, or PowerPoint, you must supply clear requirements for the user.

Specify the format of the document i.e. PDF, Word, Power Point in parenthesis after the link that requires a plug-in to view.

Make any required plug-ins or viewers available for download at no charge to the user and alert the user to any workstation requirements.

Commonly used plugs-in and viewers are:

• Adobe Acrobat Reader (PDF)
• Apple QuickTime (QT)
• Macromedia Flash Player (SWF)
• Macromedia Shockwave Player (includes the Macromedia Flash Player)
• Microsoft Excel 97/2000 file viewer (XLS)
• Microsoft Media Player
• Microsoft PowerPoint 97/2000/2002/2003 (PPT)
• Microsoft Word 97/2000 (DOC)
• Visio 2002
• RealPlayer

Consequences of using plug-ins on your site :

• Hardware requirements that the customer's computer cannot satisfy.
• Incompatibility with the customer's computer operating system or the specific version of their operating system.
• Incompatibility with the customer's Internet browser or the specific version of their browser.
• Incompatibility with the customer's version of the plug-in.
• Incompatibility with the customer's rights on their computer (such as when the customer doesn't have the necessary permissions to install software on their computer).
• High bandwidth requirements that the customer cannot meet because they are using a low bandwidth Internet connection (such as a dial-up modem).
• Customer's may not trust the plug-in, and therefore refuse to install it.

Web page authors should consider these issues very carefully when designing their pages. Whenever possible, content provided through a plug-in should also be provided in an alternative format such as HTML or plain text. Use of custom or in-house developed plug-ins is highly discouraged.

Video and Audio

Web video offers a wealth of interactive possibilities not available with other media. As the technology improves, the quality and reliability of Web video is quickly making it one of the premiere choices for communication between businesses, agencies, and the public. The target audience and nature of the video production will help determine the best technology to use. Indicate which video format(s) are used and provide a link to the download site for the required plug-in. Consider the following general guidelines when determining video needs.

Delivery Methods

There are two methods for sending video files on the Web. The "streaming" method requires a dedicated server and software to dynamically send the video to the viewer. This technology allows the video to play within 10 seconds of requesting the file and is more suited for longer, high quality video.

The "progressive download" method involves placing a video file on a standard Web server for users to download before viewing. This method is more suitable for short video clips of 30 seconds or less. Consult with a network administrator about the possible network strain prior to placing video files on a Web server.

ISSD has contracted with DIS for streaming video services. DIS has a Sun Solaris/RealNetworks Helix Universal® Server platform that can stream Windows Media® player, RealSystem®, and Quicktime® formats. The cost is allocated to the administration, division or program based on use.

Target Audience

A majority of the general public still use slower, dial-up connections and are less willing to wait for large video files to download (as with a progressive download). If the target audience is the general public, consider using a lower speed, streaming video format to ensure proper playback and minimizing download time. If the target audience is limited to users with a T1 line or other high-speed connection, consider using higher quality video to take advantage of the additional bandwidth. If the audience consists of both dial-up and broadband customers, different video streams should be made available to meet the needs of all users.

Media Equivalents for Accessibility

Include video captioning that describes the essential speech and audio portions of the video. If this is not feasible within the video, provide an alternative auditory description to accompany the video.

Special Requirements for Testing

Conduct user tests on the delivery method using targeted connection speeds and required media player(s). Also test the media player(s) links and instructions on the download site(s).

Tools/Web Links/Templates:

QuickTime Player

RealOne Player

Microsoft Media Player

Flash Media Player

MAGpie Captioning Software