Hold That Website! 12 Things to Check Before Launch

After weeks of hard work, your new website’s ready to launch! It’s uploaded, you’ve set up the domain, and you’re ready to take the wrapping off and reveal it to the general public.

Before you hit the proverbial switch, however, it’s important to check that your site is functioning correctly — especially if you’re launching it with an expensive marketing campaign.

Here’s a list of some important things to look for when giving your site its pre-launch testing.

Check the forms work

Make sure all forms and other interactive elements of the site are working. It’s easy to break a lot of this stuff in the transition from development to live server — paths tend to be different, file permissions have a habit of getting lost during the upload, and so on.

• Does your form validation work (client and server side)? What happens if you submit invalid or missing data?
• Does your contact form successfully send an email message, and does the message go to the right person?
• If a form has a file upload field, can you successfully upload a file?
• If a form has Ajax elements such as live updating or auto-complete fields, do these work correctly?

Check your ordering system works

If you’re launching an ecommerce site, it’s critical to ensure that your ordering process doesn’t have glitches. Not only is it core to your business, but there are many potential points of failure in the process:

• Can you add items to your cart? (Try this again after clearing your cookies.)
• Can you edit the items in your cart (changing quantities, removing items)?
• Does your checkout form work correctly? What happens if you enter invalid data, or miss out required fields? Does it calculate shipping correctly?
• Is your payment gateway working and reachable? Can you successfully make test payments using different card types (and currencies if necessary)?

Also don’t forget to switch your payment gateway from “test” to “live” mode when you launch your site, if required. This one’s caught me out before!

Test important pages on all major browsers

You’ve no doubt tested your site in different browsers during the development phase, but it can’t hurt to give the site one last check on the live server. Sometimes certain browsers behave differently when viewing a public site compared with viewing it locally. What’s more, I invariably find a couple of bugs that I missed during the development stage.

If your site’s quite small then you may be able to test all your pages across all browsers. However, for most sites you’ll only have time to check a subset of pages. So:

1. Identify the most important pages on your site — homepage, landing pages, conversion pages, and so on.
2. Make sure these pages work flawlessly in all modern browsers (Firefox 3/4, Safari 5, Chrome 8, IE 7/8/9, Opera 10).
3. Also test the pages at different screen sizes (800×600, 1024×768, 1280×1024) to make sure the layout looks OK.

Check copy for spelling and typos

Poor-quality text on your site can have a big negative effect on your image. Don’t waste your marketing efforts by turning those new visitors off with error-ridden copy.

Even if you’ve proof-read and spell-checked your copy as you wrote it, there’s always the odd error that makes it through to the live site. So give your site one last read-through before you launch it.

If possible, get someone else to check the copy too — it’s easy to miss mistakes in your own text.

I’ve seen a newly-launched major website that had a typo in the huge 5-word headline graphic that filled most of their homepage. The typo was there for 3 days until someone fixed it. You’d think it’d be impossible to miss that — not so!

Check page titles are unique and descriptive

(This one often gets overlooked during the development process…)

It’s a great idea to make sure each page on your site has its own unique text in the page’s title element. The text should also accurately reflect the content in the page. In other words, don’t make every page of your site have a title of “Widgets, Inc”!

Here’s why:

• It helps users navigate your site. When a user clicks a link, they’ll often check the page title in the browser’s title bar or tab to make sure they’ve arrived on the correct page. If all your pages display the same title in the title bar then users might not be sure that they’ve arrived at the new page.
• It increases traffic to your site. Your page titles don’t just appear in the browser; they also appear in search results, directory entries, and links from other sites and blogs. Users are more likely to click these links — and visit your pages — if the page titles are descriptive and contain useful info.
• It keeps the search engines happy. Many search engines will give pages in a site a lower ranking if they all use the same title.

Check all images have alternate text

All img elements in your site need to have alternate text. This is a short description of the image, and it’s used when the browser isn’t capable of displaying the image.

You add this text using the alt attribute, like this:

<img src="jack.jpg" alt="Photo of Jack">

Not only does this help users who can’t see the images (for example, if they’re using a screen reader), but it also helps search engines to make more sense of the content in your pages.

Check the site’s favicon

A favicon is a great way to give your site some additional branding. It’s a small icon that you place in your website’s document root folder. Browsers (and some websites) pick up the icon and use it when displaying or listing your site.

If your site uses a favicon, it’s worth making sure that the favicon appears correctly in the address bar and bookmarks of all the major browsers. Check this both on your development site, and on your live site.

Some browsers are quite picky about favicon sizes and formats, so you may find you need to redo your favicon to get it to display on all modern browsers.

Scan for broken links and images

Broken links and images are easy to miss, and they create a really bad impression, so it’s worth giving your site a thorough scan before you launch it.

There are many tools available that can check your site for broken links and resources, including:

• The W3C Link Checker
• LinkTiger
• Firefox LinkChecker add-on

Make sure your code validates

It’s usually a good idea to make sure your markup and CSS are valid. While most browsers can cope with invalid markup without too many problems, your site stands a better chance of working across all browsers if it contains valid HTML and CSS code.

Not only can validators point out invalid or outdated elements and attributes, they can also highlight problems such as missing closing tags, which can wreak havoc with your page layout in some browsers.

Some good validators include:

• The W3C Markup Validation Service
• The W3C CSS Validation Service
• Firefox HTML Validator add-on

It’s also worth validating your website’s or blog’s feed, if it has one. Try the W3C Feed Validation Service.

Test for JavaScript errors

It can be easy to miss JavaScript errors in most browsers. In Firefox and Safari, for example, you have to bring up the Error Console to see any error messages. Internet Explorer displays an inconspicuous yellow warning triangle (by default), which one tends to ignore after a while.

However, JavaScript errors usually indicate an underlying problem with your code that should be fixed. What’s more, some browsers can be configured to display a pop-up alert whenever they find a JavaScript error. That doesn’t look good when it happens on your site!

So, before you put your site live, check it over for JavaScript errors in the major browsers, and fix any that you find:

• Firefox: Tools > Error Console
• Safari: Preferences > Advanced > Show Develop menu in menu bar, then Develop > Show Error Console
• IE: Tools > Internet Options > Advanced > uncheck Disable script debugging (Internet Explorer)
• Opera: Preferences > Advanced > Content > JavaScript Options > Open console on error
• Chrome: View > Developer > JavaScript Console

Check your error pages

What happens when you visit a nonexistent URL on the site, or when something breaks? Does the server display a plain, unhelpful “404 Not Found” or “500 Server Error” page?

It’s a good idea to create your own custom error pages to give the visitor a nicer experience and keep them on your site. Once you’ve done that, make sure the error pages work on your live site as well as your development site.

Check the domain name works

This one seems kind of obvious, but it can catch you out!

If you’ve recently registered or transferred the domain name for the site, make sure that the rest of the internet can actually see your site via the new domain. Domain name changes can take several days to propagate throughout the net. Just because you can see your ready-to-launch site at http://www.mynewlovelysite.com/, it doesn’t mean that everyone can!

Here are a couple of things you can try:

• Try tracing a route to your website’s domain name from various parts of the globe. Does the domain name resolve to the IP address of your live server?
• Ask friends and colleagues in different parts of the country (or world) if they can see your site when they type in the domain in their browser.

Summary

Checking your site over before you announce it to the world can save you a lot of embarrassment and headaches. I hope this list has given you some useful suggestions for things to test.

Here are some other handy resources that you can use when checking your site over prior to launch:

• Launchlist is an online website checklist, with both free and paid versions
• Dan Zambonini at Box UK has created a very comprehensive checklist, covering content, validation, SEO, functionality, security and more
• Boagworld has another useful checklist, with detailed advice for copy checks, SEO, validation and legal stuff
• Six Revisions recently published a checklist of things to do after you launch your site.

Do you have any other ideas for things to test before launch? I’d love to hear them. Please post in the responses below. And good luck with your new site!