Responsive Design: Envato Browser Testing Case Study

responsive-design-envato-browser-testing-case-study

Jordan Lewis (@jordanlewiz) is a frontend developer working for Envato on the Marketplaces team as delivery lead on the Purchase team.

jordan-profile


Headquartered in Melbourne, Australia, Envato is an online company with an ecosystem of sites and services to help people get creative. On our Marketplaces thousands of people earn a living selling things like WordPress themes, photos, music tracks and illustrations. We also run an education platform called Tuts+, and a freelance marketplace called Envato Studio.

The Envato Marketplaces are a collection of eight sites running from the one codebase, which makes cross-browser testing complicated. Having the right tools and workflow for testing is incredibly important for us to be confident we are delivering a quality experience to all our users.

Over a year ago we started the long journey in making the Marketplaces all responsive designs and during this time we have been using Ghostlab to help ease the pain of testing our multiple sites across the large range of browsers and devices we support. Not only do we use it for mobile device testing, but also regular desktop cross-browser testing over many operating systems running inside virtual machines.

Prior to Ghostlab we used a combination of Pow and xip.io on our development machines to serve our Marketplaces application to our testing devices and virtual machines. However, with the added complexity of debugging Javascript and CSS on mobile devices, it meant our old testing methods were incomplete.

Ghostlab quickly became an invaluable tool in our cross-browser and device testing workflow.

envato-device-lab

Due to the nature of our Marketplaces application, we want to focus our testing on performing the same actions across a range of browsers whilst being signed-in on each and simulating different scenarios. This can be from a simple “how does this button look?” to “how is the new purchase flow experience on a mobile device compared to the desktop experience?”.

ghostlab-envato

On the Marketplaces we embrace progressive enhancement and develop first for basic functionality and subsequently layer additional features on top for the browsers and devices which can support them. This often means we build a feature to work without Javascript and then introduce Ajax, modals, visual flourishes and so on to compliment the experience. As a result this makes the testing experience different across the range of browsers we support. Our strategy has been to test on one browser at a time to make sure we are happy with the experience rather than rely on the Ghostlab synchronized feature which we find can interfere with Ajax form submissions.

The Marketplaces team is growing rapidly and we are currently working on many new and exciting features from the 2014 roadmap. We are paying particular attention to improving on our user experience on mobile and tablet devices as our mobile traffic increases.

Ghostlab has removed the pain and frustration from what is arguably the most unpleasant stage of developing a website. What was once a very complex solution for only the brave developer is now as simple as scanning a QR code.

Enjoy that? Learned something new?

Subscribe to our email newsletter and join the thousands already getting useful tips, valuable resources, and epic posts sent out every monthly. (or so...)




By Florian Mueller