Published by Simon Schoeters

Webdesign checklist

If you try to make the best out of a website you it's easy to loose track of the stuff you checked and the ones you missed. This list should help me not to forget the small optimizations next time. This list is by no means exhaustive and not every point is needed in every situation but it's a start. It is customized for my own web development projects but it could be a start point for your own checkpoint list as well. Note, this is a checklist, not a tutorial on how to write websites and it assumes you have some basic understanding about accessible webdesign (make sure your site still works with JavaScript turned off, split your HTML structure from the layout, etc).

  • Write correct semantic HTML
    • Use a strict doctype
    • Define your document language
    • Define your content type for the XML and once more in the head
    • Use microformats where possible: hCard, hReview, XFN, etc.
    • Validate your finished page (or have reason why it does not)
    • Correct HTML elements for the right content, did you know the <samp> element?
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en" lang="en">
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  • Decent CSS
    • No browser dependent hacks (if possible)
    • Never use JavaScript to load styles
    • Use only external stylesheets so it can be cached (no more then 8kB)
    • Write general CSS, be aware for ‘classitis
    • Different colors for visited links (a:visited)
  • Check your sites browser compatibility
    • Internet Explorer
    • Firefox
    • Opera
    • Safari
    • Lynx
    • Mobile devices
  • Accessibility
    • Still readable for people with color blindness?
    • Enough contrast between text and background?
    • Test with larger font sizes
    • Add a 'last updated' date
  • SEO or Search Engine Optimization
    • Google Sitemap
    • robots.txt
    • Google Analytics
    • Use rel="nofolow" for links in the comments
    • Technorati
    • Add the description and keywords meta tags
    • Add DC meta tags (optional)
  • Performance
    • As HTTP requests
    • Check image file sizes
    • Optimize include files (get rid of white spaces in CSS or JavaScript files)
    • GZIP all your output
    • Use the expire cache in Apache
    • Move JavaScripts to the bottom of the page where possible
  • Content
  • License, check the CC licenses
  • Nice extra's
    • XML
    • JSON
    • OpenSearch

Missing something? Write a short comment so I can add it to the list.


Read more

This blog post is open source. Did you spot a mistake? Have any ideas for improvements? Contribute to this post via Github. Thank you!