This is single.php

The Tried-And-True Tool You Should Know For Responsive Design - responsive-design-device-lab-web-developers.png.png

This is content-single.php

The Tried-And-True Tool You Should Know For Responsive Design

Responsive Design Google Chrome Developer Tools Device Mode Testing By Sunny Lam Front End Web Developer

Responsive design.

The term can seem broad as the horizon to any lay person out there.

For us developers it can mean one site capable of transforming itself for any device or screen…

… depending on the audience’s needs.

 

These days there are a lot of devices.

With Apple’s massive iWatch success it’s another two screen sizes to build for.

 

A device lab would be really handy in these cases.




What is that?

A work room where you can view your site on all many of the current or older devices — just like someone using them would.

 

What if you can’t access one or don’t have the time?

Simple.

Google Chrome.

Let me explain that…

 

It’s All About Device Mode

When I first learned responsive design I thought it was all about flipping the switch on Inspect Elements in Google Chrome’s Developer Tools and re-sizing the screen for the common break points.

High definition desktops… min-width: 940px…

Desktops… max-width:  940px…

Tablets… max-width:  768px…

Phones… max-width:  480px…

 

That however only scratches the surface of the screens that you have to design for.

I’ve found that responsive design for those break points isn’t enough.

And simply dragging your screen down a notch and coding responsive media queries in the Element inspector isn’t enough.

In fact I’ve found it isn’t very precise.

 

So what’s the solution?

 

How do you get 80% of the benefits of a Device Lab from the comfort of your own computer without venturing forth into pounding heat waves or bone-breaking hail over and over? 

 

Use Device Mode.

 

On the Mac enable it by hitting Cmd + Option + I.

Turn On Google Chrome Device Mode Explained By Sunny Lam Front End Web Developer

Then strike the Device icon as you see in the above image in order to activate Device Mode.

 

Once Device Mode is switched on you should see…

Google Chrome Device Mode Sunny Lam Front End Web Developer

 

You’ll notice that you can choose the device you want Google Chrome to “emulate” or pretend to be from a dropdown menu on the left.

Google Chrome Device Mode Sunny Lam Front End Web Developer

You don’t really need to bother with the Network option to its right for now.

 

You may witness a message that says, “You might need to reload the page for proper user agent spoofing and viewport rendering.

Just reload your page and it should go away.

 

Under the Device selection dropdown is the screen dimensions in pixels.  

You can change it manually if you want by clicking on them and entering numbers.

I typically stick with the Device selections instead though if you’re coding responsive for iWatch sized screens for example then you may have to enter them manually. 

 

You’ll find this works so much better than simply re-sizing your browser screen

… because you won’t miss gaping details.

 

You also get a “click-only” space just like you would if you were using a mobile device like an iPad, Note or iPhone.

In which case hover events won’t work which is exactly what you want.

 

You can toggle the screen dimensions between portrait and landscape which helps when designing nav menus

… and start realizing that your nav menu steals 50% or half of the screen real estate…  like in the image below…

 

Responsive Design for Nav Menus by Sunny Lam Front End Web Developer

I drew in the edge of a fixed nav menu.

If you scrolled on an iPhone in landscape mode you’d realize that the fixed nav menu gobbled up half the screen real estate… forever.

If you only used screen re-sizing in your browser without Device Mode you’d never have noticed this at all.

Without Google Chrome Device Mode On By Sunny Lam Front End Web Developer

This is more of an issue with fixed menus in this case however you get the idea.

 

You’d redesign the nav menu… maybe use an absolute positioned “Menu” icon in the right or left corner for example… shift the title to make space… etc.

Responsive Design Mock Up Changes by Sunny Lam Front End Web Developer

 

Yet on the other hand…

 

Device Mode May Not Be Enough

You should realize that it’s always a good idea to test it on an actual device for more than responsive design.  

  • What if your ideal web site user tends to hold their device in a certain way that covers half the screen for some reason?
  • What if there’s some sort of spacing on an Android device that doesn’t exist on an iOS device?
  • It’s still limited to only screen sizes of width and height
  • It doesn’t actually use that device’s “rendering engine”.
  • Certain features that you might use in your web site may not be supported on certain mobile devices anyway and you certainly won’t notice using the current version of Google Chrome’s Developer Tools.


 

Google might make major strides with Device Mode in the future… yet today it’s not yet where it needs to be.

 

Which means that if your project is mission critical you should dash over to your nearest device lab no matter what.

 

Cheers,

Sunny Lam

 

Writing just north of the Beaches

Toronto, Ontario

Canada

 

P.S. HackerYou has an open device lab that they’ve been building up here in Toronto down at their Queen Street West location.

 

Above Photo:  “Device testing at the @Clearleft open device lab. http://clearleft.com/testlab | Flickr – Photo Sharing!,” Flickr, accessed Sunday, April 19, 2015, https://www.flickr.com/photos/adactio/14793668147/.

Technorati Tags: , ,

Comments insertion starts here.

Leave a Reply