Media queries are not supported and will horribly mess up your page?!

[davidhund]

Media Queries are not supported in IE8 but they do not "horribly mess up your page": the rules in MQ's simply do not apply…

I would advise changing the wording to either simply state "Media Queries are not supported. CSS in Media Queries will not have any effect" OR explain a superior development methodology such as 'mobile-first' (IE8 will simply have 'mobile' layout) or using Conditional Comments (load extra CSS for oldIE)

[etodanik]

You're right. Will be noted.

Is there any good mobile-first resource to link to for people who'd like to read about the concept? (I know what it is, but I'm trying to make the solution offers as helpful as possible.

[davidhund]

There are so many good resources I believe simply mentioning 'Mobile First' would help people out. A quick google:

• http://www.html5rocks.com/en/mobile/responsivedesign/
• https://adactio.com/journal/4494/
• http://www.smashingmagazine.com/2011/08/10/techniques-for-gracefully-degrading-media-queries/

[etodanik]

Wonderful, I'll change the text sometime later on today. Thanks for the issue filed! :)

[jaimerod]

Many clients will not accept a mobile layout for IE8, which is a desktop browser. When supporting IE8, I suggest using a desktop first approach to ensure proper rendering in IE8.

[davidhund]

@jaimerod Sure: some clients will not accept a mobile layout for IE8 but this does not mean you should build desktop-first…

Build a mobile-first app to keep things lightweight and progressively enhance it when appropriate. This goes for all UA's.

If IE8 needs an 'enhancement' w.r.t. layout, that's fine. There's many ways to do this:

• Use Conditional Comments or 'Conditional Classnames' (.oldIE .ie-lt9 etc)
• Simply include e.g. IE8.css in which you provide extra layout-styles (without using Media Queries)
• Provide a Media Query polyfill such as Respond.js
• etc..

If you are using a pre-processor such as Sass and have separate Media Query CSS 'partials' (e.g. _mq-medium.scss) this is very easy: you could even @import _mq-medium.scss in IE8.scss (but not in a MQ obviously) so that you maintain your layout styles in one place and do not need to duplicate your layout styles...

Don't fall in the trap of building 'desktop-first' (meaning 'full, hi-fi- bloat-first') and "stripping stuff away for 'mobile'…" ;-)

[donovanglover]

+1 I fully agree with David

[etodanik]

Actually, @davidhund , that's why I wrote that it will "horribly mess up your design". Most people would expect desktop design on a desktop screen, be it whichever browser.

Besides, since mobile design a lot of times relies on features exclusive to evergreen browsers, - displaying a mobile design on IE8 is awkward at best.

I usually explain to the client that IE8 will never display things 100% right, but that we can get to a reasonable level by using polyfills like Respond.js.

In fact most times Respond.js is just fine.

I will change the wording of the error to be a little bit more explanatory and informative.

[davidhund]

I see where you are coming from, @israelidanny, but disagree with your assumptions.

You mention that "Most people would expect desktop design on a desktop screen, be it whichever browser." — To that I'd say that users generally do not compare websites in various browsers and devices. Site-visitors on IE8 does not have a PNG of the 'desktop-design in Chrome on a macbook' handy to compare with their current experience. They do not switch browsers to check for design inconsistencies. That's something front-end developers do ;)

Users simply 'expect' a usable, delightful experience (difficult to deliver on already). My claim is that a mobile-first approach & progressive-enhancement delivers exactly that: it provides the best usable experience for all browsers and only(!) adds ('expensive') features to UA's that do support them.

Note that this is not to say the IE8 'design' should remain identical to a 'mobile layout' (e.g. hamburger menu, one-column, etc) — There are many ways to PE a site for IE8 (see above).

My claim is that your IE8 users rather have a quick-loading site without extras than an identical design to some (to them unknown) modern browser.

Whether you decide to add Respond.js and provide MQ's to IE8 is all up to you. It could very well be a requirement, but not because users expect a similar design across browsers :)

As for "mobile design a lot of times relies on features exclusive to evergreen browsers" — huh?! You seem to mistake 'mobile design' for 'top-of-the-line-iPhone/Android-device-design', and even then this statement makes little sense to me.

If your 'mobile design' relies on features exclusive to evergreen browsers you are 'doing it wrong' IMO. The browser is a hostile environment and mobile browsers even more so. Generally speaking: 'mobile design' should account for the limiting factors of mobile devices: slower connections, less screen-space, less powerful CPU, older(!) browsers (that are 90% not evergreen), etc.

But maybe I misunderstand you.

I hope you'll excuse my rant. I do not mean to criticize but I do think this stuff is very important :)

PS: changing the wording as you mention is a great idea, thanks ;)

[etodanik]

Alright, I see where you are coming from.

In your opinion, what would be the most helpful and correct copy for this kind of situation?

[davidhund]

I guess something like:

"No support for Media Queries. CSS in Media Queries will not have any effect."

and then below you could mention PE/Mobile-first together with the polyfills such as Respond.js:

"Build 'mobile-first' and have IE8 use the basic 'mobile' layout or provide alternative styles with Conditional Comments. You could also 'polyfill' Media Queries with e.g. Respond.js"

This would give a clear indication of the issues and potential fixes. But I'm sure others could improve on the messaging.

[etodanik]

Alright, I'm gonna implement something like that today, and others can send a PR if anyone finds a better wording.