How do you go about testing your responsive designs? We ask our panel of experts to reveal their workflows.
If you need to test RWD but you're short on resources, an Open Device Lab could be a livesaver
Responsive web design may well be the way forward, but how do you go about testing your site effectively? Do you set up your own test suite, visit an Open Device Lab or resort to emulation? We asked the experts how they go about it.
At Etsy, we have a variety of ways to test new features across platforms, and it's up to the designer or developer to choose their own workflow. Most tend to use emulators as they're developing, then when the product gets close to production-ready they'll use our device lab. We've got a variety of operating systems, versions, and screen sizes to test with.
I believe in testing on real devices. Software simulators can be useful, but in the end they can only do that: simulate the experience. At home, I use a setup with six physical devices running continuously when I'm designing something. I also tend to visit the nearby Open Device Lab a few times to make sure that everything works on a wider range of devices.
For me, cross-platform testing always goes much more smoothly if I spend enough time in the beginning carefully considering how easily the design and content will adapt across different devices, so I always think of that as the first step of my process. Once I've developed a solid enough foundation, I use browser emulator services to see what my site looks like in other operating systems and browsers, and a responsive testing plug-in to test different screen sizes. I also tend to test on the actual devices that I have access to. However, I still think the most important factor is the initial design and content planning.
Here at fffunction we use a mixture of physical and software solutions for cross-platform testing. We make really good use of the virtual machines available at Modern.IE, which we then run through VirtualBox. We also have a physical device lab, which we try to keep as up-to-date as we can. All of our builds go through these devices to ensure that the mobile experience is as good as it should be. There is no substitute for testing your work on actual devices.
Since the device landscape is so vast, there isn't a one-size-fits-all answer. The truth is that you need a combination of tools to do the job. First, default to using physical devices if possible. The electronics store works great for this if you're on a budget! Second, use a virtual machine like virtualbox.org for testing old versions of IE. Third, use an emulation service like browserstack.com for all the other edge cases. That isn't foolproof, but it will get you 80 per cent of the way!
Dave Olsen Web developer, West Virginia University
I address the majority of my cross-platform look-and-feel issues by using content-based breakpoints. Simply forgetting that device widths and orientations exist simplifies testing immensely. Functional testing requires real devices and a device lab - it's tough to emulate the size of your finger or the speed of a network. Not everyone can build one, so check opendevicelab.com to find a shared device lab near you.
At BBC News we have a drawer full of many different devices. We prioritise testing based on the popularity of each device, so desktop Chrome, Safari on iOS 6 and iOS 7, Chrome on Android 4.x and the stock Android browser on Android 2.3 make up our primary test group. As a minimum, you should invest in the most popular devices - iOS 7, iOS 6, Android 4.x and Android 2.3 - then offset that cost with emulators and VMs.
Thank you for reading 5 articles this month* Join now for unlimited access
Tanya is a writer covering art, design, and visual effects. She has 16 years of experience as a magazine journalist and has written for numerous publications including 3D World, 3D Artist, ImagineFX, Computer Arts, net magazine, and Creative Bloq. For Creative Bloq, she mostly writes about web design, including the hottest new tools, as well as 3D artwork and VFX.
