Along with death and taxes, you can be certain that Goggle will update the integrated tools inside its Chrome browser. One of the latest updates includes enhancements to their device emulator, a feature we covered in detail via an article from 7/15/2015. You can visit that post to better understand why this tool is important and how it will help you master the art of responsive web design, but today’s post is going to cover the nuts-and-bolts for the functionality updates.
The device emulator, now called “Device Mode,” is now enabled by default. To access, right click anywhere on the screen then follow these steps:
Tip: toggle device mode on/off using keyboard shortcuts: Ctrl+Shift+M (or Cmd+Shift+M on Mac).
Here’s where you’ll begin to see many of the latest enhancements, and although a lot of them are geared toward developers, the ones that you’ll work with the most include:
- A clean and simple design with a lighter color palette for the DevTools navigation bar.
- A new quick-jump device ruler over the media queries.
- A centered viewport and a new quick-jump device ruler at top of the screen.
Instead of listing all available devices in one long dropdown list, Google now provides a shorter list that you can edit as desired.
If you’re wondering which ones to include, here’s where your Google Analytics (GA) skills you’ve been developing with ArtsHacker’s GA tuts are going to come in handy!
You can narrow down which devices to include by seeing which ones appear in your “Audience > Mobile > Devices” GA admin panel:
Once you have that list handy, you can add the ones you want by editing the default list.
One of the most common tasks you’ll perform when using Device Mode is scaling text across devices.
Show of hands, who uses big, beautiful font sizes on hero images?
Of course you do. It’s all kinds of awesome.
But those mega font sizes rarely work on smaller mobile devices, but this is where Device Mode is going to turn that lemon into lemonade.
This is where Device Mode shines because it allows you to identify issues like this in a matter of seconds.
Get started by opening up six browser tabs, each one set to display the page you want to test. Enable the “Inspect” tool but only activate Device Mode in the last five tabs. Select a different device for each tab; I typically use desktop, laptop with touch, iPad landscape, iPad portrait, iPhone 5 landscape, and iPhone 5 portrait but you can use any combo you wish based on your GA research.
Here are some examples of the PBOpera.org homepage hero after adjusting the font size accordingly across each device’s browser thresholds (called media queries). You can see that their homepage hero image and text will look great on each device; moreover, they can apply the same font sizes across similar hero images on other web pages.