Testing a Mobile Website on Mac OS X

By

One of the banes of a web developer's existence is browser testing. Mobile browser testing is not only tedious and awkward, it presents a unique problem: access. Even though there are currently two dominant mobile platforms (iOS and Android) whose web browsers are based on Webkit, it's still nearly impossible to have all of the mobile devices your audience may be using.

So instead of calling all of your friends to look at your new website project on their phones, I bring good news. If you have Mac running OS X 10.6 or later, you can use emulation to try out a great number of variations of the two dominant platforms.

How to Test iOS

Apple provides a free developer app named Xcode, which allows users to build, test, and profile their apps. And this tool includes an iOS simulator. You can download Xcode from the Mac App Store.

Once installed, if you simply want direct access to the simulator, right click on the Xcode application and choose "Show package contents". Then navigate through this folder structure:

Contents > Developer > Platforms > iPhoneSimulator.platform > Developer > Applications > iOS Simulator

You can drag the iOS Simulator to your Dock and launch it at will. The simulator has Mobile Safari installed so browsing sites is simple. You can also change the type of simulator using the "Hardware > Device" menu.

iOS Simulator

How to Test Android

Testing websites on the Android Emulator is a bit trickier, but doable. Normally, because the Android development environment is Java-based, everything has to be done via the terminal. But a base emulated phone is pretty easy to set up, and I've provided a Mac OS X app (with Automator source) to make launching it from the Dock easy.

You can download the BamAndroid app and put it into your Applications folder. Then drag it to your Dock for easy launching.

First, Download the Android SDK

You can download the Android SDK from http://developer.android.com/sdk.

Unzip the SDK, which creates a folder named "android-sdk-macosx". Now in your home folder, create a folder named "dev". Then move the Android SDK folder into the new "dev" folder. So the final path should look like this:

{HOME}/dev/android-sdk-macosx/ (e.g. /Users/johndoe/dev/android-sdk-macosx/)

Second, Complete the SDK Install

The first time that you run BamAndroid.app it will launch the Android SDK Manager. The SDK is bare so that as Google releases new platform tools and Android environments you can grab them using the SDK manager, without downloading the entire SDK each time.

So when the Android SDK Manager launches, you'll need to download and install the latest version of the platform tools (currently 4.1). You don't need the documentation installed as it's available online and currently over 500MB in size. If you need the documentation for offline use, then you will want to include it as well.

Android SDK Manager

Note: The download and installation process can take a long time.

After the installation has completed you'll need to quit out of the SDK Manager manually. When you do, BamAndroid will create the Android Virtual Device (AVD) environment and launch the Android emulator.

Android Emulator Launch

Note: For some reason, the default keyboard setting for new virtual environments is to be disabled. This means that you have to type in the emulator by clicking each virtual keyboard key with your mouse as if tap-typing on a device. So BamAndroid.app will modify the AVD for you when it is created, adding the appropriate setting to enable the use of your computer keyboard for text input. Yay me!

Android Emulator Ready

Multiple Emulators (Optional, ambitious)

You can edit an AVD configuration file to change the virtual screen size, and other settings, to create a customized experience. My recommendation would be to create separate AVD environments for each phone configuration you want to test. If you do so, the terminal commands below will create the AVD for you. After you run the commands below, you'll be asked if you want to create a custom AVD environment, allowing you to tailor the virtual device to your needs. Warning: this is geeky stuff. If you don't accept the default config, you'll need to refer to the Android SDK documentation for each question you're asked while creating the environment.

cd ~/dev/android-sdk-macosx/tools ./android create avd -n My_New_AVD -t 1

Be sure to edit the resulting config file to add the hardware keyboard support. The file is located at the path below.

~/.android/avd/My_New_AVD.avd/config.ini

The Android SDK settings folder is hidden in your home folder (named ".android"). To get there, open a Finder window and navigate to your home folder. Then in the "Go" menu, choose "Go to folder". In the dialog prompt, enter ".android". You will then be able to find and edit the config file listed above. In the file, add the following line:

hw.keyboard=1

At this point you can edit the BamAndroid.workflow file to point to the new AVD (e.g. change my_avd references to My_New_AVD), duplicate the workflow, and save it as its own app. You could even modify the workflow to prompt the user for the appropriate AVD before launching it.

Usage Notes

The iOS Simulator is very easy to use. It features menu options for switching device types and simulating events like shakes, rotation, and more. Holding down OPTION while click-dragging simulates two-finger pinch (not available in the Android emulator). You can even slow down animations.

The Android emulator is relatively easy to use, albeit, missing some features. It will take a good amount of time to launch, and the emulator itself feels slow in practice. But it's highly usable and a great tool. Many of the functions, like screen rotation, require hidden keyboard shortcuts. You can visit the URL below to see the available keyboard commands.

http://developer.android.com/tools/help/emulator.html

Conclusion

Platform emulators provide a great way to really test your web applications without buying "a metric shit-tonne" of devices. In addition to providing current device emulation, they also provide a way to test on previous OS versions. And the emulators are free! So get testing already. Your users will thank you.

Michael directs all design initiatives, heads marketing, and builds cool software for Fynydd. He's also a husband, father, avid reader, advocate for reason and science, and autodidact.

Fynydd is a software design and development company that creates awesome user experiences for all kinds of devices. Our expertise has helped people to do things like:

  • Create a new product or service.
  • Automate processes and workflows.
  • Bring a mobile strategy to life.
  • Better interact with their customers.

How can we help you? Contact us and let us know.