The Last Browser Testing Advice You’ll Ever Need

Everyone knows the basics, you have to support the current version of IE, Firefox, and Safari. On top of that, you have to make sure it functions/looks ok in IE6, Opera and Google Chrome, if your browser stats warrant. In this post I discuss A-Grade browsers, my personal testing process, and graceful degradation vs. progessive enhancement. Read on, my friend, and become an expert on browser testing.

In no particular order

My Coding and Testing Process

I prefer to test in IE 7, Firefox 3 and Safari 3 while I am actually coding the HTML and CSS. I basically keep my HTML open in these browsers and test as I code. When I feel I have it working well in those browsers, that’s when I start checking it out and making fixes in other browsers like IE6 (blech), Chrome and Opera. If I’m working on a project that requires multiple templates for various pages and modules, I like to get a valid template to work from that works with all the major browsers, then branch off and build the rest of the templates for whatever project I’m working on. When I have the templates coded, I will log into a couple different machines (mac and windows), test IE7, IE6, Firefox 3, Firefox 2, Safari 3, Chrome, and Opera. If changes are needed, I go back, make the changes, and start the testing process again. Sometimes I will use BrowserShots.org to get a high-level overview of how things look, but never depend on it for a definitive picture of how it will look.

The Major, Current Browser Versions

Obviously, you need to make it look and function pretty close to the same for IE7, Firefox, and Safari. Like I said, Opera and Chrome should be optional, though they do have a fairly large set of users. I’m not going to quote percentages from sites that only gather data from their own website. Instead, you should always consider your own website (or client’s website) analytics for those numbers. Bottom line, if any minor browser is over 4% of your total visitors, you need to make sure everything at least works.

Avoid CSS Hacks Wherever Possible

IE 7, Firefox 3 and Safari 3 have gotten to the point where you can get them all to look and function very similarly without CSS hacks. The problem with hacks (aside from them not being standards-compliant), is that browser vendors are eliminating these hacks as new versions are released, leaving you (or the person that is hired after you) questioning (months/years later) which versions those hacks work for and why they were added in the first place.

It’s best to write your code as if hacks do not exist until you have exasperated all options. If you still can’t get it quite right, you need ask the following questions about the problem: “Will this issue A. cause confusion for users, B. prevent users from navigating the site properly, or C. affect the company’s brand?” If the answer is yes to any of those questions and a hack exists for the problem you are trying to solve, make sure you separate the hack out of your standard stylesheet and put it in a browser-specific stylesheet like ie6.css and if necessary, pull it into your page inside conditional comments, when applicable.

Progressive Enhancement vs. Graceful Degradation

Graceful degradation asks the question, what features should be unavailable to this set of users? Progressive Enhancement asks the question, what features should be made available to this set of users? You need to have a solid understanding of which user segment you are targeting, then decide whether to add features for more advanced users/browsers or remove features for less advanced users/browsers. These decisions heavily impact the way you code and cause you to start thinking about how to target specific browsers and certain types of users that may or may not care for additional features.

Is there a master list of A-Grade browsers?

Funny you should ask, why yes there is, from the Yahoo! User Interface development team, here. This list isn’t necessarily for browser testing, but it gives you an idea which browsers they feel should be supported for their products. I think it is a good table for our purposes as well. And here they are (updated as of the date of this post):

	Win 2000	Win XP	Win Vista	Mac 10.4	Mac 10.5
Firefox 3.†	A-grade	A-grade	A-grade	A-grade	A-grade
Firefox 2.†		A-grade			A-grade
IE 7.0		A-grade	A-grade
IE 6.0	A-grade	A-grade
Opera 9.5†		A-grade			A-grade
Safari 3.1†				A-grade	A-grade

As you can see, IE6 is still on the list, and of course it is, with the number of people still using it. It is a major browser version and will continue to be until corporate campuses begin upgrading machines to IE7 and IE8. Until then, my advice is this: Make it work for IE6. It doesn’t have to be amazing, it just has to work. Another thing to note, Chrome is not on this list. Yet.

What is your browser testing process?

If you have a frickin’ sweet process for browser testing, please feel free to comment below.

Posted by Chris

Posted in Tips & Tutorials

11:54 am

23 notes

21 comments 0 people listening

Comment help
Get Livefyre

Comments have been disabled for this post.

Sort: Newest | Oldest

Justin

Great post. Thanks for posting. I've used Browser Shots and second your recommendation. I found it to be very quick and easy to use. Your suggestions for avoiding trouble are great.

Tools like Browser Shots are very good at letting users see what a web site looks like in different browsers. A more challenging goal in testing web apps is to test out functionality in different browsers and asnwer questions like: "If I'm using Google Chrome, will the change credit card feature work at the very end of the purchasing process on Expedia?" (My recent experience suggests the answer is unfortunately no, but I digress).

Shameless plug for a related test design tool to help address this problem of cross-browser testing of functions within web apps: My company has created a tool that will help testers identify a small subset of test cases that can be run on different internet browsers. It is the Hexawise test design tool. It is starting to receive some pretty encouraging feedback from early users. As shown in one of the sample test plans included in the tool, for example, it will help users identify 35 test cases to be executed in 6 different browsers (down from 72 billion possible use case scenarios) that would be very effective at finding defects in the Google Maps get directions web app, for example. The tool automatically selects the minimum number of test cases that would be required to match (among other things) every single browser type tested against every single function tested (e.g,. example functions in Google Maps would include: get driving directions or get walking directions or "zoom in all the way" or "show photos" or "drag the blue line marking the route," etc.)

Hexawise is a new tool, offered as a software as a service. We have both a permanently free version as well as a reasonably-priced commercial version. For now, we're making even the fully-featured commercial version freely available to help encourage adoption. Similar tools are offered for licensing packages that start at $6,000. All I'd ask is that if you like it, that you tell your friends about your experience or consider posting a tweet or a quick blog post. If not, I'd welcome your suggestions on how to improve it. / End of plug.

Thanks.

- Justin
____________________
Justin Hunter, Founder
Hexawise
http://www.hexawise.com/users/new
"More coverage. Fewer tests."