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 some factors to consider. At Webilize, we stress user experience (UX), user interface (UI), manageability, marketing relevance, quality content, and web content management systems (CMS). Another factor that is 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 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 client has approved the design documents. Using tools such as InVision, the designer can provide comprehensive layouts and wireframes of the website to let the QA test later against the requirements list. This step is essential 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 are 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. Checking for functionality involves ensuring that every link, button, and any other features on the site work correctly across multiple browsers and platform devices. Browsers include Google Chrome, Mozilla Firefox, Bing, and Internet Explorer. Device platforms include desktop PC, smartphones, and tablets.

The QA process is a crucial 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 or back-up any related 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 list 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 way is also quick and dirty, but it is one of the best to check 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 pages is to keep visitors on the site even if they hit a non-existing page.
  • 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 suitable 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 point is another one of Google’s ranking signals.


4. Content

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

  • Proofread all content for spelling, grammar, and punctuation errors. Use tools such as Sitebeam 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 correctly.
  • Make sure also to 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 local schema business, and local SEO.
  • Make sure you linked all social media icons 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, as 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 extensionless.
  • 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 plays a vital role in the site’s overall SEO performance. It will enable 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 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. 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 tracking.
  • Ensure that all tracking codes for PPC (pay-per-click) or social campaigns inserted into the website. Verify all codes: Facebook, Adroll, Retargeter, Google Conversion, and Chat Boxes.
  • Sync Google Webmaster 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 critical.


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




Other articles you might be interested in

WordPress Custom Websites - the Design and Development Process

The Basics of App Design 101

The Process of Developing Magento eCommerce Websites


Share This:

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