Can you trust Chrome’s Emulator for your responsive design testing?

In Technical Brief by Chris Strahorn

Last Updated January 26, 2018.

If you’re not focused on mobile, you’re losing money. It’s that simple. If you need a wakeup call, check out these staggering statistics on the growth of mobile. The design community has been beating the Mobile First drum for a couple of years now, but development and quality assurance teams are still lagging behind to put responsive design testing first in their processes and tools.

Fortunately, there’s a new tool in the tool belt that Google’s providing with Chrome’s built-in emulator.

Starting with the Chrome Emulator

Turn on Device Mode to change device settings. Bring up Chrome’s Developer Tools panel from the menu (View-> Developer -> Developer Tools) or shortcut key (Cmd+Opt+I on the Mac or Ctrl-Shrift+I on the PC.)

Screen Shot 2014-10-22 at 6.59.37 AM

It’s a very simple tool and easy to use, but if you need more details check out Google’s directions.

Chrome Emulator’s Basic Defect

As with any mobile browser emulator, there are three primary factors that determine how closely the website will render to the real physical device.

  1. Screen size – simple enough, this is the size of the viewport to render the website
  2. Supplied User Agent – this is the browser’s way of telling a website about itself to retrieve the most appropriate HTML
  3. Rendering Engine – this is the code the browser uses to interpret the HTML/CSS and create what we see in the browser.

An emulator can solve #1 and #2 assuming the dimensions of the screen and User Agent is accurate for the device. To solve #3, you’ll have to test on the physical device by either owning the device or having virtual access to a mobile device testing lab.

Examples of Chrome Emulator Misfires

Below are two examples of where Chrome’s emulator didn’t match the real device:

Chrome Device Emulator Real Device Screenshot

1

Notice the button on the right splits and appears on two lines.

Chrome Device Emulator Real Device Screenshot

2

Notice the video in the emulator does not appear in the real device screenshot.

These two examples of Chrome’s emulator failing to match the real device rendering are not uncommon. There’s no doubt Google Chrome’s Device Mode Emulator can speed up the development and the QA cycle. However, the final testing of your responsive design definitely needs to be performed on a real device.

Mobile1st is a leader in marketing technology and site optimization solutions. More than prioritizing and executing industry leading CRO practices, we do what makes the money; optimizing our Client’s digital commerce product toward consistent financial growth and ROI. All achieved through excellence in Lean UX, Analytics, Research, Experimentation and Development.
Contact Mobile1st Experts Now!