The presented design should consist of two components: A style guide and an HTML prototype. Because the HTML prototype is typically reworked after the CMS implementation has already started, process notes should be added.

In This Topic

 

Style Guide

The design settings that influence the appearance of the website should be described. These are developed and defined in a style guide. Exceptions for pages or page parts in specific areas of the website should be included. The design defined in the style guide should include:

  • The structure of the website
  • Design:
    • Screen partitioning
  • Navigation
  • Use of background colors and background images
  • Typography
    • Color
    • Type
    • Size of the main font types (H1, H2, H3, P, and so forth)
  • Buttons:
    • Default
    • Mouseover
    • Mouse click
    • Etc.

 

 

Back to top

 

HTML Prototype

Every page template requires a correctly developed HTML variant (files and cropped images). The HTML should meet common frontend development criteria such as:

  • Uses XHTML 1.0 Transitional or Strict code. XHTML 1.0 Strict is preferred and required for government websites or websites that have to meet WCAG criteria.
  • Derives all style information from stylesheets in separated .CSS files.
  • The CSS and JavaScript meet the W3C guidelines and do not cause errors in the target browsers.
  • Works properly in the latest versions of Internet Explorer, Firefox, Chrome, Safari and other compliant browsers.
  • Is suitable for inline editing purposes and/or a separate inline editing HTML set should be provided.
  • Passes the W3C validator (http://validator.w3.org)

 

Back to top

 

Process

Make sure that an HTML prototype and style guide delivery has:

  • A version number and version date
  • A change log/release notes that details which files have been changed for what purpose

 

Back to top