Your website is complete, but is it! You need to have a website checklist and here are some things you should use and look for.
Woorank.com
A great place to start to get a baseline for this website checklist is Woorank which gives advice based on Google Website Rank.
Building websites is a glamorous business, but at the end you still need to consider if that website is usable and works in most browsers. I’ve built this handy checklist based on some web searches and from personal experience. Feel free to add suggestions in the comments. I want this list to grow!
Before the list, and before you do anything else, get Firefox for your website quality control testing. Add ons like Web Developer, Firebug, and Dust Me Selectors will make your job a breeze. FF even has W3 Validation Tools linked in Web Developer.
W3 VALIDATION
- Markup validation service http://validator.w3.org/ for HTML and CSS
- Check your WAI WCAG and Webstandards.govt.nz compliance (thanks @kaupapa for this one!)
Two great online website checkers (thanks @morganpyne!): Launchlist and Symfony Deployment Checklist.
DESIGN
- Zoom in and out on your web design in the browser. Firefox is especially good at exposing errors here. For example, I was working on a site just this week that looked great when I was at 100% and zooming in, but the layout broke when I zoomed out – this was because the layout depended on an exact width and 1px gaps to function correctly. Fix was to refigure the math/width of the entire site so that it could flex with these small size shifts on zoom out. Thanks to @djmc for reminding me about this little nugget.
- Styleguide – does the client have a Styleguide and, if so, did you follow it? If not, revisit and make the appropriate edits. Ask yourself why you didn’t follow it in the first place. (Wink.)
It’s not as easy as you thought, is it?!
INTERACTION DESIGN
- Originally defined by Alan Cooper, and others, Interaction Design is the “Bones” under the “Skin” of the website that is Graphic Design. Consider your website’s primary objective. Have you made it as easy as possible to do that one thing? If not, go back and do some Interaction Design to get it right.
FAVICON
- Must be .ico format, but you can save out a transparent png at 16×16 and then rename it .ico for a good result. There are websites out there that will do this conversion for you from nearly any file format.
BACKUP
- FTP version, local copy, offsite backup
- Test and develop locally, never on the live website server. You can take the entire website down and then have no recourse. Why give yourself this stress?
- Use some kind of versioning software especially if you’re working with more than one dev on a project. Commit that code explicitly so anyone can tell what you’ve just done.
- Create a print specific stylesheet to eliminate excess elements a user might not want
MOBILE DEVICES
- Remember that your sweet website might just break when presented with the tiny aspect ratio that iPhones, Android, Blackberry’s and the like put in your way. I find that if the main content area is around 800px, it’s easy for a user to double tap and focus on this content.
- Avoid Flash if you want most mobile devices to be able to see your website content. Even Android requires a 10.1 Flash update in order to see Flash content.
Happy Testing!
