Creating and Optimizing Web Pages

• Optimizing Your Web Pages for Accessibility
• Decreasing Your Page Loading Times

There are many books available to help you learn how to publish web pages, but there are also many free resources available on the Web. Following are a couple of guides that can help you get started:

• Yale C/AIM Web Style Guide - This guide provides a thorough discussion of graphic and information design, page layout, site organization, navigation, and multimedia content.
• The Bare Bones Guide to HTML- This guide provides a basic overview of all tags used in HTML (author: Kevin Werbach).

Optimizing Your Web Pages for Accessibility

It is important to design your web page with accessibility in mind. Some users browse the Web without images, and some users with impaired vision use speech software that ignores graphics entirely.

If you are developing your own website or using an external vendor to create a website, please refer to information on standards and compliance for digital content.

Following are a few tips that can make your web pages more accessible to every user:

• Do not use graphic-only navigation on a web page. While you can easily include image maps or graphical buttons on the page, it is important to include text-only equivalents. Make sure users surfing without images will be able to read and navigate the page.
• Provide text alternatives to the graphics. Proper use of the ALT tag will allow users browsing without graphics to understand what you are trying to provide. Use the ALT tag to describe the graphics you are including on the page; for example, <IMAGE SRC="photo.jpg" ALT="Photo of Moon Landing">.
• Avoid frames. Using frames (showing more than one web page in the same browser window) makes the page inaccessible to disabled users. In addition, frames do not work with many browsers, including Lynx and older versions of Netscape and Internet Explorer. Also, many users find frames to be cumbersome.
• As a rule, there are few applications where frames are necessary. In general, frames do not give you many advantages over a well-designed "unframed" web page.
• Use an HTML Validation serviceto check your code. There are many programs available that can check the HTML to confirm the code is accessible and free of errors that may make it load improperly.
  • The World Wide Web Consortium (W3C) provides some of the best HTML validation at http://validator.w3.org/. They also provide validation for Cascading Style Sheets (CSS) at http://jigsaw.w3.org/css-validator/.
  • Bobbyis an HTML validator with an eye toward accessibility. It provides a very rigorous evaluation! See http://www.cast.org/bobby/.

Decreasing Your Page Loading Times

To optimize your pages for faster viewing, review the information provided below.

Thumbnails

One technique that Web authors use to speed the loading of their pages is the use of thumbnails. A thumbnail is a smaller representation of a larger image.

If you have photographs on web pages, you may want to provide a smaller representation of the graphic and use it to link to the original graphic. To make a thumbnail, just make a smaller copy of the graphic, using a program such as Adobe Photoshop or Graphic Converter to resize the image.

Height and Width Attributes

When visiting a page with an inline graphic, your browser must wait for the graphics to load before it can display the whole page. Because large graphics load slowly over slower connections (such as modems), this delay can be frustrating.

You can alleviate this problem by including simple HTML code that tells the browser how large the images will be — so the browser can display the full page immediately and add in the graphics as they load.

This can be done manually. To do so, find out how large the graphic is (in pixels) and insert WIDTH and HEIGHT attributes into your IMG (IMAGE) tag: <IMAGE SRC=photo.jpg WIDTH=350 HEIGHT=150 ALT=Photo of Moon Landing>.

• On a Windows computer, move your mouse over the image icon and an information window will appear. You can also select the "Properties..." command and go to the "Summary" tab.
• On a Macintosh computer, press the "Ctrl"-key and 'click' your mouse once on the image and select "Get Info". In the resulting window, expand the "More info" section.

On both computers the "dimensions" will appear with the WIDTH and HEIGHT in pixels.

If you are having trouble getting your Website up and running, see Troubleshooting.