Updated FED checklist

checklist.md

FED Checklist

Planning / Design

HTML

Images

• Use as few as possible, so that your page loads faster and costs your users less data.
• Use the best format for your image (the one that gives the smallest file size, while retaining image quality): SVGs; JPGs (for photos, images with many colours); PNGs (for images with fewer colours); GIFs (for animations).

CSS

• Try using a style guide like SMACSS, OOCSS, or BEM to help future you or team members figure out what's going on more quickly.
• Be careful with web font usage. More weights and more fonts can mean a heavier, slower, site.
• Design for a range of CSS and JS support. Browser support for various features can vary wildly.

Responsive Web Design

• Use a fluid grid: think in proportions, not pixels. Think about how the design will change over various screen sizes. Screens come in a wide range of shapes and sizes.
• Design Mobile First. Start with a small screen size, assume harsh constraints, and work your way up from there. This forces you to make hard decisions early.

Development

HTML

• Validate your HTML to make your code follow W3C standards and check for errors.
• Use HTML5 elements like section, article, header, footer, and nav, to get accessibility and semantic benefits.
• Use HTML5 input types like search, email, and date to get accessibility and semantic benefits, and to get enhanced functionality in browsers that support it.
• Add Schema.org markup to give your data structure, and help search engines index your content properly.

Images

• Optimise your images to reduce their file size, so that your page loads faster and costs your users less data.
• Make sure every image has alt text for accessibility, in case images don't load, and for SEO.
• Use srcset and sizes to provide the most suitably size of image for the user's device. If you need art direction (different crops of images) use the picture element.You can use Picturefill to enable support for picture in browsers that don't support it yet.

CSS

• Don't use inline CSS (using the style tag or style attribute on HTML elements): use external stylesheets (using the link tag). This makes your document smaller, and allows all pages of your site to share one CSS file. (The exception is for critical CSS: initially sending a small amount of CSS in the head of the document so that page rendering starts as early as possible.)
• Lint your CSS to check for errors.
• Use CSS instead of images where possible to save your users' data costs.
• Provide fallbacks for CSS features: px for rem units; rgb for rgba, suitable background-color for background images, png for svg images to support as many browsers as possible, not just the newest, shiniest ones.
• Keep selectors simple to read and maintain. Use shallow class selectors or element selectors. Don't use IDs or over-qualify selectors (use .latest instead of div.latest).
• Serve a base stylesheet to all browsers. Then use media queries to serve fancier styles to fancier browsers.
• Make sure you supply a suitable fallback font for any webfonts so that if your webfont fails to load, your site is still usable.

Responsive Web Design

• Use % instead of px in grids so that your grids are fluid.
• Make your images responsive. Use max-width: 100%; height: auto; so that your images are fluid.
• Use media queries to adjust elements of your site over varying screens sizes.
• Use min-width rather than max-width media queries, and use em for breakpoints rather than px.

JavaScript

• Don't use inline JS (using a script tag or directly on an HTML element): include external JS files (using the src attribute on a script element). This makes your page smaller and allows all pages of your site to use one JS file.
• Hint your JS to check for errors.
• Consider using a style guide to keep your JS consistent.
• Place script elements at the bottom of the page, or load them asynchronously by adding the async attribute to the script tag. This means that the JavaScript files won't block loading of the page.
• Use feature detection (possibly using a library like Modernizr) rather than device detection. Feature detection is more reliable and appropriate.
• Consider carefully if a feature is worth polyfilling. Would it be better to apply a technique like cutting the mustard, and serve a simpler, faster, experience instead?
• Consider carefully if it's worth adding jQuery, or whether you can use regular JavaScript instead. jQuery is quite large, and the parse and execution time, especially on mobile devices, can be costly Check out You might not need jQuery.
• Consider carefully if it's worth adding a jQuery plugin for a feature, rather than writing a smaller amount of code yourself. Plugins add weight to your page and another abstraction to your code base. Check out You might not need jQuery Plugins.

Performance

• Make sure gzip compression is enabled on your web server. This has a huge impact on the size of the files being transferred.
• Use PageSpeed Insights to get some ideas for performance optimisation from Google's list of guidelines. This will help you make your site lighter and faster.
• Use WebPageTest to measure your site's performance and get stats that let you compare your site with new version and with competitors. This will help you make your site lighter and faster.

After (a phase of) Development

CSS

• Reduce sizes of CSS files by minifying them. This reduces file size.
• Minimise the number of HTTP requests by combining CSS files. For performance reasons, we prefer fewer, larger, files to many, smaller, ones: latency is the current bottleneck.

JavaScript

• Reduce sizes of JS files by minifying them. This reduces files size.
• Minimise the number of HTTP requests by combining JS files. For performance reasons, we prefer fewer, larger, files to many, smaller, ones: latency is the current bottleneck.

Performance

• Use PageSpeed Insights to get some ideas for performance optimisation from Google's list of guidelines. This will help you make your site lighter and faster.
• Use WebPageTest to measure your site's performance and get stats that let you compare your site with new version and with competitors. This will help you make your site lighter and faster.

Tools

• HTML Accessibility testing: WAVE online testing tool, Pa11y, and Tenon.
• Image optimisation: Kraken
• CSS Linting: csslint
• CSS Minification: cssminifier
• Get CSS stats and look for improvements: cssstats and stylestats.
• JS Hinting: JSHint
• JS Minification: jscompress.

Image optimisation, Linting, Hinting, and Minification are also possible using plugins for editors like Sublime Text, Atom, CodeKit and Prepros, or by using a build tool like Grunt or Gulp.