Monday, 27 November 2017

Website Quality Assurance Testing Guidelines

Halloween pumkins line up at the Park on Belsize Drive
This document is comprised of two sections:

  • Quality assurance testing process for the HTML framework of the site including the elements that define the structure of the pages, the user interaction with the web presence and the content design
  • Quality assurance testing process for the front-end functional design components associated with the site that provide enhanced features.


Visual Design
  1. Site Design Principals
    1. Templates that form the building blocks of the web site as a whole are created and tested prior to site development
    2. Templates are viewed and tested in target browsers identified for the site to identify and address quality prior to the overall site build.
    3. This system is flexible enough to permit global changes to be made to template properties during subsequent stages of development
    4. The cascading style sheets file have been created and is functioning
    5. A StyleGuide has been created
    6. Established and agreed conventions that describe site architecture, directory naming, file naming, and version controls are followed during the development process.
      The consistency that these conventions foster contributes to the overall quality of the site.
    7. Template tested on all identified target client browsers to meet Lowest Common Denominator standards and the functional range of these browsers
      Sites are designed according to the Lowest Common Denominator (LCD) method.
      Under this methodology, an acceptable Lowest Common Denominator client side configuration is identified (and documented in the Project's Technical Brief), and all site components are developed to be functional for the LCD.
    8. If and when additional functionality is added to the LCD framework, the site is designed to degrade efficiently to the LCD configuration for users who are unable to take advantage of the enhanced features.
    9. Pages convey their message and navigate easily, even without graphics. Not everyone browses graphically. Can users, whether of necessity or by choice, who don't browse graphically still read the page.
    10. Usability assessments are made on the templates to ensure usability objectives are met.

  2. Page Template
    1. Template has been created according to standard HTML coding conventions
    2. The placement and appearance of key features is clear
    3. Page grid layout for the content areas and layout pattern is clear
    4. Relative-width tables automatically size themselves to fit your reader's browser window
    5. Fixed-width tables do not force readers to scroll sideways to read your page.

  3. Typography
    HTML type consistency in style, size, colour, treatment:
    1. headers
    2. subhead
    3. call outs
    4. decks.

  4. Colour Palette
    1. Colour combinations follow the StyleGuide
    2. Colours resolve on identified monitor resolutions and colour/chroma schemes.

  5. Graphic Treatment
    1. All images are present, optimized and display as intended.
      images include graphics, photographs, illustrations.
    2. Photographs are clear
    3. Borders are not broken
    4. bullets style is consistent
    5. graphic identifers are visible
    6. Illustration and graphic treatment.

  6. Navigation Elements
    1. The navigation is visible and the style is consistent
    2. Link colour, style, size
    3. VLink colour, style, size is consistent
    4. ALink colour, style, size is consistent.

  7. Site Build and Content Population
    1. An HTML validator has been used to identify and help correct any inconsistencies in the page's HTML
    2. The page weight has been measured to indicate whether the page may exceed allowable download times as identified in the design criteria.
    3. Any deficiencies in site quality encountered during the design, site build and content population phase of the development process will be addressed prior to hand off to development and be checked during subsequent phases of the quality assurance process.

  8. Link Checking
    1. Link checking tool evaluation.
      This tool identifies all broken links, and creates a list that developers may refer to.
      The end result of the link checking / fixing process is a site that has no broken links.
      It should be noted that although there may be no broken links on the site, this does not guarantee that there are not missing links, or links that are incorrect. These issues are addressed during subsequent phases of the quality assurance process.

  9. Content Checklist
    Before content goes on the site, it has been checked for grammar, tone, and consistency with the site style guide. After it goes on the site, it needs to be checked for the following:
    1. Spacing
      - often, when text is moved to HTML, word spacing is changed. Spaces are sometimes left out, sometimes added, between words.
    2. Spelling
      - often, when text is moved to the Web site, spelling errors are created when adding HTML tags or when copying and pasting.
    3. Punctuation
      - often, when text is moved to the Web site, punctuation errors are created when adding HTML tags or when copying and pasting.
    4. Character coding
      - often em-dashes, trademark symbols, and other special characters are incorrectly coded. A code check is required to be sure these are correct. (For example, ™ is the symbol for a trademark; TM is incorrect.)
    5. Relevance
      - make sure the content appears on the correct page, according to the site map. Also, be aware of "cut and paste" artifacts, when non-relevant material is attached to an end of the relevant material.
    6. Presentation style
      - emphasis of texts needs to consistent. For example, if book titles are presented in a separate color, they must always use that color. Often these are missed when being coded. Titles, subtitles, and other text items should also be consistent. (These can all be controlled using a well-defined style sheet.)
    7. Linking
      - links should not include leading and trailing punctuation or blank spaces.
    8. Pagination - back to top links should be used when readers have to scroll to find information. While these links can be (and usually are) added before the text appears in a template, they need to be double-checked once the page is live, for accuracy of placement.
    9. Completeness
      - every page listed on the site map needs to be viewed to ensure the correct content is appearing. Dynamic copy (for example, product descriptions) also needs to be reviewed.
  10. Multimedia components
    1. animated graphics
      Files function on identified platforms.
      The quality of the files are acceptable.
      The file sizes are acceptable.
    2. Imagemaps
      Files function on identified platforms.
      The quality of the files are acceptable.
      The file sizes are acceptable.
    3. sound files
      Various formats are available.
      Files function on identified platforms.
      The quality of the files are acceptable.
      The file sizes are acceptable.
    4. video files
      Various formats are available.
      Files function on identified platforms.
      The quality of the files are acceptable.
      The file sizes are acceptable.
    5. FLASH files
      Various formats are available.
      Files function on identified platforms.
      The quality of the files are acceptable.
      The file sizes are acceptable.
    6. Streaming and carrier issues have been addressed.

  11. Usability
    1. A final assessment of usability of the overall site and of its constituent components is undertaken.
    2. Human usability experts assessment.
    3. Identified issues are discussed, documented, addressed, and submitted for revisions
    4. Template passes usability assessment.

  12. Revisions
    Revisions to resolve the issues identified are undertaken.



    Functional Design
    The term functional component is used to refer to an infinite array of enhanced web site functionality components.
    These will have to be identified in the Project Brief.
    Examples of these enhancements in the design area cascading style sheets, Java applets, client side scripts, and CGI programs.

    When HTML web sites include functional components the testing / quality assurance process described above must be expanded to include tests to validate the components' functionality as "stand alone" entities and as integral components of the site.
    1. Functional components that are embedded in the template tested:
      - JavaScript rollovers
      - browser detection scripts
      - XHTML
      - XML
      - visual layout of submit forms
      - Java Applets
    2. Template reviewed / approved by developer peers
    3. Template reviewed / approved by technical managers / directors
    4. Developers fully understand template structure and use template to propagate site
    5. Human testers check copy location, editorial, hypertext properly links to correct content, content is complete as per content plans, look and feel is continuous — template has not been corrupted
    6. All identified issues are documented and submitted for revision.


      Revisions
    1. Revisions to resolve the issues identified are undertaken
    2. Steps are repeated in order to converge on final product that meets quality criteria.
    3. All issues identified are addressed
    4. The client zone has been updated and client has access to staging sites.