Making Internet Explorer 8 Behave in 2013

In 2013, websites will almost be exclusively developed with HTML5 and the latest CSS modules. HTML5 tags such as <header>, <nav> and <footer> are going to be used frequently. For responsive designs, the use of CSS media queries will be necessary to “respond” to a device or browser width. Websites for mobile devices need quick download times and the use of CSS instead of using image files alleviates that.

But of course Internet Explorer 8 (IE8), doesn’t support the latest versions of these languages. IE8 will ignore any of the new HTML5 tags. It will ignore all CSS media queries and all your fancy CSS buttons that use CSS for rounded corners, drop shadows and background gradients will appear like generic solid-colored rectangles. Should we care? People still use IE8?

We’re just into 2013 now and unfortunately for web developers, IE8 usage is still noticeable. This can mostly be attributed to all the people who continue to use Windows XP and who will not / cannot / don’t want to upgrade any higher. According to Statcounter’s stats, during the last three months of 2012, worldwide usage of IE8 was at 12.05%. Internet Explorer 9 (IE9) was at 17.68% . So it’s fair to say there is a decent amount of people browsing the web who still use IE8.

Luckily for IE8 users and web developers, there is a way. By using these three tools in your web development arsenal, you will surely be able to deal with IE8 in 2013:

  • Modernizr 2 LogoModernizr (http://modernizr.com/) – Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. Basically, using Modernizr will let IE8 identify any HTML5 and CSS3 tags instead of ignoring them.
  • defaultlogocss3-mediaqueries-js (http://code.google.com/p/css3-mediaqueries-js/) – css3-mediaqueries.js by Wouter van der Graaf is a JavaScript library that applies CSS3 media queries. Using this script will allow that snazzy responsive layout to be responsive in IE8 too.
  • logo-PIECSS3 PIE (http://css3pie.com/) – PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties. Using PIE will enable the much-used CSS properties such as border-radius, box-shadow (also known as rounded corners and drop shadows) and background gradients in IE8.

Each of these tools are fairly easy to implement and might require a little tinkering around with to adapt to your code. But once you have them working correctly, you’ll be saving yourself a lot of time and grief when developing your website and it HAS to be IE8 friendly.

Need expertise for your next website design? Contact us today for an assessment and view our current web design portfolio.

FRESH RESOURCES DELIVERED

Want to show your colleagues how smart you are? Get actionable ideas written specifically for B2B marketers – subscribe to the BeBop newsletter today!

Related Posts
B2B Branding | B2B Marketing

How Marketing Leaders Can Protect a Brand from Unintended Chaos

B2B Marketing

New Year, New Wins: Planning Essentials for B2B Marketing Leaders

B2B Content Marketing | B2B Marketing

B2B Marketing Strategies that Convert