There’s no doubt about it, responsive testing is a real pain for developers – but a necessary evil of the modern web. Things will only get more difficult too, as more devices and browsing methods hit the market, but there is some good news for those of us who have to labour through all that code.
With every challenge comes a new solution or two (that’s the nature of our industry) and the task of testing responsive designs inspires new tools to make the job easier. So today we’re looking at the best mobile emulators and simulators that have cropped up over the years to make testing more manageable.
Official Mobile Emulators
For the best in mobile emulators I would always suggest using the official releases from Apple, Android and other systems you want to test for.
This is the tool you want for emulating iOS devices and it comes as part of the Xcode package, which you can download direct from Apple.
Once you have Xcode on your Mac you can right-click on the application and select Show Package Contents. From here, go to Contents, Applications and then iPhone Simulator.
- The official iOS tool (and you can tell)
- Easy to use
- Simple switch between iPhone and iPad models, iOS versions and viewpoints
- Only available for Mac
- Not the easiest tool to find
Android Mobile Emulator
Android also offers up an official emulator and a major plus is this one works cross-platform. Once again you have to start with a download – this time Android Studio – which you get from the android developer page.
Now all you have to do is follow the (not so) simple set-up process, so you may want to free up some time to work your way through Google’s instructions. It’s worth doing though, because once you’re set up you can create virtual Android devices, set a custom CPU and test within the Android browser.
- Cross platform
- Huge range of devices
- Set up could be easier
- Not quite as intuitive to use as the iOS Simulator
Outside the top two
You also have a dedicated emulator for Windows Phone 8 and a number of simulators for different BlackBerry platforms if you want to cater for wider crowds.
Need an iOS emulator for Windows?
If you’re running Windows and you need an iOS emulator to test your projects, the bad news is they’re in short supply. I’ve never needed to use one, but after digging around the most promising looks like BrowserStack, which emulates browsers for iOS, Android and Windows devices.
The catch is you have to pay for BrowserStack and there doesn’t appear to be a free trial option, which seems kind of silly to me. An alternative option would be SauceLabs, which again comes at a price, but at least there’s a free trial.
In-browser mobile emulators
You can also test your responsive projects in the browser with a number of online tools and plugins available. These aren’t anywhere near as accurate as the official emulators we’ve looked at so far, but they can still be useful for simple layout testing.
Chrome Device Mode
The most famous of these would have to be Chrome Device Mode, which comes as part of the invaluable Chrome Developer Tools in Google’s own web browser.
The great thing about Chrome Device Mode is you can edit CSS in-browser to see how your media queries and other styles perform on different screen sizes, without touching your code.
You’ll find various options like the Quirktools Screenfly app that allow you to type in a URL to test the layout and navigation on across multiple devices, including TV resolutions, as well as custom screen sizes.
The responsive tool from StudioPress takes a different approach, displaying your site at various resolutions, side-by-side. What you don’t get is the choice of different device types, but instead you get to see how your pages adapt at common screen sizes.
Many other tools take this approach as well and, while they’re quite limited as a developer tool, they can be handy for projects to clients.
The obligatory note on emulators
This is the part where I say what nobody wants to hear and most of you probably already know (sorry), but it has to be said for the sake of any newcomers. Nothing beats testing with devices in your hand, using genuine hardware, internet connections, touchscreens, orientation switches and everything else they come with.
I personally use the official emulator tools to test for devices I don’t own, but I have an iPhone, iPad and a number of other devices I’ve picked up over the years which I use for testing (Nexus tablet, Nokia Windows Phone, ect.). It’s hardly a fleet that covers every possibility, but I’m happy with the balance between these and the emulators as a one-man band – a line you’ll have to draw somewhere yourself.
Testing on multiple devices can be done
If none of the options in this article quite cut it for you, there’s one more I would like to throw into the mix – and it’s probably the best one too. Testing on multiple devices can be done, without buying a warehouse of consumer tech, if you head to an open device lab.
These labs collect devices of all kinds so developers can book a slot and get their hands on real devices to test their projects. You have to pay for the privilege, but these labs are typically non-profit, so all that money goes right back into the community – which means you get a fair deal and a chance to test your sites on a wide range of devices.
How do you test your own projects
I’d love to hear from designers or developers about their own testing methods – especially if you have any suggestions I haven’t covered here. Once thing I would really like is ideas for a good iOS emulator on Windows (if there is such a thing) so I could make a better recommendation in the future. SO let me know if you have any thoughts and be sure to check back in with us soon!