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.
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.
Sometimes however, software emulators just aren't good enough to ensure a great user experience. Consider iPhones. No official emulator is available, and whilst MobiOne does a good job it's not the same as the real thing.
Identify mobile web traffic using a comprehensive set of device and browser specific properties
Every mobile phone and tablet is different. They have many different properties including screen sizes, keyboards, web browsers and operating systems. The 51Degrees database contains thousands of devices, including games consoles, eBook readers, tablets, smart phones and feature phones. It is built and maintained from manufacturer's specifications, our usage information and web site responses. Using this information enables a web site to detect a user's physical device type.
This can be used to:
- Use adaptive design to optimise for each device
- Improve the customer experience by utilising properties such as screen size and input method
- Validate a user's mobile device type and software version before offering downloadable content or attempting to interact
- Tailor the experience by using other functionality on the device, such as the type of keyboard or camera.
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.