Most web designers realize perfection in one browser might not be so in another one. It is certainly best practice to design with ALL browsers in mind. How is the best way to go about your cross browser testing though? And what is a good point to call things "good enough"? I thought I'd do a bit of research on this topic myself tonight. A quick google of the phrase "cross browser testing tools" brought me to a good resource put out by designm.ag on October 19, 2008, 10 helpful resources for cross browser testing.
designm.ag's 10 cross browser testing tools
- Browsershots
I like this tool, you can specify which browsers (under which OS) to review and within a half-hour you'll get screenshots (.png files) that you can download. Free service provided by browsershots.org.
- BrowserCam - Paid subscription required - I did not try them out.
- Browser Photo - Paid subscription required - I did not try them out.
- Litmus
Although litmus has a variety of paid subscription programs, they do offer a free program allowing for 50 uses per month. I particularly like the validation services for both your HTML and CSS that pops up.
- netrenderer - Although the site is published in German, its intuitive enough to realize you add your site address in the bar at the top. It only tests IE, but it does this quickly and lets you set the version to check. I LOVE this tool!
- BrowsrCamp - This service was "offline" at the time and I thus didn't get to try it out.
- IETester is a free, downloadable piece of software. Quick and easy download and install: handy little program that you can quickly click to check all versions of that pesky IE browser.
- CrossBrowserTesting
Apparently this service used to be "pay as you go", but now has a free trial available and a variety of monthly subscription plans. I did not try this one out.
- ieCapture - no longer available online
- iPhoney
Is a downloadable piece of software that provides a 320x480 pixel canvas (with Safari specs), allowing you to test the appearance of your web design on an iPhone. This application works on the Mac OS ONLY. For this reason, I couldn't try it out. (Yes, I must hang my head in shame and admit I'm using a Windows OS..)
iPhone compatibility
I found a great tool to test your site design's iphone compatibilty. Its put out by iPhone tester and it works like a charm. Type the web address in the simulated iPhone's address bar to check out how things look.
iPad Compatibility
My own addition to this list will be testing for the iPad. I found a good, free online simulator at ipadpeek.com.Cross Browser Testing Theory
That's a good list of tools, but how far should one go about obsessing over cross-browser compatibility? minimali.st has a cool little printable checklist they've updated as recently as 5/11/2010 entitled cross browser checklist. Their recent update had them remove testing for IE6 and replace that option with testing for the iPad.
What bases then, does minimali.st think you should be sure to cover in your cross-browser testing procedure? Here's a recap (but DO click through to print off their handy cross-browser compliancy checklist):
- BROWSERS:
- Firefox - (both for Mac and Windows)
- Safari - (both for Mac and Windows)
- Chrome - (both for Mac and Windows)
- Opera - (both for Mac and Windows)
- iPhone
- iPad
- IE 8
- IE 7
- TECHNICAL ASPECTS:
- without styles
- without images
- without JavaScript
- increased text size
- page zoomed
- valid HTML
- valid CSS
More tools to check if your site is adequately cross-browser compliant
Reviewing the above checklist, it will be somewhat cumbersome to check the above-listed browsers on both Mac and Windows OS's with BrowserShots: Not only that, but BrowserShots doesn't simulate any browsers on Mac OS's. I checked out an article by Cookie Labs from , entitled "Tools to keep your site cross browser compatible". Some of the services they listed that were NOT found in designm.ag's article were as listed below (along with my personal reviews).
Laura Schofield's Reviews of these additional tools
- spoon - Not very intuitive: I couldn't get it to work.
- Adobe Browserlab - Fairly good in that you can specify and save different "browser sets", but it does not include Chrome for the Mac OS X browser, nor does it contain any version of Opera (free trial version tested.)
- Microsoft Expression's Superpreview - The free download is only good for IE. A paid subscription additionally tests Firefox for you. Not worth it in my opinion.
- Firebug - Firebug is billed as 100% free and open-source. A good tool, particularly regarding CSS and JavaScript debugging. Its just for the Firefox browser though.
Checking the technical and accessibility aspects of your page
The last issues to concern yourself with on the usability of your website design are ones of accessibility, rather than cross-browser compliancy. Here is a quick summary of how I deal with checking these concerns. If you have other ideas, feel free to fire them off in the comments!
- Without styles / images / javascript - My way to check this is just to copy my pages code, but delete out the stylesheet info / image addresses / javascript files. Load up this "stripped version" of your page and check how it looks in any browser. Browser cross-compliancy doesn't really come into effect here as the things that would give you problems have been removed. You'll be looking at straight HTML and that flavor is universal.
- Valid HTML / CSS - Of course, the W3C has the best tools available for this sort of validation. Check out both their HTML Validator and the CSS Validator they offer.
- Increased text size - This command can usually be accessed through your browser's "View" menu.
- Page zoomed - I test this on my pages by adjusting the screen resolution size in the Control Panel (under Display). Keep in mind that mobile devices require your columns be sized in multiples of 160 pixels.
