Test your mobile stories on iOS and Android without buying any devices
When we publish a story on srf.ch (like this one for example), the website of the Swiss Radio and Television we regularly get 60% and more of our visits on mobile devices. Depending on the story and it’s distribution (e.g. on social media) this number can go up to 80%. This makes it extremely important to test your mobile storytelling on mobile devices:
There’s one really easy way to get a first glance at what your site might look like on a smarthpone:
Responsive View in the browser’s developer tools
The most convenient testing environment are the browser’s own developer tools and it’s responsive design modes.
On top of the website preview, you can furthermore set a device. If you set it, the browser sends the corresponding user agent to the server, in our case, when we use Firefox and the device «Google Nexus 5»:
Mozilla/5.0 (Linux; Android 4.4.4; en-us; Nexus 5 Build/JOP40D) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2307.2 Mobile Safari/537.36Or if we use Chrome and the device «iPhone 5»:
Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1This is pretty good during development, you can easily inspect elements and modify CSS to try out stuff. But it lacks one important feature which is impossible to reproduce in a computer browser:
As you can see: if you scroll down fast enough, the navigation bar at the bottom disappears and the URL bar at the top is reduced in size.
This has the super annoying side effect that every time the two bars change in size, the browser emits a window.resize event, as you can see in this demo.
If your site is not handling the window height in any way you can go ahead and use the developer tools, but if you want to be really sure that stuff works on smartphones, you’ll need to test your code in a way that is more bulletproof:
Emulate smartphones on your (Mac OS) computer
If you work on a mac you can easily emulate an iPhone and also an Android using the software that Apple and Google Provide:
iOS
- Download and install Xcode from the App Store
- Run it and navigate in the Toolbar to:
XCode → Open Developer Tool → Simulator
That’s about it. A visual representation of an iPhone will occur. You’ll be able to choose your device. If you need an older version of iOS, you can download it in the XCode Preferences under the tap Components:
⚠️ Warning! There is one major disadvantage:
You won’t be able to install any other browsers. You can only use Safari, which is pre-installed. It is impossible to install any apps from the App Store. So for testing the other browsers iOS Chrome, iOS Firefox or iOS Edge (yes, that exists) you’ll still need a physical device. ☹️
If your company has it’s own app, talk to your developers, if they can send you an *.app file of the app, you can drag and drop that onto your simulation and run the app.
Android
Similarly, you can use Google’s Android Studio to emulate any version of Android. There’s a HowTo on android.com but it took me a while to find all the stuff, so here are some screenshots:
- Download Android Studio and install it (you might need to install Java to get it working)
- Start a new Android Studio project
- Just confirm all options with Next, Next, Next, Finish (we won’t run this app anyway)
- A new window appears:
Find the AVD Manager from the icons at the top right
In there you can create devices. If you want to be able to install apps from the Google Play Store, you need to choose a configuration that has the Play Icon:
After that you can launch the emulator via the Play Button:
With your google account, you can also install any apps from the Play Store (if you paid attention to the icon during the installation).
Tadaa 🙌🏼
After that, you should be able to run Safari and Chrome from within your emulators! 💪🏼 Plus: If you develop your app with something like webpack-dev-serveryou can now access the app via localhostor via the IP of your computer:
But it gets even better!
Debugging within mobile operating systems is not exactly comfortable. This is where the following feature comes in very handy:
When you run your iOS Simulator, you can then open Safari and (after enabling the developer Mode, if it’s not enabled already) navigate to Developer (or Entwickler in German) and find your Simulator there. If you click on it, the Safari Web Developer tools will open and you can inspect and modify your page as usual. This also works if you connect your iPhone to your computer via USB.
The same goes for Android and Chrome: Run the emulator and via the three dots in your developer tools open More Tools → Remote Devices
In there you’ll find Android Devices that are connected to your computer — including your simulated device:
Unfortunately, this does not work for Firefox or Chrome on iOS. Luckily these browsers are not being used by a lot of users.
A final thought
Although emulation is a cheap way to get pretty close to a real phone you should definitely still always grab a physical device and look at the application there. 📲 Only then you’ll be able to correctly judge stuff like font size or test if a clickable area is big enough for a thumb.
What are your experiences with testing mobile storytelling and data visualizations? Have you come up with another way to inspect what’s going on in your mobile browser? Or do you have a windows computer and got also an emulator running?👇🏼 Leave a post down below!
