Web design checklist
Attention points to check off before launching a website.
It’s easy to lose track of all the little attention points when optimizing a website. This list helps me to check off each point. The list is by no means exhaustive and not every item is required all the time, but it’s a start. It’s a checklist, not a tutorial on how to build websites and it assumes you have some basic understanding about accessible web design: make sure your site works without JavaScript, 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 a 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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title><title>
</head>
<body>
</body>
</html>- Decent CSS:
- No browser dependent hacks.
- Never use JavaScript to load styles.
- Use only external stylesheets so these can be cached (no more than 8kB).
- Write general CSS, be aware for ‘classitis’.
- Different colors for visited links (a:visited).
- Check your site’s 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.
- Think about SEO:
- Google Sitemap
- robots.txt
- Google Analytics
- Use rel="nofolow" for links in the comments
- Technorati
- Add description and keywords meta tags.
- Add DC meta tags.
- Add OpenSearch tags.
- Performance:
- Count HTTP requests.
- Check image file sizes.
- Optimize include files (get rid of spaces in CSS or JavaScript files).
- GZIP the output.
- Use the expire cache in Apache.
- Move JavaScript to the bottom of the page where possible.
- Check content.
- Verify licenses.
Resources
- Software to check foreground & background color contrast.
- More color contrast checking tools to improve the accessibility of your design.
- How does your website look to a color blind person?
- Sim Daltonism, a color blindness simulator for Mac OS X.
- Yahoo! YSlow, an extension to check site performance.
- Website Performance Tool and Web Page Speed Analysis.