Quality Assurance Checklist for Website Design and Development

By Donald Kim
13 Jan '17

webilize, blog image, quality assurance checklist for website design and development

When considering a website design and development project, there are a number of factors to consider. At Webilize, we stress user experience (UX), user interface (UI), manageability, marketability, quality content, and web content management systems (CMS). Another factor that is absolutely essential in any web development project is the Quality Assurance process. If you haven’t already done so, be sure to read our related Blog post titled “Best Practices in Website Design & Development”.

Quality Assurance (QA) is defined as the maintenance of a desired level of quality in a service or project, by paying attention to every aspect of the delivery or production processes. In web development, QA involves three areas of testing: (1) Requirements testing; (2) Design testing; (3) Functionality testing.

Requirements testing involves the QA tester to compile a list of requirements, after the design documents have been approved by the client. Using tools such as InVision, the designer can provide comprehensive layouts and wireframes of the website which would then be tested against requirements list. This step is important to ensure that nothing from the scope gets missed before the development team takes over and begins coding the website.

In the Design testing stage, the look and feel of the website is corrected and fine-tuned based on the design requirements. The design also gets tested on all browsers, as well as all platforms, from desktop to smartphones and tablets.

In the final stage of the QA testing, the functionality of the website gets attended to. Checking for functionality involves ensuring that every link, button, and any other features on the website work properly across multiple browsers and platform devices. Browsers include Google Chrome, Mozilla Firefox, Bing, and Internet Explorer. Device platforms include the desktop PC, smartphones, and tablets.

The QA process is an essential stage in Project Management, as well as the software development life-cycle, thus, working with a web development team with QA capabilities can help ensure project success.

 

QA Checklist:

 

1. Setting up for the QA Process:

  • Download and/or back-up any pertinent website files.
  • Install a bug reporting app, such as Usersnap.

 

2. Initial High-level Review

  • Check all hyperlinks and test/fix all broken links. This also includes menu buttons, drop down bars, and sidebars.
  • Compare approved site architecture.
  • Try resizing the browser (by 50 px increments), and test to see how it breaks. This is also a quick and dirty way of checking for mobile-responsiveness.
  • Review the header, footer, sidebar, as well as the domain content of the homepage.
  • Check the 404 pages, and make sure that they redirect to 404 and has an html sitemap. The goal of the 404 page is to keep a visitor on your site even if they hit a page that doesn’t exist.
  • Repeat the test on all browsers: Google Chrome, Internet Explorer, Mozilla Firefox.
  • Test on all devices: PC Desktop, smartphones, and tablets.
  • Ensure that there are no numbers found in any of the links on the website – as it is not good for SEO.

 

3. Check the Design in All Devices and Browsers

  • Test to ensure that your website design works on all major browsers. Check for consistency in the styling and layout elements.
  • Test key functionalities – Links, forms, plugins, site search.
  • Check the Homepage, subpages, and landing pages.
  • Again, check the 404 Error Pages with site maps.
  • Check to ensure the website is mobile responsive. This is another one of Google’s ranking signal.

 

4. Content

webilize, blog image, quality assurance checklist for website design and development

  • Proof read all content for spelling, grammar, and punctuation errors. Tools such as Sitebeam can be used for checking spelling, SEO, social, cookie law, accessibility.
  • Compare and check the main navigation against the approved site architecture.
  • Make sure that all website page content matches what was approved.
  • Ensure that the website has no “Lorem Ipsum” content.

 

5. Contact Forms

  • On all Contact Forms, send test emails to ensure that the form works properly.
  • Make sure to also check all Call-to-Actions (CTAs).

 

6. SEO:  Be sure to read our related Blog Post, “SEO Best Practices Checklist in 2016.”

  • Tools such as the Screamingfrog SEO Spider Tool allows you to crawl websites’ URL and fetch onsite elements to analyze onsite SEO.
  • For WordPress sites, the Yoast SEO Plugin helps with handling the technical site optimization and with enhancing content.
  • Check Title Tags and Meta descriptions.
  • Set-up your website for schema local business, for local SEO.
  • Make sure that all social media icons are linked to the correct social media pages.
  • Ensure that images have ALT Tags within the IMG tag. Doing so will provide a clear text alternative of the image for screen reader users. This is very important for SEO ranking.
  • Redirect old pages to the new pages. For WordPress redirects, use .htaccess file.
  • Redirect the non-www to www. Test links to www and alternate domains.
  • Ensure that URLs are SEO friendly: Short and extension less.
  • Custom 404 error page with site links/site map and URL errors redirect to a 404 page.
  • Check that robots.txt file is present, and ensure that the website allows indexing. The website robots.txt file play an important role in the site’s overall SEO performance. It allows the website to communicate with search engines and let it know which parts of your site it should index. You can either submit your site’s XML sitemap to search engines or specify it in Google Webmaster Tools.
  • Make sure the html site map is created. For WordPress, use sitemap_index.xml. Be sure to set-up sitemaps within search engines, such as Google and Bing.

 

7. Installs & Codes                                                                                                                                                    

  • Submit your sitemap directly to Google. In order to submit your sitemap to Google, you must first verify your domain with Google Search Console. Once you verify your site, Google identifies you as the site owner.
  • Integrate your website with Google Analytics. Track website traffic details. Insert the Google Analytics “UA” code on all pages (including subdomains) that need to be tracked.
  • Ensure that all tracking codes for PPC (pay-per-click) or social campaigns are inserted to the website. Verify all codes: Facebook, Adroll, Retargeter, Google Conversion, and Chat Boxes.
  • Sync Google Web Master Tools and Google Analytics.
  • Ensure that you use Site Security: SSL Certificates. Google has recently made this a ranking signal. Having a dedicated IP address for the website is also becoming more important.

 

At Webilize (Portfolio and Testimonials) we have a dedicated QA team, and we specialize in building optimized websites that help drive sales revenues. Email or call us. www.webilize.com

Share This:

Do you have the next idea for your project? Talk to Webilize