CSS Unused CSS Stages Media Queries Device-Specific Media Queries: Part 1

Tobiasz Gala
seal-mask
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,517 Points

Mobile First Design and Media Queries

So I just watched Media Queries series in CSS Foundations course and I realized that Mobile First Design is not good when we look at IE 8 and below. In the course I learned about "only" operator and IE 8 and below ignore CSS code in media queries so they will see the code created for mobile. So by creating desktop first design those browsers will see code for desktop first.

Is there a better way to implement mobile first design in browsers which don't support media queries?

3 Answers

Kevin Korte
Kevin Korte
28,102 Points

First, yes, polyfills should be avoided if possible. I may have misunderstood your question. I initially read your question as a way to support media queries in IE8, and it simply isn't possible without some sort of polyfill.

With that said, two thing come up. One is I wouldn't drasically make changes to my workflow to support IE8 or any legacy browser. Second is I truthfully woudn't feel bad about using a polyfill to make an older browser work like a modern browser would. I would put some sort of conditional loading to not load polyfills that were unnecessary to every browser.

The idea behind mobile first is not so much about media queries and such, but rather to establish a content hierarchy. When designing mobile first, we figure out what information we truly need accessible to the user. What do they need to use the site. Than as the screen real estate grows, we can add in more features or items, change the navigation, etc. I do feel it's easier to get your core foundation done correctly at a smaller scale first, and than scale up from there.

With that said, you can still be mobile first and have everything outside of a media query set up for a mobile device, or set up for a desktop. Your design process started at the mobile level, but at which end the media queries go is up to you.

So you could have media queries for the phone and tablet sizes, and no media queries for desktop size. Us the only operator and IE8 should only receive the desktop version, which probably for most sites will be just fine.

If your site needed additional tweaks for IE8 or lower since it won't recieve media queries, you could use conditioal loading and load an additional style sheet for any neccessary overrides.

Something like

    <!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
    <![endif]-->

All of this depends on the the site itself. There is no solution that is the right choice every time. At some level, you will have to penalize users of legacy browsers like IE8, but that's what they get for not updating their browser. You could also throw them an alert or notice on your site informing them they are using a very old browser and encourage them to update it.

I'm getting ready to start a site redesign for a company that deals with farming, and their clients are lots of small man farming operations. I've been collecting data on their current site to see what browsers I'll have to support.

As of July 2014, almost 20% of their traffic is coming from IE8, so I have this same mountain to climb very soon.

Tobiasz Gala
seal-mask
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,517 Points

Thank you for answer. I think that better approach is to use only operator so older browsers ignore code in media queries and apply if lt IE 9 condition which u provided instead of using respond.js

Going back to mobile first design I agree that it is a good thing to do however u also said that in mobile first design using media queries is up to us. It sounds more like fluid design not responsive design which I would like to implement and this is why I care about media queries.

Kevin Korte
Kevin Korte
28,102 Points

Yep there is nothing wrong with conditional stylesheets but it still won't make it "responsive" which is why I recommended respond.js and thought that was what you were after. You still won't be able to make modules go from floating next to each other, to block elements stacked on top of each other, at least not through the use of a media query like normal.

To clarify: What I meant was where to use media queries. I may have missed a word in there. It's up to you where to put media queries. You could code everything so that without a single media query it looks good on mobile, and than as the device screen gets larger you add in media queries to make adjustment, or you could go the complete opposite and code the site so it looks good on a desktop computer, say 1200 px or bigger without any media queries, and than use media queries to control the modules as the screen gets smaller. Both are mobile first if you started with mobile in mind first, but the decisions as to what device gets the media queries is up to you, the developer.

In your case, with your desire to support IE8, it might be easier to have the media queries target the smaller devices. Hope that helps. :)

Kevin Korte
Kevin Korte
28,102 Points

Ahh yes. First, Foundation 5 doesn't support IE8, because it requires jQuery 2.1.1 which doesn't support IE8. I would imagine the grid would still work fine on IE8, if media queries worked, but user beware of using any jQuery elements in foundation with the desire to still support IE8.

As of now, Bootstrap V3.2.0 still supports IE8. It's jQuery dependency is still at 1.11.1 which does support IE8. Granted that you could get media queries to work.

With a big framework that already has media queries and like thrown in, probably the most popular way to solve this is to use a polyfill called Respond.js.

https://github.com/scottjehl/Respond

This should get IE8 to start to behave like you want. Read the documentation and it'll explain how to set it up, and how it's doing.

Tobiasz Gala
seal-mask
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,517 Points

Ok but respond.js makes to many unnecessary requests which slow down website and this is not a good solution to use. There is still around 5 % of population which use IE8 and I just wonder is there any better way to support media queries. If not then mobile first design is not good :) By designing desktop first website and using "only" operator we are able to make websites look good in modern browsers and IE8 and below too. This is how I understand it by watching this video http://teamtreehouse.com/library/css-foundations/media-queries/adaptive-layouts-with-media-queries-2