Register  |   |  Account  |  Contact Us

Web Browser Emulators, SDKs and Real Device Testing

Mobile emulators are undoubtedly a useful tool for all web designers and developers. The ability to test web content in a multitude of configurations in a cost effective manner cannot be overlooked. Thankfully this functionality is often included within modern browsers. Whilst there are positive aspects to emulation web professionals must be careful not to become reliant on this method as there are also several limitations, which if not considered can impact a great user experience.

Mobile Testing Pyramid

The benefits of mobile emulation

  • You don't need to be a seasoned IT professional to use the tools provided within browsers
  • You don't need access to 100's of real devices which otherwise could take valuable resources
  • Data and reports can be extracted or refreshed in real time
  • Emulation is better than adjusting browser windows to shrink display - Differences between competing browsers make this a poor option.
  • You can emulate typical network technologies such as 3G or Edge - This comes in handy if you want to see how your page responds under varied speeds.
Chrome Network Emulation

How to perform simple emulation

Modern browsers include a built in emulator to help test a webpage from a mobile vantage point. It's worth mentioning that Firefox does not ship with this feature but it can be added via a plug-in. You can find our own guide on testing your website for mobile performance here. For more browser specific information please click the images below.

Chrome Emulation Firefox Emulation Internet Explorer Emulation Opera Emulation

The limitations of mobile emulation

  • You're not able to test a real time connection with an emulator - If your website loads slowly no amount of beautiful design will compensate your aggrieved customers.
  • Not being able to see real dimensions or use native touchscreen and QWERTY navigation invalidates user experience testing - Customers won't use an emulator to access your mobile website.
  • Competing browsers use different rendering engines which parse content using different techniques - One browser may not reflect mark up content correctly across platforms

Common rendering engines include Blink, which is used by Chrome and Opera. Trident, which is used by Internet Explorer and Gecko, which can be found in Firefox. The Blink engine is a newer fork of the WebKit engine which Safari continues to use today. At the very least this means you'll need to perform testing over several emulators to ensure layout of your webpages remains consistent and error free across engines. Naturally this eats away at the efficiency gained from utilising simple emulation.

The options for mobile emulation

As software is difficult to program to capture the nuance of human behaviour the ideal solution is a combination of methods to ensure aspects are considered from multiple perspectives. Testing is an essential part of your development cycle and whether you use Device Detection or Responsive Web Design (RWD) emulators are one tool among many to provide your customers the best possible user experience.

Responsive Web Designers often bemoan the testing process as mark-up content is governed by a static set of rules. If a rendering engine update changes the way it handles content then changes must be made to reflect this in order to avoid rendering issues. If a new configuration needs to be catered for then developers must update rules and perform testing again. For example; a new iPhone model will require regression testing on Internet Explorer to ensure compatibility. Expectedly this means RWD requires a lot of maintenance and testing to keep up with permutations of new technologies or devices.

A Device Detection Repository (DDR) can help to take the sting out of testing as logic provided is dynamic and explicitly relates to the configuration accessing your website in real time. This makes them very lightweight and only requires that your templates are retested with an engine update. 51Degrees works with device vendors to ensure our device profiles contain the most accurate and up to date information to aid both your testing and real time device detection.

There are essentially two levels of emulation, the simplest form is from within a browser. A more advanced technique can be obtained with the use of a Software Development Kit (SDK). A SDK provides an accurate facsimile of the mobile operating system and it should be thought of as a preliminary testing tool to use before testing on an actual device. Links to SDK's for the major mobile operating systems can be found in the emulators section at the bottom of this page.

The solution to mobile emulation

As emulation software only provides an approximation of the device there are occasionally discrepancies when using some emulators in conjunction with a good device detection provider. In these cases the device detection accuracy can catch that it is an emulator accessing a website rather than a real device and may return values that were unexpected. For example if you use Chrome to emulate a Samsung Galaxy S5 accessing a website with device detection while using desktop compatibility mode then it may not be detected as a mobile or tablet device; as per the users request to appear in a desktop guise - It is important for developers to be aware of this during testing.

For effective testing you should incorporate both simple browser emulation to rapidly eliminate major issues and SDK simulation to identify any further issues. Finally you should also perform live testing to help ensure that your testing procedures are sound and complimentary. By utilising a tiered testing approach as shown in the mobile testing pyramid you can catch issues that may not be apparent with a restricted test environment.

Perfecto Mobile

We've spent 1000's of hours using emulators and real mobile devices to test our products. However, it's not feasible for most companies to buy all the mobile devices needed to create great websites and applications. From our experience we've found the best tool to assist our real device testing is Perfecto Mobile. Both physical mobile devices and testing tools can be accessed in real time via a browser. Perfecto Mobile provides a professional service that should be included in every mobile website's testing arsenal.

Get a free report containing real mobile device snapshots of your website here.

For more information on why you should consider using real mobile devices instead of solely relying upon emulation please consider this white paper.

Resources

Showing working screens and processes to your client is the most effective method of aligning everyone's expectations. However, when you're deploying mobile websites and applications your clients may not always appreciate the vast amount of different devices and features available. Following is series of links to third party emulators that we've found useful when developing, testing and demonstrating our products.

Emulators

EmulatorDescriptionURL
Android StudioEssential emulator to ensure mobile web sites work well on Android based devices.Download
BlackBerryEssential emulator to ensure mobile websites work well on BlackBerry based devices.Download
iOS SimulatorEssential emulator to ensure mobile websites work well on iOS based devices.Download
Windows PhoneEssential emulator to ensure mobile websites work well on Windows Phone based devices.Download
Mobile Interactive Testing EnvironmentMITE is a great product for testing your mobile web site. It can also be used to monitor your production web sites.Download
NttDocomo i-modeA chtml i-mode emulator from NttDocomo. Probably the best emulator to confirm chtml compliance during development.Download
Openwave Simulator V7A PC based emulation of the Openwave mobile browser. Ideal for quickly testing mobile sites on small screens.Download
MyEclipseA really good emulator for mobile devices from Genuitec, includes iPhone and many other devices.Download

Quick Browser Emulator Links

Tips

1. If you have a mobile device that supports WiFi, connect it to your access point and ensure an IP address from the local network has been assigned. Then change the Web settings for your project in Visual Studio to "Use local IIS Web server" so that browsers on the local network and not just the same machine as IIS can access your web site. Now enter the URL of your development machine into the mobile device to view pages.

2. During the final stages of testing, ensure you have a test URL that is connected to the public internet. Ask friends and colleagues to use their phones to access the site. Consider providing a text short code specifically for the test URL to make this easier. For example; text keyword to xxxxx and they'll receive a text message with a URL to your site.

3. Consider using real mobile devices over the internet from companies such as Perfecto Mobile.