When I redesigned this web site earlier this month one of the challenges I faced was how to ensure that it worked as I intended it to work on multiple devices. And I didn't just wanted it to work I wanted it to look great as well.
There is not much point investing time, and perhaps money, in a design if it looks terrible on every device apart from your own. All your hard work, time and effort is wasted just because you didn't do enough testing.
Testing on devices
The best way to test anything is of course using the actual devices themselves. But who has more that one tablet and one smartphone. Oh ok probably most of you as you are all geeks but do you have access to all the possible devices. Have you ever counted how many different screen sizes there are for tablets and smartphones.
So clearly unless you have a lot of money and or a lot of diverse friends you are never going to be able to test on real devices.
Testing on emulators
There are some emulators available for some devices but they're often slow and still don't cover all the possibilities. In fact many of them are nothing more than a resized viewport inside a photo of the device.
Testing and developing in the browser
Conducting all your design development in the browser is the hot trend and working with tools built in to your browser such as chrome inspector and firefox developer tools make it really quick and powerful. But that doesn't help you testing your responsive design. Sure you can resize the browser window but that's really not ideal.
Chrome Developer Tools - Mobile Emulation
I use google chrome as my main web browser so naturally I use their developer tools. Last week in version 32 they added some awesome new mobile emulation features. Not just the screen size but much more.
They still might not be as good as testing on the real devices but they go a long way. It is now possible to
- Emulate Touch Events
- Emulating Devices
- Throttle Network Bandwidth
- Test Geolocation
- Device Orientation
- ... and much more
For more detailed information check out Chrome DevTools.
It's as simple as opening Developer tools and pressing Esc.
Image credits http://www.flickr.com/photos/lyza/7382237270/in/photostream/
