Web Page Checklist

Use this printable two-page quick reference to create or modify CSU Libraries Web pages.

Click a link below for instructions on completing most checklist items.

Template

  1. The page is based on one of the current CSU Libraries templates.
    1. The page uses the current CSU Libraries SSIs for header, footer and scripts.
    2. The page has a unique title with this format: page name - subsite name - Libraries - Colorado State University.
    3. The page includes contact meta tags (author, and contact and email if necessary).
    4. The page has appropriate meta keywords and description tags.
    5. The page has exactly one main heading at the top in an h1 tag that includes the page name.
  2. The page file name and directory names are friendly for humans and search engines.
    1. Names use 1-3 simple words from the page title. Avoid abbreviations, repeated words and stop words (and, of, the).
    2. Names use only a-z, 0-9, and - to separate words. Avoid uppercase, underscores and spaces.
    3. The page file extension is .html or .php. The directory index page is index.html or index.php.

Content (Writing for the Web)

  1. The page/site has clear communication goals, target audience and key calls to action.
  2. The content is as brief and concise as possible.
  3. The content is simple and informal, written in the language of the target users, free of acronyms, jargon and obscure words.
  4. The content is organized in an inverted pyramid (summary first, then details).
    1. Headings are brief, descriptive summaries of the content that follows.
    2. Paragraphs are brief, use topic sentences and contain only one idea.
    3. Sentences are short and grammatically simple.
    4. Long lists are broken into groups or alphabetized.
  5. The content is accurate, up to date, and credible.
  6. The writing style is objective and factual, not personal opinions or promotional marketese.
  7. The voice and tone use the CSU Brand Guidelines.
  8. The content conforms to the CSU Style Manual.
  9. Content overlap with other pages is minimal.
  10. The page has been optimized for search engines.
    1. The page title and main heading (h1) accurately describe the unique content.
  11. The page content has been checked by automated tools.
    1. Spelling (Dreamweaver, FrontPage, Word, Orangoo, SpellCheck.net, Total Validator)
    2. Grammar (Word)
    3. Readability/reading level (Word, Readability Plus, SMOG, JuicyStudio/Flesch-Kincaid)
  12. The content has been carefully reviewed by at least one other person (ideally an expert on the page topic and a target user).

Navigation

  1. The page uses the appropriate Libraries template and/or styles for navigation sections and types.
    1. If the page is a part of a group of pages, left navigation is used to link the pages together.
    2. If the page is long, in-page links are used in a top or right navigation.
    3. If the page has related links, they are included at the bottom or in a right navigation.
    4. External links are visually separated from internal links, or marked as external with a heading, image or style.
  2. The page is short to minimize scrolling, especially if the page is a subsite home page.
    1. A very long page with sections should be divided into subpages.
  3. Hyperlinks are used frequently in the page to facilitate navigation and scanning.
    1. The text of links clearly describes the target, e.g. not "click here", "more" or "next".
    2. Clickable elements such as image buttons appear clearly clickable and are not ignored by users as mere ads or decoration.
    3. Links to non-HTML documents specify the file type next to the link (e.g. PDF, Word, PowerPoint).
    4. Links to large documents specify the file size in KB or MB next to the link.
    5. Links open in a new window only in special circumstances (help, non-html, large image, interrupts a process) and clearly warn the user.
    6. Link URLs are relative or start with http://lib.colostate.edu/, not http://library.colostate.edu/.
    7. Links to a directory index end with / and do not include index.html.
    8. E-mail links point to the comments form, instead of using mailto:.
    9. E-mail addresses are displayed as e-mail images.

Formatting

  1. The page is formatted for scanning.
    1. Use brief paragraphs, in-paragraph links, bold text, highlighted text, large type, bulleted/numbered lists, tables, headings, images and captions where appropriate.
    2. Entire sentences or paragraphs are not formatted using boldface or italics.
    3. ALL CAPS are not used for emphasis, e.g. entire words, sentences or headings.
  2. The page uses Libraries styles and visual conventions of layout, fonts, color scheme, and graphical elements.
  3. Images are identifiable, attractive and high quality (brightness, contrast, hue, saturation, cropping).
    1. Images use the right file format (jpg for photos, png or gif for solid areas of color).
    2. Image file sizes are as small as possible, using Photoshop's File | Save for Web and appropriate color palette, pixel dimensions and compression (under 100kb for enlarged images, under 10kb for thumbnails).
    3. Images are not resized using HTML. The HTML width and height attributes of every image match its true dimensions.
  4. The page displays properly for a variety of user platforms and conditions.
    1. The page displays properly in recent versions of major browsers (IE, Firefox, Safari and Chrome).
    2. The page works acceptably if styles, images and scripts are turned off.
    3. The page prints well (tested using print preview).

Coding

  1. The page has been converted to XHTML or HTML5.
    1. The page has a DOCTYPE tag indicating XHTML or HTML.
    2. The page has exactly one set of html, head and body tags.
    3. All tags have closing tags, e.g. </html>, or end with />, e.g. <br />.
  2. The page uses CSS styles instead of HTML for formatting.
    1. CSS styles are used instead of formatting tags like font, u, center, br, hr, and &nbsp;.
    2. Strong and em are used instead of b and i for boldface and italics.
    3. All images have an alt attribute that is descriptive (or blank if merely decorative).
    4. No other tags have HTML formatting attributes like color, bgcolor, border, width and height.
    5. Tables are used for arranging information in a table of rows and columns, not for page layout.
    6. Headings accurately outline the content. Section headings use h2 tags. Subsection headings use h3 tags.
  3. The page has been optimized for accessibility.
    1. title attributes are used on all tables, frames and forms, and on links requiring explanation.
    2. Form fields have label tags with for attributes, and logical tab order.
    3. Comments have no more than two dashes in a row,
      e.g. <!-- ok comment --> not <!----- bad comment ----->.
  4. The page source code has been neatly reformatted by an editor like Dreamweaver or Visual Studio.
  5. The page code has been checked by automated tools.
    1. The page validates as HTML (XHTML 1.0 transitional or strict, or HTML5).
    2. The page has no broken links (LinkScan, W3C Link Checker, Firefox Link Checker, Chrome Check My Links).
    3. The page has been validated for CSS (e.g. W3C CSS Validator).
    4. The page has been validated for accessibility (e.g. WAVE, CynthiaSays).