When Browsers Make Websites Look Bad
Friday, March 2nd, 2012Thank you, Internet Explorer, for another gray hair. As if I needed that. But there you go, rolling out another version of your web browsing software and forcing all of our clients to upgrade from IE7 or IE8 to your new IE9. IE9 is the primary browser on 36.2% of Windows 7 machines, and it’ll keep growing.
When Browsers Make Websites Look Bad
Now all of our clients’ websites will look funky, and they’ll wonder why.
Then the phone will start ringing. I’ll have to explain that their websites were built before your new browser appeared. I’ll have to tell them that a website doesn’t automatically update to match new browsers. I’ll have to find a way to explain why IE9 is a web designer’s nightmare.
In other words, I’ll have to explain what cross-browser compatibility is, and why the same sites look different depending on which browser someone is using.
What is cross-browser compatibility?
For this, I rely on NetMechanic, who describes the way browsers interpret information with this analogy:
Your Web browser is a translation device. It takes a document written in the HTML language and translates it into a formatted Web page. The result of this translation is a little like giving two human translators a sentence written in French and asking them to translate it into English. Both will get the meaning across, but may not use the same words to do so.
When we roll out a new website, we’ve got it covered. We test all of our new sites in the most used browsers to make sure they display pretty much the same in each. We also build our sites to “degrade gracefully.” In other words, if some new and unidentified browser or device comes out that doesn’t support the way we’ve built the site, it still looks reasonably OK. We do all of this before we even launch.
Sometimes, though, a new Internet browser pops up, and all sites need to be tested against it. It’s always a good idea for anyone with a website to make sure their site is usable across all the most popular browsers (old and new), mobile devices (like iPads or iPhones), or any other web browsing devices.
The web browsers that matter
How does one find out what browsers are most important for testing a site? Start with looking at an analytics account, something like Google Analytics or Clicky. Another handy technique is to check usage share for most browsers. According to StatCounter, here’s how they’re breaking down for February 2012:
- Internet Explorer – 35.75%
- Chrome – 29.84%
- Firefox – 24.89%
- Safari – 6.76%
- Opera – 2.03%
- Other – 0.73%
Cross-browser testing tools
Then it’s a matter of downloading all of those browsers and seeing how it looks. There are also a number of useful tools that make this job a little bit easier, especially because it’s time-consuming to install all of the major browsers.
Here’s a brief run-down of cross-browser testing services from Noupe:
Adobe Browser Lab
Adobe Browserlab offers an awesome solution for viewing on demand screenshots of your site.
Browsershots
Makes screenshots of your web design in a lot of different browsers. After you submit your URL, it gives you a url where your screenshots will be loaded up.
Browser Sandbox
Runs an application to view your site in a variety of browsers.
(More tips on what to check on the healthy website checklist.)
My guess, IE, is that this nonsense isn’t going to end any time soon, especially since your share of the market is on such a sharp decline. So I’ll just keep an eye on the grays and do my best to keep on the treadmill.
(While I’m at it, thanks to you too Firefox, for all of your upgrades, and a tip-o-the hat to Chrome and Safari for keeping up the guesswork.)
[Image: Flickr user bottled_void]
