When people visit your website, they might not be seeing what you think they see.
You put all this effort in to make it look just right, but someone with a particular browser might see something so far off that they’ll leave in disgust. You don’t want this, do you? Then it’s crucial that you check your site for browser compatibility!
Many webmasters pride themselves on making sure their websites are compatible across all the major browsers (Firefox, Internet Explorer, Safari, Google Chrome, Opera, etc.), but how do they know? They don’t literally download every single browser and open their site up in all of them, do they?
Most designers use a combination of various tools that provide screenshots of what your website looks like in different browsers, and manual checking (to make sure the functionality is intact too).
Luckily, you don’t have to do any of that, and there’s very little guessing, now that Adobe launched “BrowserLab“.
BrowserLab not only provides screenshots, but it allows you to scroll through and interact with your website as you normally would, mimicking any browser you want! It even simulates what your site would do with different Operating Systems (e.g. the dreaded Internet Explorer 6.0 on Windows XP, or Firefox 3.5 on Mac OSX).
This is a very powerful way to verify that everyone who comes to your website is seeing what they should see.
Browser Market Share
In case you’re wondering, here’s the current browser market share :
- Firefox: 47.0%
- Internet Explorer: 37.7% (IE6: 11.1%, IE7: 13.3% & IE8: 13.3%)
- Chrome: 8.5%
- Safari: 3.8%
- Opera: 2.3%
How to Get Started
If you have an Adobe account, you can sign in directly. If not, you’ll have to sign up (free), but it only takes a minute. Here’s what it looks like:
The website I tested in this example is DailyBurn.com (using Firefox 3.0 on Mac OSX). Let’s see what it looks like compared to IE7 on Windows XP:
It appears that DailyBurn is doing an excellent job keeping their design similar across the major browsers. However, BrowserLab offers something I’ve never seen with other browser compatibility services called Onion Skin View (one browser view over another):
Alright, so I know that’s not the most fun thing to stare at, but the point is that simply looking at a couple screenshots (like with the tools I used to use) just doesn’t do the trick!
This view shows us that even though things look similar, the design is shifted between the top 2 browsers, which could cause alignment or other design issues in some circumstances.
In this case, things are very close, but I’ve found a couple examples of my own that are quite far off. It’s best to check this sort of thing out instead of losing visitors due to things you never knew about, so give BrowserLab a try on your site.
