Sometime as intelligent software engineers, we commit big mistakes when we especially check user experiences of responsive website on desktop just by resizing the big desktop browser into small smartphone size browser.
Yes, definitely this is a big mistake because we know that smartphones are operating through touch gestures, not by mouse like pointing devices or keyboard like input devices. Another thing is accelerometer like hardware features, which are changing screen size & dimensions frequently. Finally, the use cases where mobility is a big factor and software application or website is used in entirely different contexts and conditions than that of desktops.
Now, just by applying commonsense, you will agree with this fact that responsive web design can’t be tested satisfactorily on the desktop and you need real handheld devices only. Unfortunately, mobile app developers can’t frequently go on mobile devices to test minor changes that they have made. Therefore, we need something that can simulate most of the mobile experiences on the desktop through some sort of software or simulators or emulators in contemporary tech-savvy terms.
Fortunately, major mobile OS platforms like iOS and Android provide such simulators or emulators along with their SDKs with each release. Therefore, in this post, I would like to introduce you with this basic testing facility on desktops.
Apple provide in-built advance simulator to test its iOS applications on the Mac only and you can get it through Xcode. If you have installed the latest version of Xcode open it and right click in the interface to get context menu where select
Show Packaged Contents>Applications>iPhone Simulator
Now in iOS simulator you will find image of iPhone according to its version and screen size accordingly. You will have all options to manage simulator just as you do with actual iOS devices. For instance, you can rotate the simulator or flips it to see the effects of accelerometer.
Now open your responsive website in the Safari browser of iOS simulator and test it according to your set parameter frequently.
Unlike iOS simulator, Android simulator is termed as emulator and it is cross-platform compatible so you can install them on desktops of Mac, Windows, or Linux OS without any issue.
For installation of Android emulator, you have to download its entire pack of ADT for Eclipse and Android SDK. Once you install the Android SDK package according to the Google’s guidelines and with Intel x86 Emulator Accelerator (HAXM installer).
Once you finish installations, now going to create AVD (Android Virtual Device) for your targeted testing device. Next, in AVD manager, you will see the list of preset devices in Device Definitions, and in this list, you will find variety of Google products including generic devices.
Now, select one of the presets and create your selected devices by clicking on Create AVD button. Further, select CPU according to your machine and set No Skin as well as Use host GPU to run virtual device on your machine. Finally, you can run browser to test your responsive website using some keyboard command and mouse interchangeably.
Lujayn has smart responsive web design developers who use some other simulators and emulators too like BlackBerry Simulators, Windows Phone Emulator for Windows 8, and Opera Mini Emulator.