Testing web sites
Site testing can be overlooked easily, but it is a vital part of the process of design and development of any web site.
What do you need to test and how do you test the site?
What criteria do you place against the tests to say that the site has reached the required level of “satisfaction”?
As a class, Ben, Raylene, Robyn, Marc, Brendan, Alyssa and Sam came up with the following areas for testing to be performed within the site:
- Link checks (on site, off site and eMail)
- Speed
- Search engine placement & optimisation
- Accessibility
- Images
- Multimedia
- Audience
- Accuracy
- Readability
- Page size & browser compatbility
- Hits & other data
These items all have areas to be checked against. They include such things as “meta data”, “size”, “readability index” and “performance under load”.
What are your thoughts on what criteria should be placed on the testing for each area, and how can you test them?
Are there any ways to automate this testing (for example a links tester to check if links are valid)?
How should you document the results of your tests?
What ideas do you have?
[Remember to use the comments option and to put all your reference web site titles and hyperlinks into your answer.]
Technorati Tags: accessibility, search engine optimisation, speed, testing
Webpage accessibility testing
USE MANY DIFFERENT COMPUTERS
USE MANY BROWSERS ON 1 COMPUTER (VIRTUAL PC FARMING)
ON-LINE TESTING
CRITERIA: SCREEN READER FUNCTIONALITY
Testing screen readers involves testing the content that is read out compared to the content that is displayed. Testing should also be done accross OS and Screen reader software.**This may be different to “talking browsers”.
AUTOMATED TESTING
http://www.browserpool.com/kc/wob/portal.jsp BrowserPool
http://www.techsmith.com/morae.asp MORAE
The above links are atomation tools which make it easier and faster to test content
Posted April 11, 2006, 2:57 pmLinks should be:
100% correct
Open in right window
Getting back to “previous”
Offsite links “valid”
Alternate text
Link title
Make sure that rollover’s work
Make sure that “visited” links work
Getting “home”
Anchor points within pages are correct
Viewable colours
Relevant link titles
Testing Links:
Manual testing
Check screen reader compatibility
Check browser compatibility
Use Xenu’s link sleuth, link checker or another app to find broken links
http://home.snafu.de/tilman/xenulink.html xenu’s link sleuth
Posted April 11, 2006, 2:59 pmhttp://www.link-checker-pro.com/ link checker
Images, multimedia
Quality vs. speed
- Turn off images to see how someone with images disabled would view the page.
- Always keep the image size in mind for dialup users (who would load data at about 1-3kb per second). So test the site for various download connections. Several methods could be; viewing the site at the local library, or having access to a dialup connection.
- Alternate text, titles etc as substitutes for images disabled or screen readers. Images should have a suitable description.
- Multimedia files will benefit having a transcript, or a longer description explaining exactly what’s in the video or audio file.
- Edit images in image editing programs, not web design programs. Use the ‘save-to-web’ feature if it’s available, and do not use the maximum setting. 70% is generally sufficient for a high quality image.
http://www.aksi.net/optimizing-images.htm – 11/04/2006
http://www.graphic-design.com/Photoshop/optimizing/optimize.html – 11/04/2006
- Aim to use only the following formats for intended purposes:
JPEG = photographs, or graphics with a large range of colours;
GIF = animations, graphics, images with same (flat) or similar colours.
PNG isn’t widely supported among browsers, so be careful with this one. Stay well away from using bmp files. Also avoid saving the images at resolutions above 150dpi (stick to 72dpi).
http://libweb.uoregon.edu/it/webpub/images.html – 11/04/2006
- Crop off parts of the image that aren’t necessary
http://www.ibdhost.com/help/optimize/ – 11/04/2006
- This doesn’t speed up images, but its more user friendly: use interlace for gif’s or progressive for jpegs. The user can then see what to expect.
http://webmonkey.wired.com/webmonkey/99/15/index0a.html – 11/04/2006
- If creating a graphics-based website, where suitable stick to a design based for 800×600 resolutions.
- Don’t use images that you don’t need. For example, you can use a list instead of an image for a roll-over navigation bar.
- For large images use thumbnails, or some way for the user to decide wether to wait or not for the large image.
- Include width & height on all images, but never reduce the size in the web design program (ie scale to 60%)!
- Use the 216-websafe colours for gif where possible.
http://libweb.uoregon.edu/it/webpub/images.html – 11/04/2006
- Host the images on the same server, browser doesn’t have to connect to the new server for the new image.
Posted April 11, 2006, 3:05 pm- Consider preloading your often used images.
- Ensure images are actually there (in the correct location). If the browser cant find the image, it’ll check several more times to be sure, which will slow the page loading time.
- Try to combine images. If you have 3 images for a button (say, left, centre and right), the browser will need to gather 3 separate images and the server will need to send 3 separate images back. Not to mention the extra HTML that would be required.
http://www.yourhtmlsource.com/optimisation/imageoptimisation.html – 11/04/2006
The following is a list of possible areas that could be tested for each of the headings given above. Can we test for them, and how we test them is something that needs to be determined.
Accessibility
Search engine positioning & optimisation
Audience
Hits and visits
Visual performance
Accuracy and Readability
Speed
Links
Browsers
What should be checked for usability? What criteria can you set for this?
Can you think of others?
Posted April 11, 2006, 3:34 pmPlease delete first post.
images
Criteria: Images should be suitable for dialup modem speeds (roughly 1-3kb second download rate). A good target is 12kb max per image, unless its a high quality large scale image, which should be first viewed as a much smaller thumbnail. The only real way you can test them is to manually test the site on different internet connections etc.
Automation: There are no real ways of automatically testing the images performance on a website. Like said above, the only way you can test them is to manually test the site. Having said that, Dreamweaver comes with a basic download time tool, which calculates an approximate download time for a connection you decide.
You can automatically configure the images appropriately though; one of the best ways is using Photoshop you can program actions, which you can set to adjust every photograph to a quality of 70%, 400px * 300px @ 72dpi etc. You can also then set different actions for the thumbails, qual. 20%, 80px * 60px @ 72dpi etc. This will also keep a standard for all the images.
Documenting: Keep track of the image sizes. Set a size limit for a total page size, and try to stick to it.
- Turn off images to see how someone with images disabled would view the page. This will also give an indication of how a blind person will hear the site.
- Test the site for various download connections. Several methods could be; viewing the site at the local library, having access to a dialup connection, or if it’s possible, temporarily throttle the connection speed for the server down.
- Cross-browser and cross-browser check the image. Windows and MAC have variations in their colour palette (thus the 216 web-safe colours, which is a collection of colours familar to both platforms).
- Make use of Dreamweavers download time tool.
References: http://www.aksi.net/optimizing-images.htm, http://www.yourhtmlsource.com/optimisation/imageoptimisation.html
Posted April 11, 2006, 3:44 pm