Tags: respond



Friday, April 8th, 2016

Scroll Magazine, Edition 1

I wrote the foreword to this inaugural edition of Scroll Magazine which was published for the Respond conference down under. You can get your digital edition here, featuring interviews with Karen, Ethan, and Sara.

Saturday, October 29th, 2011

#816: Revert mobile-first media queries and remove respond.js - Issues - h5bp/html5-boilerplate - GitHub

This thread on whether HTML5 Boilerplate should include Respond.js by default (and whether the CSS should take a small-screen first approach) nicely summarises the current landscape for web devs: chaotic, confusing …and very, very exciting.

Tuesday, April 12th, 2011


Yesterday I documented the way I invoke media queries on Huffduffer while making sure that desktop versions of Internet Explorer get the layout styles. There’s an alternative way of serving up layout styles to IE that doesn’t involve splitting up your stylesheets.

Supersmart Scott Jehl has written a handy script called Respond that’s a textbook example of a browser polyfill:

A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will

In the case of Respond, you just need to make sure that you close every min/max-width media query declaration block with a comment:


The script then executes those blocks if the specified conditions are met. You can see it action on the demo page.

The advantage of using this solution is that you don’t have to split up your styles into two documents (one for content styles, one for layout). The disadvantage is that it introduces a JavaScript dependency.

Use whichever solution works best for you, but note that two things remain constant:

You should still begin with linearised styles and only apply float and width declarations within media query blocks—think Mobile First (though I think of this as device-independence first).

You might still want to use a conditional comment to pull in Respond to avoid the extra HTTP hit for non-IE browsers. In that case, you may as well use the same clause to stop IE Mobile from parsing the script:

 <!--[if (lt IE 9) & (!IEMobile)]>
 <script src="/js/respond.min.js"></script>

Saturday, January 29th, 2011