Top 3 Drupal Design Considerations for Internet Explorer

Submitted by Jeremy Kleier on 04/15/2013 - 10:31:am

Not all browsers are equal. When you start the design process you need to take into consideration what browsers you want to support. Traditionally, Chrome, Safari, and Firefox can handle almost all CSS3 properties. Internet Explorer (IE), on the other hand, has been a late-comer to  the CSS3/HMTL5 game; web pages taking advantage of the CSS3 will look differently depending on the IE version you're using.  

When starting the design process it's important to consider what can be done if each browser you need to support has older versions. Each of these design elements should be discussed with your designer and front-end developer before starting your project. 

Here are some common design elements that don't work in older versions of Internet Explorer:

Border Radius

Border Radius is used when creating buttons and rounded corners for objects. The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera.

This is the easy way to create buttons.

 

What it looks like in IE8 and earlier:

What a Round corner looks like in IE8

What it looks like in a modern browser:

Drop Shadows

The box-shadow property is supported in IE9+, Firefox 4+, Chrome, Opera, and Safari 5.1.1.

 

 

What it looks like in IE8 and earlier:

What a box shadow looks like in IE8

What it looks like in a modern browser:

Text Shadow

Text Shadow is a good way to add dimension to your site. 

Example of Text Shadow

 

What it looks like in IE9 and earlier:

what text shadow looks like in IE8

What it looks like in a modern browser: