What to Know About Site Testing

What is testing?

Site testing is a critical, and often under-appreciated, part of the web design process. Testing includes everything from making sure the site looks like the design you approved; to tweaking the images and text that display when someone tweets/pins/likes your site, post, or product; to confirming that your payment gateway actually accepts customers’ cards and sends the money to your account.

Testing takes place throughout the process: before we even open Photoshop to determine if a core feature is possible; during development to make sure elements are coming together properly and to troubleshoot; before launch to double check everything is ready; and after launch in case we missed something or you wanted to add functionality.

What do we test?

Oh boy, lots of stuff:

We test the design across browsers (IE8+, Chrome, Firefox, Safari) and platforms (Mac and PC). When we test the design, we’re making sure that it matches what you approved during design phase as closely as possible.

We test the functionality. This includes the way navigation menus expand, which links open new browser tabs, how placeholder text is replaced in input fields (like newsletter signup forms), how products display when on sale or out of stock, how error messages display, etc. We’re testing first to make sure everything works, and then to make sure it works intuitively and consistently.

We test the customer/visitor experience. A custom Shopify theme can have over 20 templates, but typically you’ll only work with your designer on about 5. In addition to those other 15 or so templates, every template has many different states. These can be the hover states of links or products that display differently when tagged “new” or “on sale,” or additional links and content that displays for logged-in customers or wholesale customers. We’re testing to make sure we’ve coded these templates to look and function consistently with the approved design, and just as important, that they look and function the way you and your visitors expect.

We test for content. Images of different sizes and orientation, long product and category titles, long or short product descriptions, lots of product categories, embedded videos, sale prices, product options. We build your site using sample content, but once the client begins adding their actual products and page content, we can see how the site actually works.

How do we test?

Step one is to double check our code. For that, we use the html and css validators form W3C.

Then we have to check how everything looks across browsers. I use a Mac and test directly in Chrome, Firefox, and Safari. To cover these browsers for PCs and Internet Explorer, I use the live testing suite at CrossBrowserTesting. For mobile, I pull out my iPad and iPod Touch and then use CrossBrowserTesting for Android and different versions of iOS.

Google has a handy tool to test their rich snippets, as does Facebook to test markup for linking to your site in a post. For sharing links, that’s just a lot of click-and-check on the different page templates.

To test orders for ecommerce sites, most payment gateways have a test mode. But even easier than that, with Shopify we can use their “Bogus” testing gateway, which lets us test all the checkout pages, notification emails, digital product downloads, and more. Of course, once we have all that dialed in, there’s no substitute for integrating the actual payment gateway and testing with real money, which let’s us also test issuing refunds.

What is the client responsible for testing?

At a minimum, for an ecommerce site, you need to test the payment gateway to make sure the money goes into your account. But the more you test, the better. It’s not uncommon for the developer to miss something during coding and testing. I’m actually a little color blind, which can result in subtle color changes not making it from the design to the final site (and also in showing up to a birthday party wearing a purple t-shirt and green cargo pants). Point is, you should definitely double check our double check.

But this is my first site. How do I know what to test?

Start by going through your site like a customer. Browse through categories, read product descriptions, customize products and add them to your cart. Go through the checkout, create an account, sign up for a newsletter, pin and tweet products. No need to go through every single product and page, but be thorough and try to have a beginner’s eye.

You can also ask your developer to walk through your site test with you. I like to use join.me to walk through the site while the client sees my screen. I can explain features of the site and answer any questions in real time. If the client downloads the software, they can share their screen with me and take control of the walk-through. It’s also easy to conference so multiple people can watch the live screenshare and ask questions at once — handy if you want to invite a friend and get their feedback.

Should I ask friends to help me test?

Sure! Just remember to give them clear goals and guidelines. They should be testing the site as a customer, not a site owner. Sometimes our friends want to offer design suggestions after the design is approved and without understanding any of the project constraints. The most helpful feedback from friends and family is on the content and the process: Were they able to navigate the site easily? Did they find any typos or bugs? Were they able to checkout easily?

What do we do when testing reveals mistakes?

We fix them. Then we test again. We’re not just testing for errors. We’re testing for assumptions or miscommunication that may have happened anywhere during the project and only was caught just before launch. We test and fix until we’re all satisfied the site looks right, works right, and meets the project goals. This is different for every project, so testing can look a little different for every project.

What if something gets missed?

We correct it. It’s not uncommon for something small to get overlooked, but we work quickly to get it fixed. We’re still here after launch; we’re not going anywhere, so if something comes up, we’ll work with you to make it right.