Testing and developing for the mobile web

Your mobile web development strategy depends on being able to perform tests for a variety of devices and browsers. Here are emulators and simulators that can help.

The mobile web landscape continues to evolve at a rapid pace, and keeping up with trends and developments means being able to shape your users’ web experience for the variety of devices and browsers in end users’ hands. How does your web development team keep up with the multi-platform multi-browser media array?  The resources I am going to present in this piece might help you to get a handle on your mobile web development strategy.

One of the major contributors to the current discussion of mobile web development is Maximiliano Firtman (Firt), speaker, trainer and author of nne books, including the most recent Programming the Mobile Web, 2nd edition, and last year’s volume entitled jQuery Mobile: Up and Running, both of which focus on building applications for mobile devices including native apps and HTML5 web development. In addition to the recent books by Firt, he also maintains several online references from his Breaking the Mobile Web online resource, which includes a blog, an expansive list of Mobile Emulators, Mobile HTML5 matrix, and a list of his books. What impressed me most are his Mobile Emulators list and the Mobile HTML5 matrix.

Mobile emulators and simulators: The ultimate guide

Included in Chapter 4 of his book, Programming the Mobile Web, Firt includes a guide of 37 resources/downloads, which provide access to hundreds of mobile phone emulators and simulators to test your mobile web development and applications. Each listing includes the name, designation as an official or third-party download, emulator or simulator type, browser-testing capability, native testing options, and compatibility. In addition, a list of devices and a short description of each download and any other requirements or limitations to testing and to run them for your mobile web design and development testing is included with each resource/download. The first six on the list include the ISO Simulator, Android Emulator, HP WEBOS Emulator, Samsung Galaxy Tab Add-On, Motorola Xoom Add-On, and Nokia Symbian Emulators as shown in Figure B:


So, what’s the difference between an emulator and a simulator? Both are useful tools that allow you to test web designs and web applications in a mimicked setting, where you can recreate operations and functions which are device-specific, and if it works in the testing environment, then it most likely will work on the real device. Emulators are typically a piece of software that translates compiled code from the original architecture to the platform that it is running, allowing you to run the testing of an operating system and native application on another operating system; in other words, it’s a desktop application that emulates a mobile device hardware and mobile operating system. A simulator does not emulate the device specific hardware, nor does it use that actual mobile operating system; it only simulates some of the behavior of the mobile device.  While emulators and simulators do not replace any real world testing on actual devices, they do help to approximate for User Experience (UX) and interaction testing, jQuery and script functionality, and other end user situations. Emulators and simulators should not be relied on for performance testing, touch UX testing, and hardware compatibility configurations.

HTML5 Mobile Compatibility Matrix

The HTML5 compatibility for mobile and tablet browsers lists testing results from real devices for HTML5 features across various browsers and device platforms. Included in the matrix table are the various browsers, platform device, and versions tested against 39 HTML5 and CSS features including Application Cache for offline package installation, web storage for persistent and session storage, Geolocation and tracking using GPS, cells or Wi-Fi, and canvas API, just to name a few. The first section of HTML5 features is displayed in Figure C:


Getting started with mobile web development, or need to get a handle on your mobile web application testing? These mobile emulators and simulators, along with the HTML5 and CSS code compatibility tables might be the place to start our or add to your mobile development project scheme.