Web Design Checklist

I wrote this for an assignment in my Web Design class.  I thought maybe someone might find it useful.  :)  Please do not reproduce without my written consent.

Web Design Checklist

Guarantee browser compatibility. All Web pages should be compatible with the most popular browsers (such as Internet Explorer and Firefox) as well as text-only browsers. Browse the Web site using multiple browsers to test.

Ensure platform compatibility. All web pages should be compatible with both Mac & PC platforms in regard to colors and fonts.

Design for screen resolution. All pages should fit in a 600 x 800 window without horizontal scrolling and should be compatible with most screen resolutions.

Be considerate of visitors. Pages should download quickly. Consider graphics and content in regard to download time and be forgiving of visitors on dial-up connections.

Accessibility is important. Ensure handicapped and disabled visitors can view the Web site by being Section 508 compliant.

Offer consistent and easy to follow navigation. Navigation should be easy to follow and consistently placed on all pages.  Every page should have a hyperlink back to the main page.  The logo (usually found in the header) should link to the main page.

Clearly distinguish hyperlinks. All navigational buttons and hyperlinks should clearly define them as hyperlinks by means of underline and/or unique color in order to distinguish hyperlinks from normal text. All hyperlinks should also contain the “title” attribute.

Ensure all links are functional. All hyperlinks should be functional and not lead to dead pages. Check every hyperlink to make certain it leads to the intended location. Also check external links frequently to guarantee the hyperlink is still valid. External links should open in a new window.

Choose the right font. Consistently use an easy to read font like Arial or Helvetica. Text should be large enough to read, but not too big.  Try not to use more than two different fonts.

Check the content. All content should be thoroughly checked for grammar and spelling errors. Remember to check the text in “alt” and “title” attributes as well.

Make content easy to read.  Make certain enough contrasts exists between background and text. Avoid excess use of italic and bold text.

Use adequate and proper white space. White space can help provide structure and organization. Be sure to avoid excess passive white space.

Realize important content. Content with the most value should be placed above the fold. Also, it is best to have a fluid design using percentages.

Have a good eye. Do not place large amounts of text together since it is difficult for the user to read. Use graphics, headings, and other items to break up large areas of text.

Optimize and resize images. Images should be optimized and resized to guarantee quick download time. Images should be in an acceptable format such as JPEG or GIF.

Format images properly. Ensure no broken picture links exist (red X’s). All images should have “width,” “height,” “border,” “alt,” and “title” attributes.

Use a consistent design theme. The same universal color theme should be used throughout the entire Web site (usually by means of CSS). Hyperlink colors should also coordinate with the theme.

Have steady page structure. From the home page to all subsequent pages, the main structure should remain the same.

Standardize the code. Make certain to validate code (HTML, XML, etc) using the W3C validator. Also validate CSS code.

Don’t forget the footer. The footer is essentially the conclusion of a Web site. Include copyright and Webmaster information here. Additional navigation as well as other items can also go in the footer.

Remember the site map. Search engines now heavily use site maps in order to crawl content for search engine submission. 

Final checks. All pages should have a title (“New Page 1” is not very descriptive). Try to state the purpose of the Web site either as a catch phrase in the header or in an “about” section.