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.
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.
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.
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.
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.