 |
JR's HomePage |
Markup |
Site Map | Page Bottom Content | Presentation | HTML Markup | CSS Style Links | Visual Testing | Print Testing | ServerCopy |
Website Testing Notes
It is very important that fresh sets of eyes are used when reviewing a site. Get a friend or coworker involved. Professional quality testing implies that the web site has:
- the content and presentation reviewed for accuracy, currency, relevance and appeal
- all internal markup codes verified including HTML and CSS style
- all document linkage in place
- been thoroughly visual tested and print tested in several environments
- been server copy testing to insure that the user is receiving what you intended
Content Review
Content testing is necessary to retain credibility with your readers. Any lapse in literacy or errors in factual info will lose them to other sites very quickly.
- Spell check your documents.
- Check the grammar. Voice, tense, syntax and punctuation are commonly made errors.
- Navigation devices for moving into the middle of long pages (more than one screen) are required. These include Navigation Bars with: Top of Page, Bottom of Page, and Previous Page.
- Make sure there is a contact address for the author or
webmaster within either a hyperlink or a submission form.
This is essential for reporting errors or omissions. For example:
<a href="mailto:JRUSSELL@NIAGARAC.ON.CA"> Contact J. Russell</a>
- Be sure to include important business information such as street location (maybe linked to a map), hours of operation, names of contact people (sales, order desk, customer service etc.) and ordering and payment methods as well as the usual telephone and fax numbers, mailing address and Internet e-mail address.
- The site should be suitably branded with logos and slogans. Shortcut icons are important for user recognition!
- Corporate material must have relevant copyright notices.
- Downloadable files should have file size and date of last change indicators.
- Pages should have update stamps and filename markers.
- Large sites require either a framework for Table of Contents or a Site Map that illustrates multiple page nestings
- Use a Site Search mechanism for finding information that may not be directly referred to on a navigation bar.
- Check that character sets display correctly. As an example here is a pound sign £ -- what did you get? Currency signs are a real danger. It might be safer to write the currency notation in full.
- If a 'hit' counter image is used, is it as small as it could be? Better methods of collecting user background information exist such as server logs, submitted forms and passing cookies!
Presentation Review
Presentation is an attractor for the site and a way to hold the viewer until they see the value that the site offers.
- Avoid 'busy' backgrounds or low contrast between the text
and background. Beware of color choices that could make contrast
difficult for those who are color challenged. Refer to
lighthouse.org's notes.
- All 'presentation' settings should be done with stylesheets.
- Refrain from setting any background if possible. This will allow the viewer's browser settings to rule. Users with special needs can choose appropriate colors.
- If you must set a background coordinate text, link, active link and visited link colors for a high contrast. Research the web for studies on colors that contrast well and that do not tire the eyes.
- Make sure that designer backdrops and watermarks do not overpower the text. Solid colors are much better for text but if you must, pick less intrusive patterns. However, if the backdrop is just a frame for images there will be no visibility difficulties (but maybe some distraction). Art galleries normally are not patterned!
- Use images only when they enhance the presentation, convey concepts that are difficult to express in words or are meant as attractors (eye candy) for relatively juvenile audiences. A leading image as a hook or the inclusion of a logo or masthead are appropriate uses of the media. Do not insult the viewer's intelligence on how to submit mail by using rotating globes or envelopes moving into mailboxes!
- Use the most appropriate graphics format for displayed images. Do not use GIF when a format such as JPEG or PNG may be more appropriate.
- Compress graphics files to minimize download times.
- Provide alternate descriptions for images as some readers use text based only systems or turn off the graphics to speed up downloads. Visually challenged users may be using braille output devices or localizers (text-to-speech translators). Be considerate!
- Don't use automatic audio files. Let the user decide if he wants to listen by placing a link (with file size) to the audio. Don't forget a link to an appropriate player. Remember - midi and wave files offend those with a sense of fidelity.
- Don't use cliches such as the rainbow line and animated pictures of spinning worlds, waving flags and running animals. Be original!
- Don't use pop-up ad screens! Boycott sites that do!
- Don't use frame structures! They clutter the screen display where whitespace is important for readability.
HTML Verification
It is a true mark of professionalism to be as technically correct as possible. Verification of HTML syntax against the current recommendation can't be done using browsers which are deliberately designed to be error tolerant. You must use utilities specifically designed to trap potential syntax problems. This testing step is often missed by many commercial sites. DO NOT FALL INTO THE TRAP!
| On-line | Off-line |
|---|---|
The Amaya browser can make quick and dirty checks with Use Tools - Parsing Errors
CSS Style Sheet Checking
Style sheet definitions should always be validated against the w3.org recommendation so that the page design may be interpreted in a predictable manner. As implementation by browser agents is not yet complete, documents must also be visually checked with SEVERAL browsers to note whether what was designed is the same as what the clients will view.
Quick and dirty checks can be made using the FireFox browser! Use Tools - Error console to catch errors.
- WDG CSS Checker validates CSS stylesheets and offers suggestions for improvement and warnings of implementation troubles.
- W3 CSS Validation Service gives your document a thorough checkup.
Link Checking
One common assumption is that every link will work forever!. Be ready for frustrated readers, amused readers, embarrassment, or even loss of dignity. Links get dropped. Sites go dormant. Sites are reused by new owners including purveyors of porn. One high church appointment was held up due to this very same problem.
Link checking assures that your hyperlinks are going to work. This verification process is especially important when you link to other sites on the Internet. The dynamics of the web is such that the link check process should be done as often as possible and at least once per month. Link checking is mandatory for corporate sites.
| On-line | Off-line |
|---|---|
Caution: Many link checkers do not correctly check internal links such as missing. One utility that does is Sleuth.
Caution: Automated link checkers DO NOT catch every broken link. You must also check manually! This is because some ISPs such as MSN substitute their own pseudo-404 or redirect to a search page. Also some URIs are vacated and reused by other providers so the delivered pages may not be the one that were intended.
Note:Some reports include three digit http error codes such as 403. For a complete listing of what these codes mean, you can refer to http protocols.
Visual Testing
Most site designers take visual testing very casually with just a quick peek with one browser. This neglects the fact that users are individuals, each with their own working environment. You must test thoroughly to invalidate the following common but false assumptions:
- Everyone has the same operating system. There are three major systems [Windows, Linux and Mac]. Use only Internet friendly document types (eg .html, .pdf and .png) and not proprietary formats (eg .doc documents, .ppt slideshows and .bmp images). Use naming conventions that work on all systems (ie. lowercase, leave out the spaces in filenames and keep names short).
- Everyone uses the same browser. Documents can look very different in alternate browsers. Use a stylesheet that does not omit any property setting (different browsers use different defaults). View documents with different browsers. The minimum test is with the latest versions of FireFox, Opera, Safari and Internet Explorer. Viewing with a text only browser such as Lynx is very revealing for those who overuse graphics. View with different versions of the same browser. Not everyone upgrades immediately!
- Everyone uses the same monitor resolution. Many users now have better displays and your well designed layout may either wrap awkwardly or display the whole page off-center. There is a simple styling setup to correct this situation. Power users may resize the browser or move the taskbar to the side. Test in at least 800x600 and 1024x768 rez. and with resizing enabled
- Everyone has the same color capabilities. Most often the browser will make a good close fit BUT NOT ALWAYS! Don't forget to check in black/white mode as sight-challenged may have their systems set this way.
- Everyone is using a super fast connection. The symptom is long files (greater than 25 Kb). The solution is to factor any large document into smaller units.
- No one ever changes their user configuration. View with different default foreground/background color settings. Do not assume black text on white background as a default! View with different FONT settings. Some users have increased their font size due to vision requirements. Design for adaptability!
- No one ever turns off their image download. View with image download turned off. Are there alternates to the menu that cope with a no-image capability. This is easy enough to remedy if there is a will.
- Everyone has CSS enabled. Check by renaming your stylesheet temporarily or disabling in the browser. See if site is still readable and navigatible.
- Everyone has JavaScript enabled. Test by disabling JavaScript. Your site should either have noscript alternates, transfer to alternate pages or inform users that site is only accessible using JavaScript.
- No one uses popup-disable or ad-killers.
Printed Format Testing
Most page creators forget to look at printed output. The most common problem is that scrolled material in textarea elements are not printed. Use an exterior page as a workaround. Styles that use positioned footer elements can also cause difficulty. Use @media styling to alter the print positioning.