Web developer's checklist
WORK IN PROGRESS.
An ongoing list of essential tasks and best practises for web development.
I plan to add to this over time, with the eventual aim of going into some detail about the arguments for and against certain approaches.
- Make interactive elements (buttons, links, form fields) large enough for clumsy fingers to target on a touchscreen.
- Put frequently-used interactive elements in ergonomically appropriate locations for smartphone users.
- Include a back-to-top button.
- Write styles for the smallest device width first.
- Don't implement hover styling until you're writing the media queries for desktop devices.
srcsetfor image optimisation.
- Add the following meta tag to ensure the site displays correctly on mobile devices
- Ensure link text is sufficient to describe the link out of context.
- Follow these guidelines for image alt text.
aria-labelto name interactive elements where the existing label or content does not sufficiently describe the element for a non-sighted user.
- Use a contrast ratio checker.
- If color plays a significant functional role in the website, check that the pallette is color-blindness friendly.
- Make use of the WAVE web accessibility tool.
- Test your site with a screenreader such as ChromeVox.
- Use the Chrome accessibility dev tools extension to audit your site.
- Use Modernizr, with HTML5Shiv included.
- Test using BrowserStack.
- W3C validation.
- Minify as much code as you can.