Web design quality assurance procedure

Use this procedure to help you develop content that will meet the business needs of your organisation and the needs of those who user your website.

• Reviewers must be familiar with requirements of the Monash Web Style Guide and with the tools used in the review process.
• First reviewer may be the designer. Second reviewer can be a peer or superior.

Overview of the process

1. Markup validation
2. Link integrity check
3. Metadata review
4. Content review
5. Accessibility evaluation
6. Page size check
7. Cross-browser evaluation
8. Script and SSI check
9. Screen resolution check

Detail of the process

Step 1: Markup validation

• Use the W3C validator to check your markup. You can install this as a bookmarklet/favelet to make validation a smoother process.
• Correct any errors identified by the validator.
• If you have made changes to a stylesheet, use the W3C stylesheet validator to check the stylesheet syntax
• Correct any errors identified by the validator.

Resources

• W3C HTML validator
• W3C CSS validator
• Validation bookmarks

Step 2: Link integrity check

• Use the W3C link checker to test the integrity of your links.
• Perform a manual check (by clicking on each link) to links are directing users to the correct document
• Correct any errors as identified by the link checker or found during the manual check

Resources

• W3C link checker
• Keeping your links up to date using the W3C link checker

Step 3: Metadata review

• Check to ensure page has
  • An appropriate page title.
  • A short description/summary of the content.
  • A set of keywords that identify the content. Think about the type of words that people might type into a search engine to find your content.
• All pages MUST have a page title
• All key pages (home, section home pages, etc.) should have descriptive metadata
• Remove or populate empty metadata tags

Resources

• Writing page titles
• Guidelines on writing metadata

Step 4: Content review

• If content has not been reviewed, use content quality assurance procedure

Step 5: Accessibility evaluation

• Use Webaim’s The WAVE (or an alternative tool) to check for accessibility problems
• Ensure structural markup is used
• Ensure all images have appropriate text alternatives
• Ensure tables (layout or data) used and marked up correctly
• Ensure all form labels are explicitly associated with their controls
• Ensure all accessibility features of templates are in place
• Correct as required

Resources

• The WAVE
• Cynthia Says
• Accessibility checking favelets
• Web accessibility toolbar for IE
• Accessibility extensions for Mozilla
• Accessibility extensions for IE

Step 6: Page size check

Use this step for navigation pages (home pages, section home pages) only

• Use Netmechanic to check page size
• Aim for page size of 40kb or less

Resources

• Netmechanic (enter URL at step 1, and go to step 4. Check “load time” on results page, and follow link to check “total page size”)
• Check your site provides an alternative access point to Netmechanic

Step 7: Cross-browser evaluation

Extensive cross-browser testing of the Monash web templates was performed at the time they were developed. There are some known issues with minor release versions of Netscape 6 and 7. To ensure you have not introduced any further problems:

• Check in IE6, Mozilla 1.6 and Netscape 4.7x
• Correct any errors

Step 8: Script and SSI check

Run script in a way that tests all functionality. E.g. if a form is being tested, enter data in all fields.

• Correct SSI errors
• Correct or report other errors to script owner

Step 9: Screen resolution check

• Using browser tools such as Mozilla prefbar, reset screen to 640x480 and 800x600
• If horizontal scrollbar appears, correct problem

Resources

• Mozilla prefbar