Most web designers will likely tell you that they are not huge fans of Internet Explorer (IE). The fact is when it comes to CSS (Cascading Style Sheets) and the visual display of websites, IE doesn’t hold a candle to its more advanced counterparts like Firefox, Safari, Chrome and Opera. The problem is most of our clients use IE. Not because they prefer it, but because it came pre-installed with their computers. This brings me to the much debated question:
“Do all websites need to look the same in all browsers?”
I began building websites professionally in 2001. I tried for hours to make sure that all of my designs looked perfect in the few browsers we supported: IE6, Firefox and Safari (Mac). As the years went on, newer versions of all browsers were developed with CSS bells and whistles that could be used by designers to create a richer user experience, but IE fell further and further behind. For a long time, I thought I should build sites for IE and forego the visual enhancements that could be achieved on other browsers.
Alternatives
In the world of frustrated web designers, there are mainly four choices we have when it comes to how we want our users to view our websites.
1) Design for the least advanced browser. Not very fun or forward thinking, but safe.
2) Advise users to upgrade. Advise the user that their experience would be better if they upgraded their browser.
3) Show a completely different version. Serve an alternate version to users of older browsers.
Stopdesign in a modern browser
Stopdesign in IE6
4) Design for the most advanced browser. But have the ability to still show a working website to non-capable browser.
Up until this year, I have primarily used option one and occasionally used option two, but from here on out I am sticking to number four. I feel that it’s very beneficial to reward visitors who use capable browsers with the visual enhancements they can offer.
Now don’t get me wrong, I DO NOT approve of a website that appears broken or that doesn’t give the user access to certain content because of the browser they’re using. I am merely saying the visual appearance doesn’t have to be 100% exact across multiple browsers.
A Few Enhancements
These CSS extras aren’t anything that would ever completely make or break the design of the site; they are simply enhancements. For the user of a non-capable browser, they’ll never know the difference, but for a user who chooses to use a modern browser, they will have the ability to see a website the way I intended it to be.
Text-Shadow
Text shadow is typically used for a drop shadow. Something that is incredibly easy to do in the print world, but on the Internet, our friend IE (6,7, and 8) doesn’t like it.
Modern browsers (left) Internet Explorer 6, 7, 8 (right)
Border-Radius
Border radius applies a rounded corner to certain elements without having to use excessive graphics to achieve the same look. If rounded corners aren’t pertinent to the brand, then I would rather use CSS to achieve this look.
Modern browsers (left) Internet Explorer 6, 7, 8 (right)
Box-Shadow
Box shadow is very similar to text shadow, but it only applies to boxes. Once again, if it’s not pertinent to the brand then let your CSS do the heavy lifting. This technique can save many hours of time if you have multiple boxes at different sizes and corner radiuses.
Webkit (left) Internet Explorer 6, 7, 8 (right)
There are numerous other CSS enhancements you can begin using today, you just have to decide how far you want to take it.
Final Stand
As a designer, I live by the details, no matter how small they are. I believe a lot of these enhancements are what can separate an average design from a good or even great one. Like I said before, I certainly don’t condone a website that doesn’t work or doesn’t allow the user to access certain content in non-capable browsers, but I do feel that every website doesn’t have to look exactly the same across multiple browsers. Is this approach wrong or just plain crazy? Let me know in the comments below.