Lemieux Design

Flash | Interactive | Web | Graphics | Brand | Video

Archive for the ‘HTML5’ Category

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.


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.


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.


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


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.


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.

RWD – The HTML5 Shim for Internet Explorer

Posted on: November 17th, 2014 by alemieux


Last time, we took a look at the HTML Viewport Meta tag, which is important for getting your site to look good on mobile. Since our HTML standard is HTML5, we need to make sure it works in older versions of Internet Explorer. I’m not considering IE6 in this conversation, although according to this site, 1.7% of the world is still on it. So that leaves IE8 and 9. As you can see from HTML5 Readiness, that IE8 and 9 are lacking in HTML5 powers. So IE10 will have the fullest support of HTML5 and CSS3, but we can’t ignore IE8 and 9 users. In fact, in some workplace environments, those browsers are enforced by IT policies.

Since HTML5 tags like <section>, <aside>, <footer>, and <figure> are not in the XHTML spec, they won’t be recognized by IE. But IE will go into quirks mode when encountering these elements, but all of them will be styles as inline elements. There’s 2 issues at play here, the fact that IE won’t recognize the elements and how they are being styled. Most normalize style sheets, like this one from Nicholas Gallagher and Jonathan Neal, will take care of the styling of the elements as block level instead of inline elements. Here’s how we do that:

summary {
display: block;

In order to make IE recognize the elements themselves, we could add them to the document with JavaScript, but Remy Sharp has already done that for us with a script called the HTML5 shiv. You’ll need to put this into a conditional statement in the head section of your document. One key thing about the shiv that I’ve discovered is that it needs to placed after all of your stylesheet calls, both external and internal:

<!–[if lt IE 9]>
<script src=”js/html5shiv.js”></script>
< ![endif]–>

The conditional statement says something like, if the browser is anything less than IE9, add this JavaScript to the document. Here, I’m referencing the script locally for other reasons, but you can also reference it this way:

<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
< ![endif]–>

Break out the wineglass and celebrate! Now you are ready to use HTML5 in all its glory and be sure that it’s supported on those older browsers. Not so much though. You should still test on those browsers as I have seen odd things happen to HTML5 docs in them. As always, be sure to validate your HTML.

Next time, we’ll talk about Mobile site design testing and some tools and resources for simulating and testing.

RWD – Viewports

Posted on: November 14th, 2014 by alemieux

This will be the start of a series on responsive web design (RWD), a topic of great importance nowadays, with lots of directions and advice. I’ll focus on the necessary aspects for those who are just getting started.

The Viewport

Typical Viewports

One of the first aspects that needs to be addressed when developing a site for mobile devices is the viewport width and scale. When viewing sites on an iPhone, for example, the default experience (if the site has not been developed with Responsive Web Design in mind) is a lot of pinching, zooming, and scrolling on the users part. Without the viewport width and scale being considered, the iPhone is rendering the page in a way that it can be viewed entirely, which will make all of the text incredibly small and unreadable.

The viewport on the iPhone (and other devices) is the area that determines how content is laid out and where text wraps on the webpage. Additionally, the viewport can be larger or smaller than the visible area1.

With the default viewport setting, the content will appear in the viewport without any scaling and not necessarily at the width of the viewport. In order to change that, we need to apply a Meta tag in the head section of our HTML document:

<meta name=“viewport” content=“width=device-width, initial-scale=1” />

There are actually a bunch of attributes other than what’s being shown here, but this code snippet has been widely adopted 2. The 2 attributes we’re most concerned with are width and scaling.

Viewport Width

You could set this up to be whatever width you want to target, but since we’re talking about responsive design, the best thing to do is set the width to the device width. This will tell the browser to show the webpage at its own device width3. The effect will be that the page will be readable and will not require so much pinching, zooming, and scrolling.

Viewport Scaling

Here’s an example of a site viewed on an iPhone without the viewport scale set:

Setting the initial-scale does 2 things:

  1. It sets the inital zoom factor of the page to the defined value, calculated relative to the ideal viewport. Thus it generates a visual viewport width.
  2. It sets the layout viewport width to the visual viewport width it just calculated.4

The initial scale attribute is a ratio of 1 and will scale the content to the edge of the viewport. When it is set to 1 the page isn’t zoomed in.

Site with No Viewport Set Site with Viewport
In this example, the Viewport Meta tag is not included in the code and therefore, iOS uses its default width and scaling In this example, the Viewport Meta tag is set. Notice the scaling and width of the site.

Now your page will render correctly within the viewport on mobile devices.

Next time, we’ll tackle HTML5 and how to make it work with older browsers.

  1. Safari Developer Library: Configuring the Viewport https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
  2. Responsive Meta Tag: http://css-tricks.com/snippets/html/responsive-meta-tag/
  3. Understanding The Viewport Meta Tag: http://www.paulund.co.uk/understanding-the-viewport-meta-tag
  4. Meta viewport: http://www.quirksmode.org/mobile/metaviewport/