Accommodating IE8 (don’t judge)

Accommodating IE8 (don’t judge)

I just finished a lovely new site with all kinds of bells and whistles. Lots of features and work went into this clean, extensive, and mobile responsive site. I checked it out in lots of browsers, launched, and relaxed. Until the moment that I saw the site had a handful of visitors who were using Internet Explorer 8. I’d love to reach through their computers and help them find the Windows Update button so I could fix that (and many other issues), but based on the demographics for this site, I figured I’d better look to see what they were seeing and, if they were not seeing what I wanted them to see, figure out a way to make their experience better.

Sad layout for IE8
this is what IE8 sees if the screen resolution is less than 1140 pixels wide.
It turns out that IE8 doesn’t understand media queries or setting a specific background size (my approach to serving up a logo file that is retina friendly but works for everyone else. Except, apparently, IE8). So what my IE8 visitors were seeing instead of my lovely site was an oversized header image and a wonky layout that didn’t fit their screen. I’m assuming it doesn’t fit their screen, at least, because I’m thinking anyone still using IE8 is on a smaller screen.

I did some digging to find my fastest/easiest way to deal with this issue (which exists in the new Genesis default theme as well, not just me). If you’re on a slightly older Genesis theme which uses percentages for the content and sidebar widths, I think you’re all right, but the newer iterations have gone back to one standard pixel width, which results in the wonky layout.

I’d like to thank Gary Jones for his general awesomeness, but specifically today for his easy method to get some IE8 (and lower) love going on for your site.

The approach is basically to set up a rule to serve a special stylesheet to the IE8 people. The great thing is that you only have to put in the rules that are specific to IE8, so it can be a very small file, and it seems to work.

There are two parts. First, you need to set up a rule in your functions.php file so that the IE8 stylesheet is served up when needed. Here’s Gary’s code, tweaked a hair:

Then you set up your stylesheet. Here’s mine:

One note: one issue designers are encountering now is to make sure that images look good on both regular and retina screens. The Genesis Sample theme approaches that by serving up a regular logo (if you don’t use the custom header), and then a logo file that is twice as big but displayed at the same size for the retina people. I inverted this a bit for myself and am giving everyone the large logo file, but set at the smaller size. So far it’s working but if someone can tell me why I shouldn’t do it, I’m all ears. Anyway, this approach doesn’t work for IE8, but since I’m already doing this stylesheet, I can upload a special logo file to be called here.

All I’ve done with this stylesheet is opened my main stylesheet, copied out the section that is @media only screen and (max-width: 1139px), and changed the .site-inner and related to be a fixed width instead of a max-width. I could’ve probably done a fixed width and left them with the wider layout, but again, I’m thinking they’re the ones on smaller screens to start with. So far as I can tell, it seems to be working!

Even though I’m not a fan of Internet Explorer, I know a lot of people use it because it’s what came on their computers, or their business hasn’t updated, or who knows. If I can make their website experience a little better without too much trouble, I’ll do it. If you have dealt with this a different and/or better way, I’d love to hear about it!

Do something awesome. Tell a friend:

subscribe by email

If you're an email kind of person, that's totally cool. Go ahead and sign up here to get the latest blog entries in your inbox! No worries, I never share your address.
  • This field is for validation purposes and should be left unchanged.

Reader Interactions

Comments

  1. October 22, 2014

    Thank you for this article Robin, I became a bit lazy with the years, any chance to have a plug in regarding this? I’m having the same logo issue, my Company who employs around 11k people still uses ie6 and ie8 running on xps at least until the end of the year.. shocking!

    • October 22, 2014

      Hey Sandy, thanks for the comment! It might take more effort than it’s worth to put something like this together as a plugin, as I think the styling would need to be done on a per site basis, and that’s where most of the work comes into play. The PHP work is pretty simple, but depending on your site layout, the CSS may be a bit of work. Something to consider though!

      • October 22, 2014

        Thank you for your quick reply Robin 🙂 Fair enough, I guess it will be on my to do list, why can’t they just have the one up to date browser? Maybe one day!

Trackbacks

  1. […] Even Googlen… De oplossing vond ik hier: http://www.robincornett.com/accommodate-ie8/ […]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Bars Code Check chevron-down chevron-left chevron-right chevron-up Envelope Laptop Search Times Facebook GitHub Google Plus Instagram LinkedIn Pinterest Twitter WordPress Logo Wordpress Simple