What Browsers Should I Support?

Cataclysmic

New member
Jan 31, 2009
164
2
0
Canada
I have a website which is almost finished being developed. What browsers/versions/resolutions should I test in?

I visited BrowserShots.org which has a ton of browsers that I've never heard of, and which I'm sure 0.000001% of the population uses. I'm not concerned about those. I just want my site to look good to 99% of the population...

So what should I test?

My developer used techniques from CSS 3 & HTML5... so my site looked strange in IE8, but I upgraded to IE9 a couple days ago and now everything looks great. Is IE8 still commonly used? Am I screwed?
 


Across the entire internets, certain browsers are more popular. But for a particular niche it can vary widely. If you've got a gadget site with lots of techies then Chrome and FF will dominate. But if you're targeting a more general audience or less tech-savvy users then IE might occupy the majority. If you have another site in a similar niche, that site's analytics will tell you the full story.

If you're not sure, you can probably target the latest versions of Chrome and FF, and IE7. You should fix the IE8 bugs at least, that's still pretty common.

IE6 is the devil. Forget IE6 unless a huge chunk of your audience uses it. Youtube and Facebook dropped support for it despite it having a not-insignificant market share, that should tell you how much it sucks.

1024x768 is the common standard, though monitors are getting bigger nowadays. To be safe you can make your width no greater than 960 and you should be fine. I think Adobe's standard for height (as in, content that's above the fold) is 600 px.
 
Across the entire internets, certain browsers are more popular. But for a particular niche it can vary widely. If you've got a gadget site with lots of techies then Chrome and FF will dominate. But if you're targeting a more general audience or less tech-savvy users then IE might occupy the majority. If you have another site in a similar niche, that site's analytics will tell you the full story.

If you're not sure, you can probably target the latest versions of Chrome and FF, and IE7. You should fix the IE8 bugs at least, that's still pretty common.

IE6 is the devil. Forget IE6 unless a huge chunk of your audience uses it. Youtube and Facebook dropped support for it despite it having a not-insignificant market share, that should tell you how much it sucks.

1024x768 is the common standard, though monitors are getting bigger nowadays. To be safe you can make your width no greater than 960 and you should be fine. I think Adobe's standard for height (as in, content that's above the fold) is 600 px.


Agreed. Maybe redirect all IE6 to an email submit ;)
 
I test in IE6, 7, and 8, the latest FF, Safari, Chrome and Opera. There's no reason why your site, even if developed with CSS3 and HTML5 techniques, shouldn't work in IE6. Just because major players have officially stopped supporting IE6 doesn't mean their sites don't work in it. IE6 usage is still high enough, at around 4% of users, that it warrants making your site at least function properly in it. No one with an ounce of business sense should be willing to throw away 4% of their customers simply because they are lazy and don't want to make the effort. There can of course be cosmetic differences, whether you want to call this graceful degradation or enhancement is up to you, but even these can be mitigated with the likes of CSS3 PIE and shims. Cosmetic differences are perfectly acceptable though. Your site doesn't need to look exactly the same in every browser.

Scope HTML5 Boilerplate if you want a rock solid foundation on which to build cross browser sites in HTML5 and CSS3 all the way back to IE6. HTML5 Boilerplate - A rock-solid default template for HTML5 awesome.
 
There's so many factors into your decision, but as others have said: it comes down to the niche.

Don't worry about the browser so much as the rendering engine it runs off of. Chrome and Safari use Webkit. So, both will most likely show the same based on their rendering engine. Chrome will support more features than Safari in HTML5, but their box model for CSS support is still the same so you shouldn't have too many descrepancies.

Firefox uses its own Gecko engine. It's comparable to Webkit, but some things still show differently.

IE is a different story but it has gotten much better since IE6. IE7 made a vast improvement over the previous box model support and fixed a lot of margin bugs. IE8 is even better, and IE9 is suppose to be completely CSS3 compatible.

The real question you should be asking yourself is: do I want to make every browser view the same, or do I just want them to get a good experience? You can spend tons of time hacking CSS files to make every user see the same thing, but is it the best use of your time?

Unless they're a power user, chances are they won't be viewing your site in multiple browsers. So, how are they going to know that you don't use rounded buttons in IE but you do in other browsers because only IE9 supports CSS3 rounded corners?

Build something that looks great without hacks. Don't build the core functionality and design off of CSS3 properties, HTML5 only-supported elements, or browser-specific elements and you'll have a design that works in every major browser.

Oh, and this will be your friend: ie7-js - Project Hosting on Google Code
 
IE6 usage is still high enough, at around 4% of users, that it warrants making your site at least function properly in it. No one with an ounce of business sense should be willing to throw away 4% of their customers simply because they are lazy and don't want to make the effort.

It's not a matter of being lazy. It's a matter of cost versus benefit. Fully supporting IE6 costs significant development time and resources. Sure you can optimize your CSS and layout, but IE6 wreaks havoc on cookies, JS, and just about any other component of UI for websites and web apps. Develop for IE6 if a significant portion of your users require it. Otherwise ignore it (Even Microsoft is encouraging users to get rid of IE6 ). That's good business sense.

Good thing this won't be an issue when Microsoft stops supporting IE6 in 2014.
 
  • Like
Reactions: jordanj77
Can't wait until IE6 dies officially. I do make sure sites at least display with no massive visual errors on IE6, but dont spend too much resources/time on it. If you get your CSS,etc done correctly it should generally be IE6 compatible anyway.
 
As others have said dont waste your breath on IE6 its the biggest pile of shit out there and you shouldnt need browser hacks to make your site work. I would even put IE7 in this category but its not nearly as bad as IE6. Test in the latest verions of IE, Firefox, Chrome, Safari, and Opera. If one of those old school browsers comes through, redirect them to the proper upgrade links.
 
If you have something like Google Analytics you should be able to get a browser / OS breakdown reports with versions. Plan according to what you find. Here is my recent sample (% of Visits) -

1. Internet Explorer 40.92%
2. Firefox 21.30%
3. Safari 19.81%
4. Chrome 13.59%
5. Opera 1.28%
6. Mozilla Compatible Agent 0.99%
7. Playstation 3 0.76%
8. Opera Mini 0.65%
9. Playstation Portable 0.11%
10. BlackBerry8530 0.08%

Breakdown of IE by version (total of the 40.92% above):

1. 8.0 73.21%
2. 7.0 19.12%
3. 6.0 6.38%
4. 9.0 1.27%
5. 5.5 0.01%

This puts IE 6.0 at 2.5% of the total and this is a very general public type of site... So you can forget about IE 6.0 and test everything else.
 
My developer used techniques from CSS 3 & HTML5... so my site looked strange in IE8, but I upgraded to IE9 a couple days ago and now everything looks great. Is IE8 still commonly used? Am I screwed?

Yes IE8 is still big, IE9 isn't even out of Release Candidate status (beta) so you can't ignore IE8, even when IE9 goes gold people upgrade slow as hell.

Did your dev use HTML5Boilerplate? It's geared toward backward compatibility and support for as far back as IE6 (in as much as is reasonably possible). You may want to find out if it was used and if not incorporate its IE hacks.

HTML5 Boilerplate - A rock-solid default template for HTML5 awesome.

Edit: my bad, just realized Fatbat posted boilerplate link already.
 
^^^^ I check things on an itouch and my android phone too.
In addition to IE8, Firefox 3, Safari.
I keep IE6 in mind but don't waste to much time thinking about it.

Don't like a lot of hacks to make things work and hate making code bloated because you are going to look at the page a year from now and wonder what the hell you were thinking when you did it.
 
You need to support them all. Narrowing down browsers by niche is always wasteful. If you're having issues or worries about compatibility, then your web designer may need to re-think the framework and design of the site.

Every site I design these days I test in all of the major browsers, along with Android, Blackberry and iPhone mobile devices.

Resolution isn't much of an issue unless they are using some sort of fixed image or design, in case I would direct you to my first statement above.