How to Audit a Website Before It Goes Public

A Web Audit Check List

May 27, 2015

Most software...has a bug every three to five lines of code

Roger Grimes

Before I approve a major web coding overhaul, I perform an audit to make sure the code delivers a quality user experience and is accessible for future developers to iterate on the code. Every audit has unique needs, but here is a starter list of auditing steps and resources.

Responsive Design on a Variety of Devices and Browsers

Put yourself in the role of the target user and give the website a spin. Look for unexpected formatting and opportunities to improve user experience. You can use Google Analytics to review your users’ devices and browsers to determine what you should test on. I typically test on:

  • Mac Chrome
  • Mac Safari
  • Mac Firefox
  • Windows 8 - 11 IE
  • Windows Firefox
  • Windows Chrome
  • iPad Safari
  • iPad Chrome
  • iPhone Safari
  • iPhone Chrome
  • Android Tablet Chrome
  • Android Phone Chrome
  • Print

While testing the pages, try different screen sizes and device orientations. Increase and decrease the browser zoom.

Proxy Devices

Depending on the limits of your device lab, you may need to use emulators to approximate the experience of a device.

Speed

Before going live, make sure your site and server are optimized.

  • GTmetrix and Google PageSpeed give helpful notes.
  • WebPageTest gives a visual graph of the page load and you can also use it to compare the site to other benchmark sites.
  • Load Impact provides automated and on-demand performance testing.

Code Review

  • Validate the HTML, CSS, and JavaScript. It’s not the end of the world if there are errors, but it’s a helpful way to catch potential problems.
  • Get a quick overview of the CSS, perform a CSS Code Review, and compare the code to the guidelines. Sass Guidelines is a helfpul introduction to what a Sass code guide could look like.
  • Manually inspect the HTML, CSS, and JavaScript with Google Web tools. Make sure the coding is efficient and intuitive for future editors and developers.
  • Clear out any unused CSS.
  • Make sure your pages embed well on your social media channels, including Facebook and Twitter.
  • Look for CSS code that relies on functionality your target browser’s don’t support. Search Can I Use __ ? for updated compatibility.
  • Look for stray files that should not be live. Remove any files used for testing or placeholders. Also double check that no secure, private, or sensitive information is being accidentally published.
  • Check accessibility.

Typography

Check that your fonts have all the characters you will need. Consider Greek letters, accents, and  

HTTPS

Confirm the site works whether a users enters with http or https.

  • Why No Padlock scans the page for offenders.
  • Make sure content hosted on other servers are configured correctly.

Browser Hack

If you find that a specific browser is giving you trouble you can band-aid with a browser hack. If you have a bunch of hacks throughout your code, you may also consider branching your CSS.

While evaluating your site, remember that the site doesn’t have to be perfect. It just needs to meet the needs of a minimum viable product. If the testing site is as good as your current solution and it’s not missing any essential functionality, then it’s probably ready to go live. After launch, you can continue to improve through iterations. Happy Auditing!

Learn more about creating effective media, view my Production Remarks.