RWD – Browser Tools for Responsive Design

Posted on: November 26th, 2014 by alemieux 1 Comment

Last time, we looked at the HTML5 Shiv for older versions of Internet Explorer. Next up, we’ll take a look at some of the browser tools that you have at your disposal when working responsive.

Chrome

Google Chrome’s Developer tools are a fantastic repertoire of debugging aids that are essential for any web workflow. Chrome also comes in another form called Canary, which is intended for developers and has all of the latest features Webkit.

To Open the Developer Tools, go to View > Developer > Developer Tools. Immediately, you will see the HTML and CSS source in the Elements tab. You can inspect any element in the DOM by hovering over them first to see what’s highlighted, and then by clicking on them. All of the computed styles for the selected element will appear in the Styles tab. You can see the cascade and how styles are overridden as you move downward. If you want to temporarily disable a style, you can uncheck it. If you wanted to experiment with a given style, you can change the values in the style properties that are displayed. You can also enter new property / value pairs on elements. If a color is present, you can click on the color to get a nice color picker and change the value. None of these changes affect the page you’re working on, it’s literally a playground to check your work. If you switch over to the Console tab, you’ll be able to see any errors that might happen during a page load or on JavaScript events. You can use the Console to test variables and write some simple scripts to test.

The Responsive portion of the Dev Tools is some very nice emulation tools. Click on the rectangular shape near the magnifying glass in the top of the Developer Tools Window, this is supposed to look like a cell phone. Now you’ve enable Device Emulation mode.

Device Emulation

On the left is a handy pixel ruler. On the far right is a page scale indicator. By default, it’s set at 1.0. You can click the plus (+) or minus (-) buttons to change the scale or hold shift and drag on the page. At the top, in the orange section, you can select which device you want to test and change the orientation. The device pixel ratio is shown as 1 for some devices and for retina displays and HD screens, it’s shown as a higher value. The iPhone 5, for example, is shown as 2.

In the blue Network section, you can also emulate network throttling and latency. Refresh your page to see the desired effect. Unless you’re testing specifically for interactions that might be affected by network throttling, you should have this set to No throttling, which is the default.

You can get to the emulation options inside Chrome itself or inside the Developer Tools window.

Device Emulation Options

The range of devices and the ability to change the orientation is pretty impressive. Download Chrome and try the Dev Tools today if you haven’t already.

Firefox

Mozilla’s Firefox is my default browser. One indispensable Add-on that I’ve been using for years is Chris Pedrick’s Developer Tools, which you can also get for Chrome. When you install this add-on, you can:

  • Get the HTML source code in a nice, readable format
  • Get all of the CSS from any page you’re looking at, which includes external CSS as well as relative files.
  • You can enable and disable JavaScript
  • You can view all of the image information, including background images
  • You can outline all Block Level elements
  • You can also validate your HTML and CSS

For the responsive side of things, there is a Resize option. Here, you can resize the browser window itself to any pre-defined settings or settings that you add. If you choose Resize > View Responsive Layouts, you’ll get Mobile and Tablet views of your page in both Portrait and Landscape.

Firefox Responsive Layout

Another great Add-on for Firefox, which is very similar to Chrome’s developer tools if Firebug. Firebug has a tabbed interface where you can inspect your HTML, CSS, Scripts, and network activity. In the HTML tab, you can inspect the DOM. Rolling over an element will highlight it in the browser. The Style sheet is visible in the related Style panel. Here you can disable properties by clicking near them. You can also see a color chip for any colors that are specified.

Firebug

There are even Add-ons for Firebug, like YSlow, an Add-on that gives you performance data on web page load times and gives you advice on how to improve performance, which I’ve been using lately.

Although Firebug is pretty powerful, Firefox has its own set of developer tools. Steadily getting better, this suite of tools has all the things you’d come to expect with some additional features, one of them being a Responsive Design View.

Firefox Developer Tools

Click on the icon to the left of the Gear and you’ll be put into this view. There’s a list of preset sizes for Mobile and Tablet devices. You can change the orientation of the view with the arrow icon. Click the pointer finger icon to enable touch events, and you can take snapshots of each view.

Responsive Design View

I’ve been using this view over the past few weeks to test a responsive design and it’s been pretty reliable.

I should mention that Mozilla has just introduced Firefox Developer Edition. I just started playing around with this, but it has a really nice looking interface that’s easier on the eyes.

Firefox Developer Edition

Safari

Apple’s Safari has some built-in developer tools that have to be enabled. Go to Safari > Preferences and in the Advanced tab, choose Show Develop menu in menu bar. You may have to restart Safari afterwards.

Safari Preferences

Comparable to Chrome and Firefox, Safari has a web inspector in the Resources tab. You can also get to the CSS by enabling the Styles panel on the right. You can also inspect Layers (Absolutely positioned Divs) and HTML Node information. External resources can be inspected, like fonts, images, JavaScript and Stylesheet files. Clicking on these items on the left gives you a nice preview in the center panel.

Safari Dev Tools

Out of the box though, there are no responsive views. There is an extension called ResponsiveResize that you can download and install for Safari that will allow you to view common mobile and tablet sizes. You can also add your own custom sizes.

ResponsiveResize Safari Extension

Simply click on a size button and the browser will resize for that particular dimension.

Internet Explorer

There have been occasions where I had to view a page in IE because something wasn’t working right. “Does IE have developer tools?” I asked myself, and yes it does, though not as robust as the other’s mentioned here. Go to Tools > Developer Tools or F12 (In IE 8), and you’ll see an HTML inspector. The Style panel will show the styles of an element that you click on. There is no highlighting as you hover over elements, but if you click on the cursor icon at the top left of the panel, and move your mouse over the page, it will outline those elements.

Internet Explorer Dev Tools

At the top of this panel is a menu and under Tools, there’s a resize option. You can choose from some preset sizes and you can add your own custom sizes. This resizes the browser window. Although it’s not an elegant experience, at least there are some tools available. I haven’t explored these tools for IE9 or 10, so if you have and think they’re better, by all means, comment on this post and let us know.

Summary

Browser emulation is nothing like viewing your page on an actual device and this approach is not meant to be a replacement of that method. I, like many other people, don’t have a lot of time and resources to develop a device testing lab. With responsive design, one of the key things is to see how the pages flex and how elements on the page resize and shift as the scale is reduced or expanded. I like Firefox’s built-in Responsive Design View for this.

Hopefully, this will be helpful information for those getting started with RWD or anyone who’s doing web development in general. Next time, we’ll start getting into Responsive Typography and talk about the almight Em.

Tweet this! | Bookmark at Delicious

Tags: , , ,

One Response

  1. […] RWD – Browser Tools for Responsive Design […]