Early website checklist

Basics

• Make sure all team members are aware and understand this document before the start of the project.
• Do not start final testing until all team members have finished work (all tasks in issue tracking system are marked as done or in review). That doesn’t exclude preliminary testing when reviewing the completion of tasks.
• Allocate time for bug fixing between the end of development and publishing
• note that same of the items on the checklist below are only feasible after publishing
• testing is primarily split between:
  • general good practices
  • compliance with all project requirements and approved changes (hard to gauge)
  • compliance with design (whether design is good or bad should be judged before start of development)
  • content checking
• all issues with the website should be recorded in issue tracking system
• each issue should be exactly one issue (for example don’t group everything found on a particular page to a single issue as it’s possible that different people will solve different issues at different time)
• changes that are beyond the scope of the project (change requests) should be marked and approved separately. This includes bad usability (bad implementation is not change request)
• any development work on website can cause new bugs. More work generally means more potential for bugs. After developers are finished with all fixes, website should be completely retested (even on unrelated parts), although less in-depth testing may be required.
• some checklist items could be out of scope of the project. Make a note of that and consider pointing out or upselling on obvious or large out-of-scope items.
• if you’re in specific role (e.g. developer) that doesn’t mean your opinion is not valuable or required. E.g. point out spelling errors even though spelling errors are not strictly in your job description
• it is self-evident that no project will pass this list at 100%. However it is expected that the team learns from this document and try to avoid repeatedly failing the same checklist item.

Core testing tools

• Chrome lighthouse
• Apache Bench (ab)
• http://www.redirect-checker.org/index.php
• https://www.deadlinkchecker.com/website-dead-link-checker.asp
• https://technicalseo.com/tools/robots-txt/

General

• all pages follow design Partially tested during the project! (typically tested by designer, but most of the errors should be easily detectable by competent tester)
• all pages have content
• no spelling errors
• the tester opened each page that is accessible from home page
• project owner confirms that the website is compliant with all requirements and approved changes

Performance

• at least 5 pages tested with Apache Bench at 10 threads, 100s, at least 500 pages displayed. Testing not required if there is no active content (=server side rendering such as php as opposed to static content on netlify).
• compressed (or gzip enabled), minimized CSS giftofspeed
• compressed (or gzip enabled), minimized JS or proper HTTP/2 implementation (confirm HTTP/2 is working)
• make sure all of the pages are interactive in less than 2 seconds
• run Lighthouse and make sure the website is above 80% in all categories
• videos are hosted on dedicated video hosting platform unless there’s a compelling reason against this

Technical & security

• website has SSL
• do not use jQuery
• used libraries are up-to-date
• make sure SQL injection is not possible testing SQLi
• prevent spam on all forms
• do not include email address in html
• all relevant XSS cross-site scripting protection headers are enabled testing XSS
• production doesn’t include any links to test or staging environment

Housekeeping

• set a reminder for a date when the domain expires (typically part of the company process)
• take ownership of business with google, twitter, linkedin (if applicable)
• installed Google analytics (if applicable)
• website confirmed in Google Search Console (if applicable)
• website confirmed in Bing Webmaster Tools (if applicable)
• one week after going to production, check Google Search Console and Bing Webmaster Tools for errors or warnings (if applicable)
• check that website is responsive (if applicable)
• do we have GDPR banner and cookies page
• if this is a redesign, make sure all main pages are redirected with 301 (and be careful with 301)
• if this is a redesign, absolutely make sure that google subheadings/sitelinks are redirected
• check if email server is blacklisted (if applicable)
• URLs must be human readable
• use minus in URL instead of space or underscore
• no non-ASCII characters in URL
• is Sentry enabled
• one week after going to production, are there any Javascript errors
• favicon.ico must exist
• robots.txt must exists and absolutely make sure you don’t block search engines
• correct HTML5 language information (http-equiv=“content-language”)
• language variants are related with <link rel="alternate" href="..." hreflang="en" />
• social meta tags (Facebook Open Graph, Twitter Card markup, Pinterest Rich Pins)
• Social share buttons work correctly
• custom 404 / 500 error page exists
• all image files have meaningful names, but not overly long
• all user files (images, pdf’s,..) are structured in meaningful folder structure

Content

• high quality, relevant and up-to-date content (if applicable)
• minimum 500 words of real content on every page (if applicable)
• don’t sprinkle SEO keywords around. Content is for user. (if applicable)
• all long content should be checked for completeness (no missing paragraphs)
• correct HTML formatting (p,em,strong,a)
• extra metadata for google
• no content duplication (if applicable)
• core information about website and company
• core information about agency with link to agency website (and backlink on agency website, too)
• Privacy page
• Legal terms and conditions page
• automatically updatable sitemap
• one week after going to production, check if you managed to get Google subheadings/sitelinks (hard). Check Google analytics and Google Search Console for problems. (if applicable)
• check meta description for relevant content on all pages (it will hopefully show on organic results)
• check meta description for length (about 120 chars, max about 160)
• check title relevancy and length on all pages (60 chars?)

Design

• no overlapping of elements due to fixed/absolute dimensions on any width of viewport (design basicly works on all widths not only on the ones that were defined by designer)

Animations

• no stuttering or tearing on animations in modern browsers and computers. Top level verification can be done by competent tester. Detailed verification only by art director.
• no hard stops (use easing)

Keywords

Optional.

• run Keywordplanner
• run Google trends
• pick about 3 keywords
• consider adding them to title, meta keywords, h1, first 100 words of text, alt tags,…

HTML

• h1 only once per page
• use headings where appropriate h2, h3, h4
• all image have “alt” or even better all images are figures with caption
• links have title="" description
• no target="_blank" links unless there’s a very compelling reason to do it

URL

• redirect non-www na www (301)
• check for (broken links)[http://www.brokenlinkcheck.com]

Post website to directories

• Google
• Bing
• Najdi.si
• share on social media (if applicable)

Browser support

For all of the below listed items, check at least 5 pages in addition to home page and every page with active functionality (such as forms or animations).

• Displays & functions correctly in Chrome
• Displays & functions correctly in Firefox
• Displays & functions correctly in Edge
• Displays & functions correctly in Safari
• Displays & functions correctly in Safari on IOS
• Displays upgrade notification in IE11
• Works correctly on all widths (note down the width breakpoints and test for each of them)

Forms Functionality

• tested complete flow on form
• tested form includes designed thank you view
• tested required fields and fields with specified format
• must have visual feedback when user attention is required
• tested form in all browsers
• behavior with disabled javascript is defined and tested
• repeat check for all forms on website

Newsletter functionality

If exists.

• make sure that user gets confirmation email when subscribes
• make sure production account and email address is connected to website
• make sure that user gets proper visual feedback when subscribing

External API functionality

If programmatic connection external service exists.

• make sure production account is connected to website
• make sure the functionality works as designed

Language

• HTML reports correct language
• there’s a rel link to all variants
• spelling is validated with spell checked (if applicable)
• based on browser preferred language, user is redirected to correct language variant on first visit
• redirect to browser preferred language is only done on first visit to page (so that I can access english website even if my browser prefers Slovenian)