Imageblog

Back to Blog
Share on:
  • Web
  • Web

Why Your Website Doesn’t Look the Same in Every Browser

By Thad Bloom

Avatar for Thad Bloom

You’ve just received a development link from us, which shows you the progress of your new website. You open it up in Internet Explorer 8 and immediately notice that many elements do not have the beloved rounded corners from the initial design mockup — the ones that you loved so dearly! Upon seeing this atrocity, you might tilt your head back and whisper, “The horror! The horror!” using your best Marlon Brando impression.

Take a breath & watch some funny cat videos, it’s OK! Your new website is in good hands.

If we raised this sort of reaction out of you, it actually means that we’ve done our job. Due to constraints in browser support, you won’t see those rounded corners in Internet Explorer, prior to version 9. We’ve used tactics known as “graceful degradation” and “progressive enhancement” in our development process to ensure that your website uses the latest in modern code — but doesn’t completely break in older browsers. Sure, it might be nice to see those rounded corners in IE 8, but is it really that important? Not really. Visitors who use older browsers are used to not seeing rounded corners in websites.

Browser Support

Unfortunately, Internet Explorer 8 does not support the modern way of coding rounded corners. A few years ago, rounded corners could be added to a website, only by using images and extra code. While this method still works, it forces your visitor to download unnecessary image content — which slows down the time it takes to load pages. If you had 20 different elements on a page, with different colored rounded corners, that might mean that your visitors had to download up to 40 images!

Graceful Degradation

While most modern browsers (ie: Google Chrome, Firefox, and Safari) introduced a way to actually code rounded corners early on, Internet Explorer did not adopt this until version 9 was released, in March of 2011. Sure, that was over 3 years ago, but some people are still using Internet Explorer versions 6-8. However, the number of these Internet users, who are using these archaic browsers, is dwindling each day. This means that we shouldn’t break our backs to give them the exact same experience as a user on a modern browser. This technique is called graceful degradation, and having or not having rounded corners is just a single example.

Progressive Enhancement

The opposite of graceful degradation is progressive enhancement. It is the process of using modern code to deliver an awesome experience to the visitors of your website. Your trusty web developer will use modern code to efficiently create those precious rounded corners. And users who are viewing your website in an older browser will just see sharp corners instead.

Other Common Instances of Graceful Degradation & Progressive Enhancement

Animation

Modern web animation techniques do not work in Internet Explorer versions, prior to 10. As a fallback, there are a few options — the right choice depends on both your budget and target audience. If you need to support older browsers, we can code a JavaScript fallback animation. This works great in IE9, but can be a little sluggish in IE 6-8. If your the majority of audience isn’t using older browsers – and you don’t have the budget for a fallback – it might make sense to remove the animation for those users. A static graphic might do the trick (but just for older browsers!).

Responsive Web Design

To make your website adapt to different devices (phones, tablets, small or large desktop/laptop screens), we use a technique called responsive web design. The code we use to adapt your website does not work in versions of Internet Explorer, prior to IE9. But don’t sweat – we have code in place that delivers the desktop experience for older versions of IE. These older browsers do not need to be responsive — just like the ole’ days.

Proof that I’m Not Crazy

There are many reputable pixel pushers that have written great articles and even created example websites on this very topic, here are some links for further reading/viewing: