Testing Websites on iOS Simulator and Android Emulator

Testing websites has become a necessity for web designers and developers, and prior to launching them live, one should ensure that everything looks and works just as expected. This means testing for different browsers and screen sizes, and also why not throw in a few Android and iOS devices to be really sure about that. Why is this so important?

ios-simulator-android-sdk

These two platforms make up more than 80% of all the smartphone market in the U.S. and are expected to reach even higher shares. To be more precise, Android recently topped 50% while iOS – 30%. So, optimizing for these devices should be one of the main concerns because it accounts for over 100 million users.

iOS Simulator and Android Emulator will let you test your website without using a physical device. They mimic all of the hardware and software features of a typical mobile device so it will be like using the real thing.

iOS Simulator

iOS Simulator is a part of Apple’s integrated development environment – Xcode. A great tool for testing not only applications but also websites and offers do to so by using iPhone and iPad simulator. The installation process is super easy and will require almost no effort whatsoever.

First of all, you’ll need to grab Xcode from iOS Developer Center. Once downloaded, launch the installation and use default settings since we are not going to do anything fancy here.

xcode-installation

Upon successful installation, open Spotlight and type in “iOS Simulator”. The rest should be self-evident.

spotlight-ios-simulator

Now is the part where you can explore what this fabulous tool offers. You can either choose to use iPad or iPhone, rotate them left or right and so on. This little tutorial was just to show you the basic installation and usage since it can get really complicated when moving to more complicated topics like local website development. There will be a tutorial soon on how to set it up, so stay tuned!

ios-simulator-options

For those who like to design their sites with responsive approach, mobile and tablet simulators are even more useful since you will more likely test design not only in portrait, but in landscape mode. Below you can see iOS Simulator showing two amazing websites nicely optimized for mobile devices like iPhone.

ios-simulator-iphone

ios-simulator-iphone-rotate

Android Emulator

Android Emulator, on the other hand, is available for all three major operating systems – Windows, Mac OS X and Linux. It’s included in Android SDK and also features a browser for testing.

The first and most important step is to download the latest version Java since nothing will happen without it.

Next, download the package from Android Developers. Choose the appropriate platform you will be working on.

android-sdk-platforms

For Mac OS X, once the archive is downloaded, unzip it and place the folder where it will be easily accessed. Note that it contains only the basic SDK tools which means that you won’t be able to do almost anything. So, an internet connection is a must-have in order to download the latest tools and at least one version of Android platform. But we will talk about that in a second.

Inside the folder you extracted earlier, navigate to “tools”.

android-sdk-mac-os-x

Then click to launch “android”.

android-sdk-mac-os-x-1

Finally you are inside the Android SDK Manager. As mentioned above, you must install all the tools and at least one version of Android platform. Check the boxes as shown below.

android-sdk-manager

Once installed, you’re now ready to launch Android Virtual Device Manager. From now on, everything related to virtual devices can be managed there. Simply go to Tools > Manage AVDs.

android-sdk-avd-manager

The options may seem a bit overwhelming at first but once you get used to it, there is nothing hard at all. Also, there is really no need to go into complex topics since all we want is to see how certain websites look, right? Android Virtual Device Manager, as the name suggests, provides a simple way to organize and manage devices you have made.

android-virtual-device-manager

To set up a new AVD the easy way, the first you need to do is to go to New. A window will pop up. You should give a name for device, then target the Android platform you’ll be using and most importantly, set a resolution. Setting different resolutions will target different types of devices starting from typical phones all the way to tablets.

android-virtual-device-settings

2 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>