Design Paper 8
A Guide To Web Site Quality
Mike Bachrynowski (last revised June 2001)
This paper describes measures and tests that can be used to ensure a web site achieves the highest technical and implementation quality. Implementation quality is important. It addresses the needs of people using different browsers. It addresses the needs of people connecting to the Internet using different connection speeds. It addresses accessibility needs. It is trivial to build a web site. It is not trivial to build a web site that meets the highest technical standards.
Web Site Design
There are two important aspects of web site design. The first aspect covers those elements that are designed to directly address the needs of the users of the web site. The first aspect includes layout, navigation and content. The second aspect concerns how those elements are to be implemented. There are a multitude of ways to implement the same element.
Many companies use external specialist marketing agencies to produce printed brochures. These contain images which for print purposes need to be produced at high resolution around 1200 dpi (dots per inch) or higher. These images could be used directly in a web site implementation. The web does not normally need such high resolution. If the resolution of most displays are taken into consideration 120 dpi is acceptable. On a web site implementation, if all other factors were equal, the use of the high resolution image (which is ten times as large as it need be) would take ten times to load. Both images would look the same.
Web Site Design Brief
Candidates will need to satisfy the company's technical authority that they understand and use industry standard rules and conventions, and that they are aware of (and responsive to) the diversity of software and equipment used by Web surfers.
Candidates will need to have solutions to problems such as the range of browser versions, the range of display characteristics and long download times on many modems. For the UK target market it is assumed UK residents connect using 56 Kbps modems.
Candidates will need to have expertise not only in design but also in programming and dynamic server technology.
Candidates must demonstrate scrupulous attention to quality issues. Great care needs to be taken in the technical implementation of the web site.
Candidates need to implement the web site so that it appears in leading positions on the "open" search engines.
Candidates should ensure the web sites conforms to HTML 4.0 strict (HTML Validation Service [http://validator.w3.org/] ) and CSS version 2.0 (W3C CSS Validation Service [http://jigsaw.w3.org/css-validator/]). The site should work excellently (exploiting MS DHTML) for the Microsoft Internet Explorer latest version range of browsers and acceptably for all other browsers.
Candidates should ensure the web site addresses the needs of customers with special needs and should exceed the obligations of the Disability Discrimination Act. Candidates should be aware of the RNIB (www.rnib.org.uk) "Hints for designing accessible Websites" and the W3C Web Content Accessibility Guideline 1.0 (www.w3.org/TR/1999/WAI-WEBCONTENT-19990324/). It would be advantageous for candidates to state which "Conformance Level" they expect their design will meet.
Microsoft Site Server 3.0 - Analysis (formerly Site Analyst) reports or equivalent will be used as a quality measure. ABCE [http://www.abce.org.uk/] guidelines will be followed for visitor analysis.
Many companies approach web design by creating a web site design brief, publish the web site design brief on a secure web site on the Internet and invite a number of web design agencies to respond. The agencies are asked to express their interest by producing a short document that outlines why they should be considered further. These documents are considered and a short list of agencies is compiled. These short listed agencies are invited to pitch.
Many companies have available a design style manual. This can be very important as the starting point in how the web site is to be enhanced. Some companies have developed "Cascade Style Sheets" (CSS) that reflect the guidance in the design style manual.
The Brief as it relates to the technical and implementation issues usually contains the following types of clauses.
Quality of Deliverables
Each release should contain comprehensive release documentation and an inventory list. There should be no surplus folders or files that are not listed in the inventory.
HTML pages should not contain FRAME constructs. It should conform to strict HTML version 4 with no deprecated constructs present.
Multiple (for branding) "favicon.icon" should be present for Microsoft bookmarking.
A "robots.txt" file should be present directing robots to search the web site.
Style layout, classes and HTML markup especially in the use of "header" HTML tags and classes should be consistent. Proper "header" HTML tags must be used. The font size for a standard copy paragraph should be 1em. All element sizes should be proportionate. Absolute sizes in style elements should be avoided.
HTML tag names should be consistent. All should be in uppercase with the attribute names in lowercase.
Folder names should be consistent. All should be in lower case and should not contain blanks or characters other than alphanumeric.
All HTML files should have the extension "*.html". "Include" type files should be used where possible to avoid duplication.
All ECMAscripts should be placed in a separate "scripts" folder which is located immediately below the "root" folder. All ECMAscripts files should have the extension "*.js".
All CSS style elements should be placed in a separate "style" folder which is located immediately below the "root" folder. All CSS files should have the extension "*.css". There should be separate style sheets to support the following browsers.
- IE 4, IE5, NN4, NN6, Opera and text browsers.
There should be separate style sheets to support the following screen widths and depths.
- 640 x 480, 800 x 600, 1024x768 or greater.
An ECMAscript can detect the type of browser and the display characteristics and link to the appropriate CSS.
If there are HTML files in "open" areas that do not contain meta data for search engines then these need to be protected with a META data NOINDEX statement or by entries in the "robots.txt" file. If there are folders which robots should not search then there should be entries in the "robots.txt" file.
Every "searchable" web page should have appropriate META data including date last amended, keywords and the description. All superflous META data generated by development tools should be removed.
All reference information subject to periodic change such as tariffs, contact names and telephone numbers which are used in multiple places within the web site should be referenced from an ECMAScript variable in a single ECMAScript file. This reduces maintenance and enhancement costs.
All comments should be removed.
Except in particular agreed instances animation should be implemented using DHTML, ECMAScript and animated gifs. Propriety technology such as Flash or Adobe pdf should be avoided. In some circumstances a browser dependent test can use IPFRAM or ILAYER (specifically for banner advertising).
A copy of the MS Site Server (Site Analyst) report should be supplied with the deliverables.
The error report should confirm there are no broken links.
The publishable index is appropriate as this is a good indication of how the site appears to automatic search engines.
All images GIFs, JPEGs and PNGs should be optimised for the web and be appropriate in size and colour depth for use in a web application.
No text in images with the possible exception of the main logo.
Images should NOT be used for "spacers" or other deprecated approaches which can be best implemented using a CSS construct.
Images should not contain leading or surrounding "spacer" space" use the CSS construct instead.
Where appropriate (such as icons) the images should be referenced in the CSS and not appear at all in the HTML.
Squares of a particular uniform colour should be constructed using a CSS SPAN construct not with an image.
Flash should be optimised, colours and templates not used in the final production version should be removed. The Flash files should be split into manageable sets of files to speed download.
<!-- Comment --> Tags should ALL be removed.
Title Tag analysis results shows the <TITLE> for each web page that will appear in the search engines. Each <TITLE> should reinforce the brand and advise the visitor to click through to the particular page in the web site. The title should be short and succient as overlong titles are truncated.
Meta Tag analysis results shows the important <META data for each web page. This is used by some of the major search engines. Each <META> should reinforce the brand and advise the visitor to through to the particular page in the web site. The keywords should be apposite and be supported by content with has been tagged with significant "header levels" and which has substance. Keywords which are supported by significant textual content should not be present.
Anchor Hyperlink Tag analysis results shows the <A> tags on each page. Every tag should contain "onMouseOver" and "onMouseOut" attributes. Significant links should have the "title" attribute to provie additional guidance to the visitor. Each link should have an appropriate TABINDEX and access code.
Deprecated Tag analysis results shows the presence of deprecated tags. Deprecated tags such as <B> Bold or <I> Italic should not be present. Note Strong is not deprecated.
IMG Tag analysis results shows the <IMG> tags on each web page. This should always contain "width", "height" and meaningful "alt" attributes. The "alt" tag should contain sufficent information to briefly describe the image to a person whose vision is impaired. For significant images the "longdesc" tag should be present.
DIV Tag analysis results shows the <DIV> tags on each page. Pairs should match. (Sometimes there appears to be some unmatched pairs where the closing tag might be hidden by other constructs such as comments). Unmatched pairs cause problems with browsers especially in deciding on layout and presentation.
TABLE Tag analysis results shows the <TABLE> tags on each page that do not appear to contain a "summary" attribute. Each table should have a "summary" attribute. The "summary" attribute should be on the same line as the <TABLE ...> tag. Where possible the TABLE tags should not be used for presentation effect, DIV and SPAN should be used instead. For browser compatibility with old browsers such as NN4 a TABLE sometimes is the only way.
- that there should be <NOSCRIPT> element for each <SCRIPT> element
- that each FORM element should have LABELS elements.
The performance of the web site will be reviewed using a 56 kb/s and a 28 kb/s modem.
The performance of the web site will be checked using IE5, IE4, NN6, NN4, Opera and text only browsers.
Text only tests will review the pages with all presentation of multi-media turned off.
Tests will be undertaken with RNIB and W3C sample CSS to ensure customers can use their own style sheets.
Tests will be undertaken to vary font text size and to ensure all is proportionate.
It is important to confirm the details relating to the deliverables and the tests that will be undertaken to ensure the deliverables conform to contracted for quality.
General design, style and layout guidelines which reflect the branding objectives are major deliverables. Design guidelines need to be produced to cover all the different types of pages and in particular define and agree navigation and content elements. Colours to reinforce target markets or users or geographical areas should be agreed and be consistent. Accurate spelling and correct grammar are essential to the perception of high value.
Deliverables
The deliverables should be zipped up in a single release file and published in a secure web site.
Tests
Each party needs to independently run the following tests prior to implementation in production.
Test 1 - Initial visual inspection
Test 2 - MS Site Server (Site Analyst) - Standard Checks
Test 3 - Image and Animation implementation
Test 4 - Tidy analysis
Tidy from W3C ("http://www.w3.org/") should be run using the following parameters.
// sample config file clean: yes indent: auto indent-spaces: 1 uppercase-tags: no
The error report should contain no errors.
Tidy should NOT find any deprecated constructs or need to move style elements.
Test 5 - HTML Tag analysis
Sed and Awk are used to extract particular tags and print them together with the web page where they are found. This allows all titles for the site etc to be checked.
Test 6 - CAST Bobby Tag analysis
"http://www.cast.org/bobby/" should be used to check the web site for accessibility. The objective is to meet or exceed the highest standard for accessibility.
Typically Bobby finds the following sort of issues:
Bobby usually suggests that additional manual inspection is undertaken.