The key difference between web and print design is that web design is dynamic – it will be presented differently on different screens, operating systems and browsers. With regard to this medium there are also many other specific areas that need checking. Here at Feelingpeaky we look to spend time ensuring that we make our web sites look great who ever might be viewing them. To this end we have prepared a check list for our team to use which I thought I would share here. Whilst not completely original I hope you’ll find it a useful resource:
Website Testing Check List
The following is a quality checklist for elements to test on a brochure web site.
Code:
- Title tags – spelling, appropriate and sensible, SEO friendly?
- Other Meta data required? Or blank? Appropriate and sensible, SEO friendly?
- Image Alt Tags – correct spelling on Alt tag? Is there any missing Alt Tags?
- Review code of the page to check nothing obviously strange
- All styles, JavaScript in linked in files and not inline.
Layout and Content:
- Layout issues? – Does the completed page match the design layout? Have there been any problems in translation to coded page?
- Non CSS/Text version – check through for spelling mistakes
- Copy and headers? General typos? Proof read the site
- Navigation – functioning as required
- All links go to their appropriate pages/files
- Email links – check code correct mailto:
- Image quality – any pixelation – over optimisation on size? Etc.
- Special Characters – check that special characters have been coded correctly including inverted commas, apostrophes, Currency symbols and copyright symbols etc.
- Missing content?
Specific functionalities:
- Forms – are they working? Ensure you get a response from the intended recipient, test form controls – required fields etc.
- Search facility
- Check printed pages
- Etc.
Cross Platform checks specifically for impact on layout and styling:
- Run checks across IE7, 6, 5, FF, Opera and Safari
- Run checks across PC and Mac
Validation:
- Validate HTML
- Validate CSS
- Is the site Accessible? Check text version
- Colour blind tests
Flexibility:
- Check works in different window sizes
- Check it works with varying text sizes
Does it still work if?
- You switch off JavaScript
- You switch off plug-ins
- You switch off images
Download speed:
- File size including images, linked in files
- Check on dial up
- Is at least some useful content appearing whilst rest of page loads
Resources:
W3C Validator: http://validator.w3.org/
W3C CSS Validator: http://jigsaw.w3.org/css-validator/validator.html#validate-by-uri
Link Checking: http://valet.webthing.com/link/
Link Checking: http://validator.w3.org/checklink
Web content accessibility guidelines: http://www.w3.org/TR/WCAG10/
Web page Speed Analysis: http://www.websiteoptimization.com/services/analyze/
Browser Stats: http://www.w3schools.com/browsers/browsers_stats.asp