Home Classroom 7 easy steps to creating an Internet Explorer Compatible Website

7 easy steps to creating an Internet Explorer Compatible Website

3843

Let’s discuss a topic that most of our front-end web developers are afraid of. IE! The most scariest thing ever invented by Microsoft company long ago.

“I wonder if there is one web developer that never blamed Microsoft about inventing the Internet explorer. “

But I should say this. If you follow the right steps and the right markup when you’re creating your project, pretty sure that you will meet your project output on later IE versions. IE is not something that we should be afraid of.

So, as you read on the headline, I’m going to point out some valuable steps to follow up when your client asks you to create an IE compatible website.  Ok then, let’s start with our 7 points.

  1. Make up your mind and think “Hey I’m not afraid of IE. I’m going deal with it”
  2. Use a CSS Re-setter.
  3. Maintain a clear and validated markup. Both CSS & HTML.
  4. Use JS/jQuery libraries that give support to the IE to work well with CSS3 & HTML5.
  5. Keep different style sheets to IE versions.
  6. Use IE’s built-in Developer Tools to debug issues.
  7. Kindly ask website visitors to upgrade their browser.

Ok guys. That’s all I’m going to explain in this article. Let’s roll.

01. Make your mind and think “Hey I’m not afraid of IE. I’m going deal with it”

This is the most important thing. Making your mind to deal with IE. If you keep telling “I hate IE, I can’t make my website to work with IE” to your mind, you’ll end up with a scary looking website on IE and you will lose your valuable client. I’ll give you one of my personal experiences.

One day I had a client and I was about to do him a personal website. So I completed the project and asked the client to test website. And after a while client called me and told,

“Hey, why is this site ugly on Internet explorer? It’s messed up! Please check it.”

Also he sent me some screen shots, but really couldn’t find that issue in my local testing machine. So I asked him his browser version. But his answer was “Why are you asking about my browser? You should be able to create the site making it available to everyone. Not just for me. I won’t tell you about my browser. Fix it anyway. ”

Yeah that was a really bad day for me. Don’t be afraid of IE. Face it.

02. Use a CSS Re-setter. 

Here we go on to important points. Almost every web browser has its in-built CSS Styles to apply to website elements. Easiest example is, because of those inbuilt styles we see different sizes for heading tags. (h1/h2/h3 etc.) . Most of the layout problems on IE are coming because of these inbuilt styles.  So by using a reset.css we can make those all inbuilt styles powerless and our styles will work well. That means, we make them all to 0.

All you have to do is download a css resetter from this site and link it in <head></head> tag. Use it as first css external file & place your other css files under that.

http://www.cssreset.com/

03. Maintain a Clear and validated Markup.

Maintaining clear markup is really important in almost every programming language. So you can get rid of lots of syntax errors and browser errors. Also it’s a good practice. So clear markup will help a lot when you or someone else customizing your project on a later day.

Use online HTML and CSS validators to check your coding errors. Most of the simple errors will automatically be fixed by Mozilla and  Webkit browsers (Firefox, Chrome & Safari). But IE won’t do that. You have to do correct coding if you wish to create an IE compatible website.

Validate html/css- http://validator.w3.org/

Its better if you can create a 100% validated markup. But its not 100% necessary because W3 validator doesn’t support and haven’t updated some of the latest HTML5 & CSS3 syntax.

Tip: Always use CSS Floating & Clearings. It’ll really help you to avoid layout issues. (Use Google to study them)

04. Use JS/jQuery libraries that give support to the IE to work well with CSS3 & HTML5.

As we all know, IE lacks HTML5 support & CSS3 Support. Even IE 10, doesn’t fully support HTML5. So we have to use some 3rd party JavaScript plugins to give IE the ability to support HTML5 & CSS3.

Did you know that IE will simply ignore HTML5 elements that it doesn’t recognize? Even IE8 behaves this way?

Here I’m listing some useful plugins that I’m also using, with a little description .

  • Selectivizr – http://selectivizr.com Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors (:nth-child, :last-child, :first-child etc.)  In Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.
  • HTML5SHIV – https://code.google.com/p/html5shiv html5shiv is the plugin that helps us when we want to use HTML5 on IE. This plugin will simply create HTML5 elements on IE browser by inserting element names into the DOM via document.createElement. The result allows you to continue to make use of HTML5 elements without having to worry about IE.
  • Modernizr.js – http://modernizr.com Modernizr is a small and simple JavaScript library. Modernizr  adds classes to the elements which allows you to target specific browser functionality in your stylesheet.  So you can write your stylesheet more efficiently to IE as well as other browsers supporting Rich Web technologies.

05. Keep different conditional stylesheets on IE versions.

Did you know that you can write different stylesheets to different browsers?

Simply when you are about to create an IE compatible project you can’t just depend on a single stylesheet. Because you’ll die fixing browser to browser CSS issues and using css hacks. I bet, when your website works fine on Chrome, IE will troll you. So why don’t you use different stylesheets to IE versions. You can use the exact fix just to the version of IE you want.

You only have to follow some simple steps. Check this Chris Coyier’s “How to Create an IE-Only Stylesheet” article. It includes all the steps you can follow. http://goo.gl/rh7Q2U

06. Use IE’s built-in Developer Tools to debug issues.

I think you are already using Chrome’s Developer tools & Firefox’s Firebug tool.

Using chrome’s Developer tools – http://goo.gl/FfY1Op | http://goo.gl/jE9Ykk
Using Firebug – http://goo.gl/RD5x5t

So just like these developer tools, IE also has an inbuilt set of developer tools. But they are not that much rich in features nor functionality. You can’t do much with older IE developer tools (according to my view). But IE 11′s Developer Tools are really rich and awesome when we compare to older versions. Even with IE 11′s Developer tools you can test responsive web designs.

Check this article from tutsplus if you wish to learn more about IE 11′s Developer Tools.

The new IE11 F12 tools – http://goo.gl/8S4IHl

Always use the latest IE version, so that you can check your project even from all older versions of IE.

07. Kindly ask website visitors to upgrade their browser.

This step is not just for you. It’s for the all of us. It’s a help for all web developers around the world. Kindly ask IE users to upgrade their browser or move to a rich web browser. This can be tricky, but if you are persuasive and convincing enough by explaining the reason, you might be able to make the user and the clients shift to a newer version or change their browser altogether.

This is my very first article on Digit Magazine and hope you guys got some useful tips. Please leave a comment about this article. I’ll be back with another article.

Comments

comments

NO COMMENTS

Leave a Reply