How to screen test your mobile-first designs on Android and iOS, without a physical device
Testing and experiencing your designs on an actual phone is not always possible. Here’s a quick intro into emulators for mobile phones, and how they can be used for design purposes.
Apple and Google both offer mobile emulators that are “not just for Developers”. I personally use the iOS emulator via XCode and the Android equivalent for all my design concept work. Both tools are completely free and are a great way to quickly test any (HTML-) screen in an actual mobile OS environment.
A mobile emulator is a software application for a personal computer which creates a virtual machine version of a mobile device. (Source).
How to emulate iOS on your Mac
Xcode is the developer suite for Mac apps and it comes with an emulator. It’s available for free on the Apple Developer site or via App store.
- Download Xcode
- Start Xcode — the app might prompt you to download more components at the first start. When you reach the ‘Welcome to Xcode’ screen, you can close the app again.
- In your Finder, navigate to Applications.
- Rightclick on the Xcode app and select Show package contents.
- Navigate to Xcode > Contents > Developer > Applications, where you will find two apps.
- Drag the Simulator app do your Dock or desktop for easy access, although Spotlight or Alfred might be able to pick it up as well by searching for “Simulator”.
👉🏻 You now have a shortcut in your dock that opens the emulator.
It’s a functional phone with Safari (and some other apps) — so as long as your artefact is HTML (locally or remote), it can be experienced in its natural habitat. Happy testing!
How to emulate Android mobile on your Mac
The process for Android is fairly similar to the one described above. The difference is that there is no accessible app available that you can create a shortcut for. The base for all this is Android Studio, which can be downloaded for free from the Android Developer site, and the included Android Virtual Device Manager.
Step-by-step instructions for Android Studio:
👉🏻And that’s it for Android.
Unfortunately, there is no standalone app available; whenever you’d like to test on Android, you have to start Android Studio, select your demo app, and then go to Tools > AVD Manager to start the device of your choice.
If there is a better, easier way, please comment below!
Check out these other options to test your designs
Invision mobile app: As long as you upload your designs to a mobile prototype, it can be viewed on a phone, thanks to the Invision companion app. (Available for Android and iOS)
Sketch Mirror: This app allows you to preview your designs and prototypes on an iOS device connected via Wi-Fi or to your Mac with an USB Lightning cable. (Only on iOS)