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.

Emulators for Android and iOS.

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.

1. Download Xcode
2. 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.
3. In your Finder, navigate to Applications.
4. Rightclick on the Xcode app and select Show package contents.
5. Navigate to Xcode > Contents > Developer > Applications, where you will find two apps.
6. 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”.

The ‘Simulator’ app hidden in the Xcode app package.

👉🏻 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!

You can now start the simulator from within the dock, and open all the different devices, even with or without bezels.

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:

Step 1 — Start Android Studio and create a new project.

Step 2 — naming of these items doesn’t matter that much.

Step 3 — Target Phone and Tablets.

Step 4 — No activity is the easiest for us I guess. Doesn’t matter that much at this point.

Step 5 — After your app is set up, start AVD Manager from the Tools menu.

Step 6 — Select the desired hardware, e.g. a Pixel 2 XL.

Step 7 — After creating, the new virtual device can be started from this window.

Step 8 — The virtual Pixel 2 XL on a Mac.

👉🏻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)

Join Medium with my referral link - Bjorn Amherd