How To Test WordPress On Tablets And Mobiles You Don’t Own

How To Test WordPress On Tablets And Mobiles You Don’t Own

Whether you are a site owner, a theme developer or a developer, at some stage you’ll need to test a WordPress site on a variety of tablets and mobiles.

Whilst it would be great to have a wide sample of devices available, likely that’s not the case, and that’s where emulators come in.

In this article, I’ll walk you through your options including how to set up emulators for iOS and Android.

Screen shot of the iOS Simulator and Android Emulator running on OS X
Installing the iOS and Android simulators can be fiddly but is worth the effort

Testing WordPress sites on multiple platforms was always a pain. For a brief while there was light at the end of the tunnel as we designed for standards, with graceful degredation and that enabled us to stop worrying about so much about getting a site to look the same on IE6 as it did on the latest version of FireFox.

Then along came tablets and smartphones and the end of the tunnel became a distant speck on a far-off horizon.

Responsive has certainly helped but before launching or upgrading a site it still needs to be tested on the basic platforms to ensure that it’s not just usable but effective. It would be nice to be able to keep an up-to-date library of cool gadgets to be able to test on but not only is this expensive it would probably mean that we’d never get any work done.

Fortunately, there are tools available that can help us test various platforms that won’t take a hit on productivity or the bank balance.

iPhones and iPads – iOS simulation

The best way to check a site on the iOS devices is to use Apple’s own iOS Simulator app. The app is part of XCode, Apple’s “integrated development environment…for developing software for OS X and iOS”.

If that sounds a bit heavy then don’t worry because the simulator is a standalone application and can be dragged to the dock and run as required without needing to fire up XCode first every time. To get XCode (and the simulator) you’ll need to sign-up for an Apple Developer ID; this is straight-forward and free. To download XCode, go to Downloads for Apple Developers, perform a search on ‘xcode’ and pick the version that is appropriate for the version of OS X that you are running.

Once you have downloaded and installed XCode:

  1. Open a Finder Window and click on Applications
  2. Right-click on XCode and click on Show Package Contents in the context menu
  3. In the window that opens, Click on Contents > Developer > Platforms > iPhoneSimulator.platform > Developer > Applications
  4. You should see iOS Simulator listed – drag it to the Dock so that you have easy access.

When you open the app it will start as the last device you simulated (or an iPhone on the first use).

You can change the device by clicking on the Hardware menu item and rotate it through the same menu option or via shortcut keys.

To test a WordPress (or any site, of course) click on the Safari icon and simply enter the URL in the location bar.

Screen shot of this post in the iOS Simulator
The iOS Simulator allows fast and accurate testing for iPad and iPhone

I’ve tested a variety of websites on both the simulator and a real device and there’s practically no difference. And don’t forget, as the app is running on your Mac then it can access any site that your Mac can, including locally hosted websites.

Verdict: If you own a Mac then the simulator is well worth the effort to install. As you likely know, XCode does not run on any other platform which severely limits the options for non-OS X users and probably means that you’ll be better off looking at a cloud solution such as BrowserStack.

Android Simulation On OSX / Windows

Screenshot of this post running on the Android Simulator
The Android Simulator worth using despite fiddly

 

install and lacklustre performanceAccessing the Android Simulator is a similar, if slightly more convoluted, process to accessing the iOS Simulator but, again, is worth the effort.

This time we are going to install the Android SDK which is available on a range of platforms including OS X and MS Windows.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

The following instructions are for OS X and MS Windows:

  1. Download the Android SK
  2. On Windows, run the installer, on a Mac unzip the download
  3. Go to the installed / unzipped folder, click on Tools > Android, a command prompt will appear and then the Android SDK Manager application will open
  4. Check the Android 4.3 Folder and click on Install (x) Packages, this will start the installation process. This can take some time.
  5. When the installation is complete, you need to set up virtual devices to simulate. Click on Tools > Manage AVDs in the SDK Manager menu.
  6. You can either create your own or click on Device Definitions, select a device and then click on Create AVD and then OK. Your device should now be listed in the List of existing Android Virtual Devices
  7. Highlight a device and then click on Start. Decide whether you want to Scale the display to real size (warning, it will likely be very small if you do!) and then click Launch

It can take a while for the simulator to get going as it starts up Android. In fact, if you don’t see Android  come up on the screen then something is wrong.

A few of the AVDs had this issue for me. Once Android is running you can find the browser and start browsing websites just as you do with the iOS Simulator, although there are no menu options for rotating the device which is a little annoying. Use the following key strokes to get rotation: Mac OS X : fn + control + F11 or F12  (you have to release all the keys and repeat for further rotation) Windows: CTRL + F11 or F12

Verdict: The Android SDK is a little more convoluted to get set up but once complete, you have all the same advantages of the iOS Simulator: running the actual operating system and access to locally hosted sites. The emulator can be painfully slow at times, though.

Geez, That Seems Way Too Complicated – Is There An Easier Option?

If the thought of installing the SDKs put your brain in a spin, you could always consider a web-based browser testing option such as BrowserStack.

The good news is that testing external websites requires no installs and you can test on a huge range of platforms and devices, including other desktop operating systems and browsers.

The catch is that the service is not free (plans start at $19 / month for 1 user, there is a free no-credit-card required trial that gives you 30 minutes of simulation) and that local testing does require installing a Java app which on Windows is probably a breeze but as most Mac users know, Apple doesn’t always play fair with Java.

The service works by hooking into virtual instances of the major desktop operating systems and then either running the required browser or, for mobile devices, running the simulator.

So, when you test a website on an iPad you are actually running the iOS Simulator on OS X!

Screen shot of BrowserStack in action
BrowserStack running a virtual instance of the iOS Simulator on OS X!

For this reason, the service can be a little laggy but it’s certainly acceptable.

The other issue I had with BrowserStack was their sign-up form’s insistence that my primary Gmail email account with two periods before the @ was invalid.

Surely, this must be fairly common nowadays?

So, Which To Choose?

Which option to choose will really depend on your self-confidence on installing the SDKs and which platform you are on.

BrowserStack does let you test everything through the one interface including an excellent range of desktop operating systems and browsers. They even have installed developer tools into the browsers, with Firebug installed on Internet Explorer 10 running on Windows 8, for example. At $19 a month, the service represents excellent value for money.

That said, my preference would be to run as many simulators for the better performance and easy testing of locally running websites.

It’s also easier to use the simulator to test multiple themes rather than using the device itself. For OS X Users, that means installing XCode and the Android SDK. Windows users, well, you appear to be stuck with just the Android SDK. Which means that the ultimate approach is, of course, a combination: locally installed simulators where possible and BrowserStack for those combinations that you cannot emulate locally (especially the other desktop operating systems).

This would certainly cover all bases and provide plenty of confidence that your site, your client’s site or your theme worked perfectly across all the major platforms.

How many platforms do you currently test against? What tools do you currently use? Let us know in the comments.

Tags: