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
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
While testing the pages, try different screen sizes and device orientations. Increase and decrease the browser zoom.
Depending on the limits of your device lab, you may need to use emulators to approximate the experience of a device.
- Windows on a Mac - If you are a Mac user, install Windows virtual machines on an emulator.
- Mobile Devices on your Desktop Browser - Use Chrome Dev Tools to emulate various mobile devices and Internet connections speeds.
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.
- 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.
- 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.
Check that your fonts have all the characters you will need. Consider Greek letters, accents, and
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.
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.