Web Page Design Checklist

The Look of the Page

Page width tolerates various browser window sizes.: A page that expands and contracts to fit the browser window will not look equally good at every size. Although it "wastes space", pages will hold their appearance if locked at a width of 590 pixels (fully visible on a 640-pixel-wide browser window) or 748 pixels (fully visible on a 800-pixel-wide browser window). If a column of the page is allowed to change width, it should be one whose contents will look acceptable at least in 640-wide to 1024-wide screen sizes.[table, width]
Most important content is in the top 350 pixels.: Anything your page offers that is not in the topmost area of the page will not be seen when the page first appears; the user may back out of the page without realizing its value.
Background color is specified.: Versions of major browsers have different background color defaults, some white, some grey, so your page will look different if it doesn't specify a background color. Even if you use a background image, the background color is needed, as the background color will show if images are turned off by the user. [body, background, bgcolor, image]
Background image (if any) and background color is muted and light, so that page content stands out.: The "statement" that your background image or background color makes is always less important than the content of your page. No one does a web search looking for pages with cool background images.; [body, background, bgcolor, image]
Page is long enough to present an idea in full.: For instance, the slides of a Powerpoint presentation, with a slide for each bullet in a list, make uncomfortably short, choppy web pages and should be combined into a smaller number of web pages. [link, hypertext]
Page is short enough so that all of its contents are related.: For instance, the separate articles in a magazine should not be combined into a single webpage, but should each be a link from a table of contents page.
Page is similar in appearance and layout to other pages at the site.: A consistent layout reminds users that they are still at your site, and helps them find the features that all pages at your site offer.
Page has colors.: One of the web's strong advantages over print media is that color is free on the web. Pages with only two colors, especially if those colors are black and white, pass up this advantage and look boring and grey as a result. [text, color, font]
Page is only uploaded and made visible when it is ready for visitors.: Every page is under construction, and will of course be updated whenever its author can provide new information or a more effective design. It doesn't need an "under construction" icon to indicate this. If the page is inaccurate or misleading because of its state of completion, it should not be visible on the web, and an "under construction" icon will not excuse it.
Page is substantially the same whether viewed in Microsoft, Netscape, or Opera browsers.: Even if one browser has attractive and unique features, you can't afford to treat users of any of the major browsers as second class citizens.

Paragraphs of text

Text is dark on a light background.: Bright text on a dark background is striking but harder to read; users may not know how to print it if they choose to print a copy of the page. [text, font, color, body, background, bgcolor]
Paragraphs are no wider than 65-75 characters, or 3/4 of the screen, whichever is smaller.: This requires that most pages be broken up into separate vertical columns, to shorten the horizontal runs of text. [table, tr, td, width, colspan]
Text, links, and visited links are three distinct colors.: By default, these colors are black, blue, and purple respectively, but in any case they should be sufficiently different so that the status of a given word or phrase is clear. [body, link, vlink]
Everything underlined on the page is a live link.: Underlines for emphasis are only needed on typewriters, where they stand in for italics. In the World Wide Web and other publishing media, italics, bold print, and different text sizes and colors are used for emphasis. In the World Wide Web, underlining always and only means the word or phrase is a live link. [a, anchor, link]
Paragraphs are left justified.: Left justification provides a clear vertical starting line for the user's eye to return to. Paragraphs that are centered are harder to read. In particular a bulleted list of items should always be left justified. [table, align, div]
Nothing longer than a single word is all in capital letters.: Text in all caps is hard to read. Its use for emphasis also dates from the Typewriter Era, when different font faces, type size, and color, were not available to distinguish different text functions. On the Internet, by convention, text all in caps is read as if it were shouted, in anger, joy, or disbelief.
Spelling and grammar are correct.: At some point in the creation of your page, run a spellchecker on your text. Also pay close attention to "its" and "it's", and "their", "they're" and "there".
If text is boxed, margins separate text from the edges of the box.: Text that abuts the edge of a ruled or colored box is hard to read.[table, cellspacing, cellpadding]

Images

Images have specified height and width and are shown in their true size.: Pages are perceived to load more quickly if the height and width of every image are specified. Images shown in other than their true size are recognizable but have defects, and may take longer to download than they should. [image, img, height, width, jpg, gif]
Every image has an alt attribute that describes it.: Individuals browsing your page with text-only browsers, or with graphics temporily turned off, should be able to read a short description of each image, so they know what they have missed. [image, img, alt]
Text in images is clear enough to be readable.: Text in images is used to circumvent font and feature limitations of HTML. The resolution of images on the web is roughly ten times lower than the resolution of a printed page, so intricate fonts (like script fonts) and fancy features (like drop shadows) may obscure rather than enhance the text. [font, shadow]
You have the legal right or permission to use every image on the page.: It is easy to download images from any web page on the web, but that doesn't make it legal. Have permission to use any image you didn't create. [copyright, intellectual property]

Animation and Multimedia

Animated GIFs inform or highlight, but do not distract.: Animated GIFs can add movement and interest to the page, but that very movement makes them a distraction. Animated GIFs should not cycle forever but should stop after one or a small number of cycles, and particular caution is needed with more than one animated GIF on a page. [image, img, GIF, animation]
Multimedia features (music, Flash animation, virtual reality) only play after user clicks to accept them.: These features may not be available to every user, and may be time-consuming downloads for those who can use them, so they should be selectable, not imposed on every visitor. [embed, multimedia, VRML, wav, au]
User controls pace of any scrolling.: Text that scrolls "automatically", as in a marquee, frustrates almost everyone: For some it scrolls too fast, for others too slowly. [marquee, scrolling, frames]

Web Features

Hypertext links are accurate and functional.: Hypertext -- linking from page to page at the user's option -- is a unique advantage of the World Wide Web, but a frustration when links are allowed to get stale and broken. You'll need to test your page from time to time, even if all your links are to your own pages, to make sure all the links still work. [a, anchor, link]
Links based on image maps are repeated as text links elsewhere on the page.: Image maps are not available to those without graphics, or with graphics turned off, so image maps should not be the only way to find those links. [image map, ismap, csim, client-side image map, map]
If live links are not underlined on the page, they are noted in some other and consistent way.: Newer browsers allow live links to be marked with text features other than underlining, or not at all. If your links are not consistently marked, however, you may be wasting your time including them, as users will not be aware of them. [style, link, a, anchor]
If timeliness of the page's information is an issue, the date the page was last updated is shown.: It doesn't have to be prominent, but a user interested in how fresh your page is should be able to see when it was last updated.
User is notified if important page functions are available only with Javascript, Java, or Active X.: Users who choose not to use these language tools, or who turn them on only in special cases, should see an explanation of what page features the language(s) will enable. [Javascript, script, applet]
Error checks on user's entries in a form, if performed in Javascript, are repeated at the server.: Any error checking that is performed only in Javascript can be evaded (on purpose or by mistake) simply by turning off Javascript functionality in the browser. To insure those checks are made, they must be done at the server, even if they are redundant with Javascript-based error-checking.[Javascript, form, input, server, CGI]
User is notified if cookies are used, and why.: Users who are uneasy about cookie functions should see an explanation of what convenience cookies will offer -- to them, not to you.[cookie, form, input]
Files, directories, fields, and programs are named in lower case, without embedded spaces or special characters: Windows, Unix, and Macintosh computers differ in their handling of names; mixed cases and embedded spaces invite trouble when a file moves from one system to another -- and moving files is what the Internet does. [Windows, Unix, MacOS, Macintosh, file, extension, URL, handle]

Are all these points true for your web page? Check through this list of web design guidelines, to help you make your web pages more attractive and functional.

If you don't know what changes to make in your HTML coding to achieve one of these items, the wording of the short paragraph and the blue keywords may help you look up the information you need, in a book or help file about HTML.

All these topics, and many more, are covered in the Web Skills curriculum. William R. Kennedy and Joyce Beck are teaching Web Skills at Fairleigh Dickinson University.