Testing your website before go-live

When the release of a new site is imminent, it’s important to remember that every detail counts. Neglecting to check something could cost time, money, and sanity. Each of these topics could become blog posts in themselves. So instead I have, where available, provided a tool and a short summary of why you should use it and what it does.

If you have any questions, or would like some more detail about any of these topics, get in touch with us on Twitter.

Don’t rush the launch of your gleaming new site only to end up creating avoidable mistakes in the process. Allow for contingency time, and clearly sign everything off so everyone knows what is happening and when.

Setting a soft go-live two weeks before the real go-live is always a good idea. This means any stakeholders can go through the site and anything that might have been missed or is in need of updating can be fixed.

Make a solid, nuke-proof, plan. Assign tasks to all those involved, allot time for each task. If a task runs over time you’ll be fully aware of; who, when, and why the project is taking longer than anticipated. And, you'll be able to adjust accordingly.

To do:

Use Trello to create to dos with due dates and assign them to the relevant parties. You don’t necessarily have to use Trello – but it is free and pretty robust.

Make sure all code conforms to web standards. This needs to be done first and repeated throughout until the very end. If your code doesn’t validate, it’s not ready to go live. For a full list of useful tools, visit: http://w3c.github.io/developers/tools/.

To do:

• Visit: https://validator.w3.org/ and make sure there are no errors on any of your site pages.
  • Validation ensures old and new browsers will be able to render your page, among other benefits.
• Visit: https://jigsaw.w3.org/css-validator/ to check for significant errors.
  • This makes sure your site is clear and looks good.
• Test JavaScript and other code within your preferred code editor (Visual Studio for example).
  • Be certain no unexpected behaviour occurs due to shoddy code.
• Open each browser's console to confirm no errors / warnings appear.
  • Make sure that each browser isn’t struggling to display your page.
• Test any forms on your site.
  • Test that all fields validate correctly – for example, users should only be able to submit a valid email address.
  • Check that any emails and notifications are received correctly.
• Visit: https://validator.w3.org/checklink and check that all your links actually work.
  • Test that when a person or search spider comes along, they are able to navigate around.
• Visit: https://validator.w3.org/i18n-checker/.
  • While not vital, it is a good idea for SEO and foreign visitors and doesn’t take too long.

Does your site render the way it should on your favourite browser? Good, now it’s time to check how it looks for everyone else.

To do:

• Visit: http://gs.statcounter.com/ and investigate what you believe your visitors will be using.
  • You’ll be surprised by the browsers people are still using.
• Visit: https://www.browserstack.com/ and check what your site looks like accross devices.
  • Be sure that however people are accessing your site, they all get the experience you expect.
• Visit: https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/.
  • Download VirtualBox so you can test on all current and previous versions of Windows.

Studies have shown that users will not tolerate more than a 4 second load time. If your site fails to offer a quick response, your users will leave. This is also a good follow-up after validation and compatibility, because it involves the same areas – checking browsers, devices, files, and folders.

To do:

• Visit: https://css-tricks.com/one-two-three/ and learn to combine as many CSS & Javascript files as possible.
  • The fewer calls a site needs the better.
• Visit: https://gtmetrix.com/ and test your site’s performance.
  • gtMetrix provides important recommendations on how you can improve the speed of your web site.
  • Yahoo has created a similar tool that works as a browser extension: http://yslow.org/.
• Visit: https://developers.google.com/speed/pagespeed/insights/ to see what Google thinks.
  • Google will actually bump up your ranking based on how long it takes to load your site – especially for mobile results.
• Visit: https://developers.google.com/speed/docs/insights/rules and make sure you’re providing the best experience to your visitors.
  • Aim to get each page to load in under 3 seconds. The faster each page loads, the higher your site’s visitor retention rate will be.
• Visit: https://loadimpact.com/ and make sure your site can handle large amounts of traffic.
  • An alternative method is to learn Selenium. It automates browsers so you can run multiple tests at one time and see how your site does under stress.

It is important to remember that people with disabilities aren’t just blind people. Deaf people need closed captions, colour vision deficient people need bold contrasting colours, and so on.

Whilst also a legal requirement in the UK, you don’t want to exclude a huge number of possible visitors to your site.

To do:

• Visit: http://wave.webaim.org/ and evaluate how accessible your site is.
  • Be on the lookout for missing alt tags, low contrast warnings, and page structure.
• Visit: https://squizlabs.github.io/HTML_CodeSniffer/ and run the bookmarklet on the site.
  • This powerful little tool will point you directly to any issues, and provide useful tips on how to resolve them.

Search engine optimisation is the process of making your site as desirable as possible to search engines like Google. While not vital to some, it is definitely worth a quick audit to see how good your site looks to search engines.

To do:

• Visit: https://moz.com/products/pro, set up a free trial and run a crawl test.
  • Diagnose any issues such as duplicate content and titles, broken links, missing page elements, crawl errors, or missing Robots.txt.
  • While Moz does a good job by itself, there are many other choices which are neatly listed here: http://tools.seobook.com/.
  • You can spend months going through this stuff, so try not to get too lost.

This sounds obvious, but simple spelling and grammatical mistakes can easily creep in while making all these other changes.

To do:

• Go through the site and read everything. Better: get someone else to proofread all your text.
  • Don’t rush through this, and be sure to get in the shoes of potential visitors to the site.

Anything could happen. Servers don’t last forever, and hard drives fail. Be sure that all your good work doesn’t disappear.

To do:

• Make sure there are a minimum of 3 different backups in separate locations.
  • I can’t recommend a specific tool – it completely depends on how your site is setup.
• Test recovering the site at least once through, and document the procedure.
  • Having a backup is good, but be sure it’s quick and easy to restore when you or someone else needs it.

Let’s add that extra bit of polish.

To do:

• Check you have a nice favicon and app icon.
  • When people visit and then bookmark your site, you’ll want it to stand out in the crowd.
• More compression.
  • There’s always more compression to be done, such as image sprites.
  • Be careful when compressing media like images though, as the higher the compression the lower the quality (in most cases).
• Further browser tests.
  • You could even check your website in IE8.
• Custom 404 page.
  • It’s recommend that you create a custom 404 page.
  • A good custom 404 page will help people find the information they're looking for.
• HTTPS.
• • Google and others are boosting ranking of sites with HTTPS, mainly because it’s a really good idea.
  • Read this: https://support.google.com/webmasters/answer/6073543?hl=en&ref_topic=6001951
• Print Stylesheet.
  • In a world of tablets and pixels, people are still printing. It’s worth spending 10 minutes to setup some separate styles for printing.
  • Have a look at: https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/
• Validation.
  • Now that you’ve done all the above validate your site again.

Now it's time to set up your live environment.

To do:

• Visit: https://css-tricks.com/redirect-web-page/ and learn how to redirect users in a neat and friendly fasion.
  • If replacing an existing site, be sure to redirect users to the new site without any nasty errors.
• Contact your web host and organise any DNS changes that need to be made.
  • Setup any DNS changes well before going live. They can take up to 48 hours.

Well, that is a lot to think about. The main thing to remember is to create an action plan and stick to it. Be sure to give plenty of contingency time and set reasonable expectations.

If you have any questions, send a tweet to @Contensis, and we’ll be happy to help.