CPSnet Web Awards Program, awards for sites skies above.

Skip to main content

• Back
• Home
• Site Map
• Design Criteria

CSS is not supported or is currently disabled. The page is still completely usable.

Design Criteria

Created 2003-01-30. Reviewed 2005-04-25: Added clarifications and requisites for children' sites; Reworded the item in our Privacy Policy regarding "Children Privacy Protection".

If you wish to print this page for offline reading, you can load this page in a printer-friendly format. After printing, just hit refresh or reload the page in your browser and the standard stylesheet will be reloaded.

Our design-oriented award will be given to sites that present a great overall balance of design, layout, well-optimized graphics, download time, friendly and functional navigation, browsers and platforms compatibility and overall professional appearance, originality and maintenance.

Note: If your site is build entirely in Flash or similar technology or if it makes intensive use of DHTML, it will be reviewed and evaluated using a different criteria set, used only in this case. The "Flash Criteria Set" can be consulted here.

Fundamental questions our evaluators will ask when looking at the design of a site are detailed below and address the following areas:

• Usability
• Navigation
• Visual Impression
• Accessibility
• Expertise

• Top

Usability

• Is the content of the site organized in a way that makes sense? Are the blocks of information organized in a logical way?
• Is your site easy to read? Are short sentences, short paragraphs, headings and bulleted lists used so that the content can be easily scanned? Limit the width and height of blocks of text, the size and number of graphics and the use of scrolls that cause distraction. Never use scrolling text to convey important information.
• When working with a standard 800x600 screen resolution, is important content, such as navigation, search boxes, for instance, visible without the need for scrolling?
• Are pages not too long and not requiring excessive vertical scrolling? Are there links to the top of the page placed at regular locations down the page? The vertical scrolling issue is especially pertinent in the entrance page of the site.
• Do the pages accommodate to several screen resolutions and color depths?
• Are all components of the site, like forms and scripts, functioning without errors?
• Does the entrance page of the site loads in a reasonable time (no more than 60 seconds)? If not, does the content of this page justifies it and are visitors informed of the expected time for completion?
• If the site entrance is a Flash animation, is there a skip intro option?
• Is there a text version of any important Flash, image-based, video or audio content provided?
• If music or sound is used in the site, is there an off switch, or a volume control, allowing your visitors to turn it off?
• Is the file size for downloads or large graphics always indicated? Are large images available by means of a thumbnail gallery?

• Top

Navigation.

• Is the navigation instantly perceived as navigation? Are there other elements in the page that can be confused with links? Avoid underlined text, most of the times it will be confused with links.
• Does the site use consistent navigation? Are the navigational elements placed at the same location(s) in each and every page of the site? When you use global navigation, visitors develop a sense of familiarity with your site because the site navigation, as well as the site itself, is consistent .
• Is there always a navigational element present? Never leave your visitors reach the page's end without some link(s). Always make sure there is at least one relevant link at the bottom of a page.
• Is there a link to the home page on every page in the site?
• Is any critical information, like a contact page, directly linked to in the navigation system in each and every page?
• Is there a quick and efficient method of navigating between related pages on the site, for instance, a site map?
• Links:
  • Are links underlined, whenever possible confusion with regular text is possible?
  • Are all links, including visited links, clearly defined with a unique colour?
  • Are there meaningful text labels for all text links and images used as links, by means of title and alt attributes?
  • If icons or other images are used for navigation, is their meaning clear? Ensure that you do not rely on mouseovers to label links.
• Is your site easy to navigate, i.e. can your visitors quickly get to the information they are looking for, i.e. in no more than 3 mouse clicks?
• For large sites, is there a search tool?
• Does the site have a meaningful and helpful 404 error page that works from any depth in the site?
• Are there navigational clues? Are the most important links clearly emphasized? Try to provide links to related information at the precise place that the user may need it or have interest to follow.
• Is the mouse (or other pointing devices) standard behavior and cursor appearance not changed? It is advisable that you do not disable the mouse's right button, put something following your visitor's mouse cursor or change the way it looks.

• Top

Visual impression.

Visual appeal is nearly always influenced to some degree by personal preference. However, there are specific design qualities that can be evaluated:

• Is your site appeasing to the eye? Is the page layout balanced, clean, and uncluttered?
• Are your eyes directed to the content or important page elements?
• Is the page layout and use of color, fonts and images consistent throughout the site?
• Are there less than three to four fonts used in the design of each and every page?
• Are there a moderate number of colors used in the design? Are the color combinations pleasing and appropriate for the site's purpose?
• Is the use of center-aligned text avoided? Is text contained in narrow columns or table cells not justified?
• Are all the images and graphics appealing, appropriate and relevant to the content of the site?
• Is the use of animated or flickering images minimized or completely avoided?
• Are images of good quality and properly optimized, i.e. the best possible quality-size ratio was attained, without noticeable lost of quality? We will randomly check the size in bytes of some images and will compare it to its theoretical size (width x height x bpp, bpp is 1 for gif and 3 for jpeg images): an image is considered optimized if its size in bytes is not more than [width x height x 0.75], without noticeable quality loss.

• Top

Accessibility.

• If support for CSS is not present or is turned off, is the site still usable?
• Is your site usable when scripts or applets are not supported or its support is turned off? Limit the use of Java applets, VBscript, Javascript and other client-side programmatic elements.
• Is the visitor notified early of any plugin requirement, including Flash Player, as well as any eventual requirement for a Java, Javascript or VBscript support? A link for the plugin(s) provider(s) must be available if this is the case.
• Is your site not relying on any technology not commonly used and widely available, to be fully used? Is information concerning any special browser or plug-in requirement clearly visible and easily understood?
• Do all link phrases make sense when read out of context and provide relevant information about the link destination?
• Do all link phrases using the same description have the same link destination?
• Are alt attributes used for all descriptive (contextual) images?
• If client-side image maps, icons or other images are used for navigation or links as described above, are there equivalent text links provided in the same page? Ensure that no server-side image maps are used.
• Is the text clearly legible? Ensure sufficient contrast between background and text. Never place text on top of busy backgrounds.
• Besides text, is there appropriate color brightness/contrasts for all the remaining elements in the page?
• Is color alone never used for critical information ? Never rely on color to convey any important information, like "click the red link to read our privacy policy".
• Is the text size not fixed, i.e. is it possible for the user to change the text size using the browser corresponding option?
• Does the site use accessible forms?
• If present, are all form fields correctly labeled and organized in a logical order?
• Does the site use accessible tables? For data tables, identify row and column headers. For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.
• If using tables for layout, are those tables clearly identified as such, by using the attribute summary=""?
• Is your site usable and the content legible if tables are linearized?
• If using frames, is there a noframes section containing the text equivalent of the frames section?
• Is the content accessible and the site usable with images switched off or not supported? (text-only browsing)?
• Is the site cross-browser and cross-platform compatible? Your site should be visible and usable, without noticeable changes, in the major operating systems and browsers and usable in other not so common combinations of equipments, operating systems and browser.
• Are there any keyboard navigation features, like accesskey or tabindex attributes available in the site? Is the site usable without a mouse?

• Top

Implementation Expertise.

• Standards Compliance.
  • Does your site use a correct Doctype?
  • Is your site's code validated by a reliable HTML validator such as those provided by the W3C or the WDG?
  • Does your site use CSS for all presentation aspects (fonts, color, padding, borders etc)?
  • Is the CSS validated and error-free?
• Search Engine Optimization.
  • Is your site easy to find?
  • Is it listed at some of the most important directories (e.g. ODP, Yahoo, Looksmart)?
  • Does it appear within the first 30 results in Google or Altavista, for instance, when using some key phrases related to the site's theme and/or content?
  • Relevant metadata information about the site's structure, content and author is present?
• Meta data optimization. Are the following limits respected:
  • Title tag: No more than 60 characters including spaces;
  • Description tag: No more than 150 characters including spaces;
  • Keywords: No more than 900 characters, including spaces and no keyword is repeated more than three times
• Good Web Designing Practices:
  • Is there a clear separation between structural and presentational elements?
  • Is the code well structured?
  • Are there any Javascript, VBscript, PHP, etc, errors?
  • Does your site have any broken links?
• Personalized features:
  • Is the domain name personalized and easy to remember? Is the main email address used for contact, related to the domain name?
  • Are the error pages (namely the 404 "not found" error page) customized to fit the site's design?
  • Are any mail form processors customized to fit the site's design?
  • Are the search result pages customized to fit the site's design?
• Third-party reviews:
  • Does the site displays ratings or reviews of its content?
  • Does the site displays awards it has won?

See in the "Design Scoring" how this review translates into a score.

• Top