We build all our sites with Bootstrap 3 these days. It’s just awesome and the approach they have taken to responsive design is a real step forward. The primary goal of the Bootstrap 3 release was to support all these mobile devices that are being released so rapidly. There is support for large desktops, medium desktops, tablets and phones and developing layouts that adapt to the different screen dimensions is almost fun!
Unfortunately, most of the features just don’t work on older Internet Explorer (IE) versions. It has taken IE some time to support most of the CSS3 stuff we take for granted and although we build sites to be as future proof as possible, sometimes supporting the past can just be a pain and must be addressed.
The first decision to make is if you really want to support IE and older versions. Check your Google Analytics to get an idea of browser usage on your site. If your site is new, you might not have enough stats to make an informed decision, in that case, use sites like StatCounter Global Stats to help you make a decision. Remember, you normally want to look at stats from your country to get a more accurate represenation of your target audience as you will see huge variances between say Australia and China.
When I looked at it, IE7 and IE6 had such low usage figures that it was an easy decision mark them as unsupported. IE8 was still annoyingly at 8% so I couldn’t just ignore it, even though I really wanted to. Looking at China, where a few of our sites operated, the figures were far worse. IE8 was a stable 30%. I think Microsoft licensing on later releases might be to blame there ….
So, a few hacks are in order to make our pages less awful in these browsers.
Local Bootstrap3 rather than CDN
The first hack is to abandon the Bootstrap 3 library being loaded via CDN. Don’t get me wrong, you want CDN loaded bootstrap. The network performance of using CDNs is a great thing, but in order to use another hack later on, it has to be hosted.
We loaded Bootstrap3 to launch.ly to overcome this.
So, in your master snippet, where you see …
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
replace it with this …
<link rel="stylesheet" href="/spitfire/bootstrap/3.0.0/bootstrap.min.css">
Save and test. You should notice no difference to your site.
HTML5 Shiv + respond.js
Older IE versions do not support lots of stuff. To overcome this, we can now add html5shiv and respond.js to our snippet. Add the following just before the end of you </head> section
Results and testing
Check your site now. The results should be much better than they were. However, how do you test older IE versions?
They let me boot up any number of older images and test how things work. It feels like jumping in to a time machine, but at least I can see how some people view my web pages.