Mobile first development and IE8 support

What is 'Mobile first development'?

When coding a responsive website, there's two approaches one can take:

1. First built the full webpage suitable for large screen devices and then add styles to essentially scale back that design for smaller screens, often choosing to hide elements unsuitable for small screens.
2. First build your webpage for a small screen device, and then add more styles for how this content appears on larger screens, again added styles to handle new elements you may wish to introduce for larger screen users.

note: you'll notice I don't refer to designs as 'mobile' but prefer 'small screen'. This is because a responsive design should be suitable for the screen size it's being displayed on and not trying to identify the device as mobile, tablet, notebook etc...

The second approach is Mobile first development. The advantages of designing for mobile first is that it forces you to focus on the content of the webpage and it's purpose without getting carried away with fancy page layouts and design. It also encourages you to honour your small screen users and write design that it's suitable for them. They're not getting a limited experience, they're now getting the primary experience.

The problem with IE8

So the issue with IE8 is that it won't read anything inside a css media query - it just ignores the rules entirely. Using Shiv enables Html5 support, but not CSS3. 

So if you write all your core CSS for mobile and put your large screen rules in media queries, you'll find that IE8 will essentially load the mobile version every time.

The fix

The fix is in how you format your CSS. Whilst writing your 'mobile first' CSS you need to be conscious of any rules that apply specifically to the small screen device. These 'small screen specific' rules need to go inside their own media query (eg: max-width: 799px). Better yet, write your CSS as normal, when you come to adding rules for larger screens don't duplicate the small-screen rule, but instead move the small screen rule into its own responsive media query and let your new rule replace your core CSS.

example:

.hero-banner{
    display: none;}
@media screen and (min-width: 800px) {
    .hero-banner{ 
        display: block;    }
}

would now become:

@media screen and (max-width: 799px) {
    .hero-banner{
        display: none;    }
}

Summary - TL;DR

So it's possible to still develop for mobile first however the mobile specific rules need to go in a media query to stop IE8 loading them - that's if you care about supporting IE8 and Windows XP users ;)