Using web browser emulators, SDKs, and real device testing
This page has been updated for 2021. To see the updated version of this page, which now includes support for core web vitals, visit Mobile Emulators & Real Device Labs.
Mobile emulators are undoubtedly a useful tool for all web designers and developers. The ability to view a mobile version of a website to test the responsiveness of content cannot be overlooked.
Thankfully, this speedy and cost-effective functionality is often included within modern browsers. While it is easy to use browser emulators online, you must not neglect live testing with real devices, or simulation testing with a software development kit (SDK).
The benefits of mobile browser emulators
- You don't need to be a seasoned IT professional to use the browser emulation tools.
- It's cost-effective as you don't need access to thousands of real devices.
- Data and reports can be extracted or refreshed in real time.
- Emulation is better than adjusting browser windows to shrink the display size.
- 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
Most modern browsers include a built in emulator to help test a webpage from a mobile vantage point. Firefox does not readily have this feature, but it can be added via a plug-in.
We have our own guide on testing your website for mobile performance. For more browser specific information please click the images below.
 |
 |
 |
 |
The limitations of mobile browser emulators
- You can't test a real time connection with an emulator. If your website loads slowly, no amount of beautiful design will compensate your annoyed customers.
- Customers won't use an emulator to access your mobile website. Therefore, not being able to see real dimensions or use native touchscreen and QWERTY navigation invalidates user experience testing.
- 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 is used by Internet Explorer. And finally, Gecko is found in Firefox. The Blink engine is a newer fork of the WebKit engine which Safari continues to use today.
But what do these differences mean? You'll need to perform testing over several emulators to ensure layout of your webpages remains consistent and error-free across the different browser engines.
Mobile simulator options
It is difficult to program software that captures 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. 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 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 more advanced mobile emulation technique can be obtained with the use of a software development kit (SDK). An SDK provides an accurate facsimile of the mobile operating system. It should be thought of as a preliminary testing tool to use before testing on an actual device.
A Device Detection Repository (DDR) can help to take the sting out of testing. The 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 be 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.
Why should I use a device detection provider?
As emulation software only provides an approximation of the mobile device, there are occasionally discrepancies between emulators and a device detection provider.
A good device detection provider has a higher level of accuracy that can catch whether it is an emulator or a real device accessing a page. For example, if you use desktop Chrome to emulate a Samsung Galaxy S5 and access a website with device detection – this visit to the site may not be detected as a mobile device. It is important for developers to be aware of this during testing.
For effective testing you should incorporate simple browser emulation to rapidly eliminate major issues, alongside SDK simulation to identify any further issues.
Finally, you should also perform live testing with a device to help ensure that your testing procedures are sound and complimentary. By utilizing a tiered testing approach (as shown in the Figure 1: the mobile testing pyramid), you can catch issues that may not be apparent with a restricted test environment.
The use cases for device detection
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 is essential if you want to:
- Use adaptive design to optimize for each device.
- Improve the customer experience by utilizing 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.
- Identify mobile web traffic using a comprehensive set of device and browser specific properties.
- Tailor the experience by using other functionality on the device such as the type of keyboard or camera.
Elevate your mobile browser emulation by using our device detection services.
Final tips
1. 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.
2. Consider using real mobile devices over the internet from companies such as Perfecto Mobile.
3. 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.