Responding

Scott Jehl’s Respond has become the defacto standard polyfill for min/max-width CSS3 Media Queries. It’s small and fast and if you’re looking to plug that particular hole, it’s the script I’d recommend. But during my redesign (and in my current client work) I’ decided to take a different direction. I’m serving a fixed-width design to Internet Explorer versions 8 and below.

Internet Explorer 9 on the desktop supports CSS3 Media Queries just fine and although I’ve yet to test it, I think the same goes for Internet Explorer on Windows Phone 7 Mango. That leaves older versions on the desktop and mobile.

If we’re taking a ‘tiny screens first’ approach and using ‘320 and Up’, the first Windows Phone 7 phones’ lack of CSS3 Media Query isn’t a problem as users will see only colour and type styles but no layout.

On the desktop it’s a tougher call, but I figure that Windows users are so used to maximised browser windows and the fixed-width and centred designs we’ve been serving them for so many years, that Internet Explorer 8 (and below) users won’t know that they’re missing a flexible design.

That’s why I serve every breakpoint stylesheet and added fixed widths rules for Internet Explorer versions 8 and below.

‹!--[if (lt IE 9) & (!IEMobile)]›
‹link rel="stylesheet" href="480.css"›
‹link rel="stylesheet" href="768.css"›
‹link rel="stylesheet" 992.css"›
‹![endif]--›

.ie7 .content,
.ie8 .content { width : 896px; }

Everything inside can remain flexible. That saves time and extra lines of CSS.

For my site — and the client sites I’m currently working on — the extra development overhead and Respond’s, albeit minimal, performance hit outweigh the advantages. Of course, a decision like this hangs on a great big “it depends” but I suspect that for many of us, serving CSS3 Media Queries to browsers that aren’t natively capable of supporting them is a luxury that we, and our users, can live without.