building mobile first with support for ie8

By Geoff Muskett

Sounds like a contradiction? Yes to a degree it is. But I’ve been pondering a workflow concept to achieve this (literally, just pondering), even if it goes against current best practise as championed by, well, everybody. Basically, best practise is this:

Accepted Best Practise

HTML
<div>First div</div>
<div>Second div</div>
SCSS
div {
  // mobile styles are the default
  width: 100%;
  border:1px solid #fff;
  background-color: #d5d5d5;
  padding: 1em;
  text-align: center;
  float: none;
  @media only screen and (min-width: 30em) {
    // larger screen styles applied above breakpoint
    width:50%;
    float: left;
 }
}

The above is a great workflow, and if you don’t need to worry about ie8 or below then life is good and you don’t need to read on, just go and build your site! If like me you need to support older browsers, then my concept may be of interest.

The problem with ie8

First, some background. Annoyingly, IE8 is not going away for a while. It’s the last browser on XP, while browsers are easy to update, often automatically, it’s a bigger deal to update an operating system. Consequently they don’t get updated very often.

Statcounter proves that IE8 won’t budge in the near future. In the past year IE8 shows only a 3.5% decrease in overall marketshare. Interestingly marketshare has increased┬áby nearly 2% from July 2013 to October 2013 to a level just under 10%.

Much of this is down to medium or large companies. They often have internal systems that are designed to work on a specific browser – usually IE7 or 8. Consequently browsers cannot be upgraded due to the cost of making systems to play nice with modern browsers. Which is part of the reason why Microsoft cannot be particularly agile with browser development (although this seems to be changing with IE11).

Yes, of course Chrome/FF etc are available for XP, but there are a large proportion of users who don’t care what browser they’re using. And why should they?

If I’m catching a bus I don’t care which company is running the service, even if one has slightly comfier seats, I only care about getting to the destination. Liken this to the internet for people that don’t care about browsers, they only want to get to the content.

Lets call these folks ‘the unpledged’

I’m not having a dig at people who don’t upgrade browsers, it’s simply just not their thing. Which is fine.

If the goal of ‘the unpledged’ is to get to content, they are in fact an argument for best practise, detailed above. So serving up mobile styles is fine. Great, but here lies the problem…

‘Unpledged’ Senior Management

Senior managers are busy people with a lot more to worry about than browser choice. However they may well expect a new website – which is potentially a substantial investment – to look great on their computer.

Educating

It’s easy to say we just need to educate, but in my experience educating ‘unpledged’ senior management, or infact anyone who falls into that category, is an uphill battle. Especially if there are a lot of them in the organisation. You can recommend, and give reasons, but without buy-in from IT departments you may struggle.

The Concept

So, this is my thinking. It’s not a workflow I’ve employed on any deployed projects, more just thinking aloud.

Start with mobile styles as before, but wrap them in a max-width media query:

div {
@media only screen and (max-width: 30em) { 
 // small screen styles, write these first
 width: 100%;
 border:1px solid #fff;
 background-color: #d5d5d5;
 padding: 1em;
 text-align: center;
 float: none;
 }
}

Go ahead and build the site for small screens in this way. For this demo we’ll assume there only needs to be one break point. Once the small screen layout is designed, start adding the larger screen styles, like this:

div {
 // larger screen styles
 width:50%;
 float: left;
 @media only screen and (max-width: 30em) { 
 // small screen styles, write these first
 width: 100%;
 border:1px solid #fff;
 background-color: #d5d5d5;
 padding: 1em;
 text-align: center;
 float: none;
 }
 }

The downside

The above works, however one of the nice things about best practise workflow is that styles cascade nicely. With my concept, styles like background colour would either need to be declared twice, or moved from the media query to the default. Which is a bit of hassle.

Overall thoughts

If you have to deal with ‘unpledged’ senior stakeholders this may be a route to take. However it would increase file size slightly, and build time, but other solutions like conditional stylesheets, for supporting IE8 and below would increase build time anyway.

When I say supporting IE8, I mean providing large screen styles. It won’t be responsive, but to my knowledge no small screen devices (pretty much anything under 1024px) use the IE8 rendering engine. However if you are looking to make IE8 work like newer browsers Respond.js may well be the answer.

Any thoughts from people who have to support IE8 or below? What are your techniques?

Comments

Leave a Reply

Your email address will not be published.

Join my newsletter

If you’re looking for insights into web design and development, and crafting a successful presence online, then you should join the smart folk on on my newsletter. I discuss my thoughts on an issue relating to the web, then provide and teach effective solutions.