Master Responsive Web Design With Chrome’s Device Mode RELOADED

Published:

By: Drew McManus

In: Design & Development, Metrics & Analytics, RELOADED

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.

Toggle On Device Mode

The device emulator, now called “Device Mode,” is now enabled by default. To access, right click anywhere on the screen then follow these steps:

Select Inspect
Select “Inspect” via the contextual popup menu.
Toggle Device Mode
Click the (new) tablet and smartphone icon to toggle device mode on.

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.

Editing Built-in Device Presets

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:

Device List inside Google Analytics

Once you have that list handy, you can add the ones you want by editing the default list.

Customizing Device List
1. Select “edit” from the dropdown list.
2. Select which devices you want to display from the available list.
3. For advanced users, you can create custom device displays via the “Add custom device…” option. When activated, an options box will appear at the top of the existing options list.
TIP: this can be especially handy for those of you with an executive or key board member who uses an unusual monitor resolution (look like a genius!).

Practical Application

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.

PBOPERA hero image with text
This is a hero image with text overlay is from the Palm Beach Opera’s homepage. Rest assured, that big, bold text will look awkward on smaller device browsers thanks to forcing line wraps for the longer words.

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.

dektop and laptop
Left: Device Mode is disabled so you’re seeing the site at native monitor resolution.
Right: “Laptop with touch” view
ipad view
Left: iPad, landscape mode (use the “Rotate” icon to flip between portrait to landscape).
Right: iPad, portrait mode.
iphone view
Left: iPhone 5, landscape mode.
Right: iPhone 5, portrait mode.
Drew McManus
Author
Drew McManus
In addition to my consulting business, I'm also the Principal of Venture Industries Online but don’t let that title fool you into thinking I'm just a tech geek. I bring 20+ years of global broad-based arts consulting experience to the table to help clients break the cycle of choosing one-size-fits-none solutions and instead, deliver options allowing them to get ahead of the tech curve instead of trying to catch up by going slower. With the vision of legacy support strategy and the delights of creative insights, my mission is to deliver a sophisticated next generation technology designed especially for the field of performing arts. The first step in that journey began in 2010 when The Venture Platform was released, a purpose-designed managed website development solution designed especially for arts organizations and artists. For fun, I write a daily blog about the orchestra business, provide a platform for arts insiders to speak their mind, lead a team of intrepid arts pros to hack the arts, lead an arts business incubator, and love a good coffee drink.
Author Archive

Leave a Comment