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
- The page is based on one of the current CSU Libraries
templates.
- The page uses the current CSU Libraries SSIs for header, footer and scripts.
- The page has a unique title with this format: page name - subsite name - Libraries - Colorado State University.
- The page includes contact meta tags (author, and contact and email if necessary).
- The page has appropriate meta keywords and description tags.
- The page has exactly one
main heading at the top in an
h1
tag that includes the page name.
- The page file name
and directory names are friendly for humans and search engines.
- Names use 1-3 simple words from the page title. Avoid abbreviations, repeated words and stop words (and, of, the).
- Names use only a-z, 0-9, and - to separate words. Avoid uppercase, underscores and spaces.
- The page file extension is .html or .php. The directory index page is index.html or index.php.
Content (Writing for the Web)
- The page/site has clear communication goals, target audience and key calls to action.
- The content is as brief and concise as possible.
- The content is simple and informal, written in the language of the target users, free of acronyms, jargon and obscure words.
- The content is organized in an inverted pyramid (summary first, then details).
- The content is accurate, up to date, and credible.
- The writing style is objective and factual, not personal opinions or promotional marketese.
- The voice and tone use the CSU Brand Guidelines.
- The content conforms to the CSU Style Manual.
- Content overlap with other pages is minimal.
- The page has been optimized for search
engines.
- The page title and main heading (
h1
) accurately describe the unique content.
- The page title and main heading (
- The page content has been checked by automated tools.
- Spelling (Dreamweaver, FrontPage, Word, Orangoo, SpellCheck.net, Total Validator)
- Grammar (Word)
- Readability/reading level (Word, Readability Plus, SMOG, JuicyStudio/Flesch-Kincaid)
- The content has been carefully reviewed by at least one other person (ideally an expert on the page topic and a target user).
Navigation
- The page uses the appropriate Libraries
template and/or styles for navigation sections and types.
- If the page is a part of a group of pages, left navigation is used to link the pages together.
- If the page is long, in-page links are used in a top or right navigation.
- If the page has related links, they are included at the bottom or in a right navigation.
- External links are visually separated from internal links, or marked as external with a heading, image or style.
- The page is short to minimize scrolling, especially if the page is a subsite home
page.
- A very long page with sections should be divided into subpages.
- Hyperlinks are used
frequently in the page to facilitate navigation and scanning.
- The text of links clearly describes the target, e.g. not "click here", "more" or "next".
- Clickable elements such as image buttons appear clearly clickable and are not ignored by users as mere ads or decoration.
- Links to non-HTML documents specify the file type next to the link (e.g. PDF, Word, PowerPoint).
- Links to large documents specify the file size in KB or MB next to the link.
- Links open in a new window only in special circumstances (help, non-html, large image, interrupts a process) and clearly warn the user.
- Link URLs are relative or start with http://lib.colostate.edu/, not http://library.colostate.edu/.
- Links to a directory index end with / and do not include index.html.
- E-mail links point to the comments form, instead of using mailto:.
- E-mail addresses are displayed as e-mail images.
Formatting
- The page is formatted for scanning.
- Use brief paragraphs, in-paragraph links, bold text, highlighted text, large type, bulleted/numbered lists, tables, headings, images and captions where appropriate.
- Entire sentences or paragraphs are not formatted using boldface or italics.
- ALL CAPS are not used for emphasis, e.g. entire words, sentences or headings.
- The page uses Libraries styles and visual conventions of layout, fonts, color scheme, and graphical elements.
- Images are identifiable, attractive and high quality (brightness, contrast, hue,
saturation, cropping).
- Images use the right file format (jpg for photos, png or gif for solid areas of color).
- 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).
- Images are not resized using HTML. The HTML width and height attributes of every image match its true dimensions.
- The page displays properly for a variety of user platforms and conditions.
- The page displays properly in recent versions of major browsers (IE, Firefox, Safari and Chrome).
- The page works acceptably if styles, images and scripts are turned off.
- The page prints well (tested using print preview).
Coding
- The page has been converted to
XHTML or HTML5.
- The page has a DOCTYPE tag indicating XHTML or HTML.
- The page has exactly one set of
html
,head
andbody
tags. - All tags have closing tags, e.g.
</html>
, or end with/>
, e.g.<br />
.
- The page uses CSS styles instead of HTML
for formatting.
- CSS styles are used instead of formatting tags like
font
,u
,center
,br
,hr
, and
. Strong
andem
are used instead ofb
andi
for boldface and italics.- All images have
an
alt
attribute that is descriptive (or blank if merely decorative). - No other tags have HTML formatting attributes like
color
,bgcolor
,border
,width
andheight
. - Tables are used for arranging information in a table of rows and columns, not for page layout.
- Headings accurately outline the content. Section headings
use
h2
tags. Subsection headings useh3
tags.
- CSS styles are used instead of formatting tags like
- The page has been optimized for accessibility.
title
attributes are used on all tables, frames and forms, and on links requiring explanation.- Form fields have
label
tags withfor
attributes, and logical tab order. - Comments have no more than two dashes in a row,
e.g.<!-- ok comment -->
not<!----- bad comment ----->
.
- The page source code has been neatly reformatted by an editor like Dreamweaver or Visual Studio.
- The page code has been checked by automated tools.
- The page validates as HTML (XHTML 1.0 transitional or strict, or HTML5).
- The page has no broken links (LinkScan, W3C Link Checker, Firefox Link Checker, Chrome Check My Links).
- The page has been validated for CSS (e.g. W3C CSS Validator).
- The page has been validated for accessibility (e.g. WAVE, CynthiaSays).