Respond.js with mobile first media queries – flash of mobile layout in IE

[Aiya]

Hello people,

I have built a responsive website with mobile first media queries. I used Respond.js to force media queries to work in IE8.

It all works just fine except for one thing – whenever the page is loaded, there is a 1 second flash showing the mobile layout first until the Respond.js kicks in and the correct media query styles are applied. Which is really annoying and can’t stay that way because IE8 is the client’s primary browser.

In Respond.js documentation it says – “Reference the respond.min.js script (1kb min/gzipped) after all of your CSS (the earlier it runs, the greater chance IE users will not see a flash of un-media’d content)”. So in my html head I have tried to put Respond.js directly after my CSS, however for some reason it doesn’t work if Modernzr is not referenced before it (why?!!) – so I’ve got Modernzr directly after my CSS, and then Respond.js. Would this be the reason for the flash and wouldn’t happen if Modernzr wasn’t referenced before Respond.js?

Anyhow – I would like to know your experience using Respond.js and have you experienced similar problem to mine? And if you have any ideas of how this could be fixed – will be much appreciated :)!

[Aiya]

hmm..no replies.

Ok, maybe I will ask something else then – how do you approach IE (versions 8 and less) when building your responsive websites? Do you explain the client that website can’t work responsively in older IE versions and apply fixed width styles specifically for IE8 (and older)?

[Alen]

First post: read this: https://github.com/scottjehl/Respond#hows-it-work

> …stylesheet is impossible to retrieve in its pre-parsed state (which in IE 8-, means its media queries are removed from the text), so Respond.js re-requests the CSS files using Ajax…

Second post, stats will tell you many things… then it’s up to you, to make the decision what you want to support. I tell my clients not to worry about anything past IE8 and to serve very simple layout.

This is a good read: http://nicolasgallagher.com/mobile-first-css-sass-and-ie/ wit h some code snippets.

[Aiya]

Thanks a lot!

[Author]

Posts