Web design Checklist

Design website using Sketch & Exporting to Zepplin:

• 2 versions of the homepage submitted to client via Invision App
• 2 versions of internal pages submitted to client
• Ensure Sketch files are in format required by developers
• Upload Sketch source files to Dropbox
• Upload photographs and other key elements to Dropbox

Developers to confirm they have received files and they are in good working order

Ensure logo/ branding guidelines are adhered to:

• Organise digital assets from client- logo, favourite colours, photography, PDFs, reports, and content
• Select imagery based on branding/ client feedback
• Choose icons/ graphic elements for site

• Check for incorrect punctuation marks, particularly apostrophes, quotation marks and hyphens/dashes 
• Check headings
• Check keyword density

• Capitalisation (especially of main headings) 
• Tense/Style of writing 
• Recurring/common phrases
• Variations in words (e.g. Australian vs US spelling) 
• Treatment of bulleted lists (e.g. periods or commas at end of each item)

When giving a critical eye to the pages within the site, ask:

• Why would I visit this page?
• Is the content ready for visitor?
• Does the page address the audience?

Remove all Lorum Ipsum place holder text.

Fill out the forms on the site and go through the following questions:

• Ensure the correct people (email addresses) are receiving the forms
• Do all forms have anti-spam installed?
• Once a user clicks the submit button are they redirected to the correct page?
• Are the form details accurate?
• Review mandatory fields.

Ensure a person who is 1-step away from the design process proof reads the text, buttons, layouts etc.

Does the site have a privacy policy or terms & conditions page?

Iben to create Favicon for various devices.

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

Make sure your website works on different screen resolution's and all devices.

Use these tools to check your site on different resolutions:

• Resizr
• Responsinator
• Studio Press
• Browser Stack

Check image pixelation on different displays, specifically high resolution displays like Apple's Retina Display.

• Are images appropriate?
• Are the image theme consistent throughout website?
• Do images have alt-tags/ titles (if budget allows)

Having a nice looking 404 page will assist in ensuring the visitor experience is improved. Especially when websites are being redesigned.

• Have a friend who has average computer skills to use the website
• Test the  website in-house
• Contact client and request they test the draft website out too
• Have a usability testing done via feedbackarmy.com and usertesting.com

Website performance is absolutely critical to overall user experience, especially given that users will all be using different devices.

Website performance tools:

• Google PageSpeed Insights
• Pingdom Website Speed Test
• Web page test
• Smushit (image optimiser)
  

Ensure the website works on different devices:

• Responsinator
• Responsive tester
• Resizr

Ensure website is cross browser compaitible:

• Browser Testing
• Browser Shots

Check that all the links in the new website go to the correct pages. This is especially important for website redesigns.

• W3 Link Checker
• Xenu

Set-up 301 redirects for pages that are no longer exisitng

Keyword Research

Install YOAST plugin

Titles and Meta Data:

Your page title is the most important element for SEO and is also important so that users know what’s on the page. Make sure it changes on every page and relates to that page’s content.

• Keyword to be in title
• Title tags ~65 characters or less? Title tags over this will be truncated in results.
• Add Meta description on a page by page basis
• Meta description tags need to be less than 155 characters

View section on SEO depending upon budget

Social Media:

• Set- Up Rich Pins
• Geo-location
• Schema mark-up
• Install and submit Sitemap.xml file to Google

Agree with client which social media accounts are important

• Set-up social media accounts
• Create branded images on all social media accounts
• Set-up social media syndication using IFTTT and HootSuite
• Train inhouse staff on social media if possible

Put clients website URL in email signature.

If you use a browser for emails, check out WiseStamp for Chrome and Firefox.

Installing a web analytics tool is essential.

• Google Analytics
• Google Adwords
• Clicky
• Piwik
• Bing Webmaster Tools

If budget allows then AB testing should be implemented.

• Google Experiments (part of Google Analytics)
• Optimizely 
• Visual Website Optimizer

The W3 Validator is a free tool from The W3C that will help you make sure your code is up to scratch.

Free Formatter has a list of a few more validation tools for different technologies.

Using an automated backup tool is essential incase things go wrong

• Backup Buddy by iThemes
• Synch by iThemes
• Wordfence (security)
• Sucuri (monitoring if budget allows)