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?
Kevin Korte28,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.
<!--[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.
Kevin Korte28,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.
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.
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