Skip to content

Checklist and tools

Checklist

Building a site Mobile First isn't always possible: sometimes an existing site needs to be Responsively retro-fitted. Here are a few small steps to check that can kickstart the process.

  • HTML: <meta name="viewport" content="width=device-width"> added.
  • HTML: HTML5 elements used where possible, especially input types
  • CSS: used relative units (% and em), not px,where appropriate.
  • CSS: img { max-width: 100%; height: auto; } used for fluid images (and img { width: 100%; } for IE<7)
  • CSS, JS: minimise the number of HTTP requests by combining CSS files and combining JS files.
  • CSS, JS, Images: reduce sizes of CSS files, JS files, and images (minify them).
  • JS: HTML5 shim included (to provide support for IE < 9)
  • UX: special attention paid to navigation on smaller screens

HTML5 Boilerplate is an excellent starting point and contains a lot of best practice guidance in the documentation. Listed below are a few more items that I found useful.

HTML

  • html element has lang attribute
  • meta elements present: charset, description, copyright.
  • semantic markup used, especially for new elements : section, article, header, footer, nav
  • Document outline checked:
    • each section, article, has a header
    • Use hierarchical headers (h1 > h2 > etc.) for best result on screen readers
  • All images have alt attribute
  • form fields have labels, labels have for attributes
  • link rel=“author” added for author photo in SERPs
  • Metadata added: Microformats; Schema.org; Google's Rich Snippets.

CSS

  • No inline CSS used
  • CSS3 used instead of images where possible
  • CSS sprites used
  • All a styles applied: link, visited, hover, active, focus.
  • Don't rely on background-images for background and color contrast: use background-color too.
  • background-images applied using data-*URIs? Be aware of IE
  • :focus styles applied
  • Visually hidden items don't use display: none

JavaScript

  • Applied using Progressive Enhancement.
    • try and avoid inline JS
    • site functions without JS
    • JS used to add any extra markup that it needs
  • scripts mostly placed at the bottom of the page
  • Modernizr used for feature detection (YepNope.js, included in Modernizr, used for conditional loading of JS and CSS)
  • JQuery added only if necessary. Plain JS or microframework used instead?
  • Google Analytics added
  • Used lazy loading where appropriate.

UX

  • User interface conventions followed
    • Logo links to home page
    • Search is displayed top right
    • Home is included in navigation
  • Pages have meaningful Titles
  • Navigation
    • Well prioritised according to user goals
    • Navigation by browsing checked
    • Navigation by searching checked
    • Current location is highlighted, path is shown
  • UI controls consider the user's device's form factor, and scale with the device
  • Visual hierarchy checked
    • Clarity and consistency
    • Calls To Action are clear (e.g. Contact details in the footer)
    • Content is prioritised over navigation
  • System status
    • always clear
    • immediate feedback given, while next resource loads
    • Messages for error prevention and error recovery have been checked, and are written in user's language.
    • Button labels are specific to the action, rather than generic "submit."

Accessibility

  • Links
    • text indicates the nature of the link target, is not “click here” or “read more”
    • text is unique on the page
    • are displayed underlined
    • are not given title attributes
  • WAI-ARIA landmarks used: banner, main, contentinfo, navigation, complementary, form, search
  • aria-labelledby used (if text visible) or aria-label used (if text not visible) for navigation roles, especially repeated ones
  • Keyboard navigation checked - page can be navigated by tabbing through links
  • accesskeys added for navigation
  • colour
  • WCAG guidelines followed: WCAG 1.0, WCAG 2.0

Other

  • Use Grunt for running tasks (such as minification, concatenation, and optimising images). View my (work in progress) Grunt set up on GitHub.
  • Use Caching
  • Images
    • img only used for images that convey information. All others in CSS as background-images
    • Optimised (e.g. JPEGmini)
    • PNGs preferred to GIFs
    • Icon fonts used where possible
  • favicon and apple touch icon(s) added in web root
  • Sitemaps added
    • Page for humans
    • sitemap.xml for robots
  • robots.txt added
  • humans.txt added

Mobile

  • Text checked: font size, line height, readability, legibility
  • Link targets checked: size (44px x 44px is a good minimum), spacing, distinction from other text
  • Page lengths checked
  • Portrait and landscape orientations tested
  • Content first, navigation second
  • Forms checked: short, labels at top
  • Touch support added as part of Progressive Enhancement strategy (e.g. used Modernizr.touch, Hammer.js).Gestures made obvious, hints provided.
  • Telephone numbers made tappable
  • Scott Jehl’s Device Bugs Issues on github checked, updated if applicable
  • Tested over Wi-Fi, 3G, EDGE/GPRS

WordPress

Tools

Cody Lindley has an excellent list of tools for Front-End development. A lot of other tools such as validators are built in to applications such as CodeKit (Mac only).