Some day, all browsers will render page markup exactly the same and force users to be within an allowable version level… causing web developers everywhere to weep tears of happiness in cubes, coffeeshops, and couches everywhere.
For any non-web developers that may be reading this, we (web dev’s) dedicate hours to the pursuit of building websites so that they look the same across IE, Chrome, Firefox, Safari, Opera, etc (lynx anyone?). Take that to another level and understand that different versions of these browsers also render pages different. A user viewing a web page in IE8 will likely have a vastly different experience in IE6… oh don’t get me started on IE6 and this of course doesn’t even cover the complete page redesigns for the various mobile devices out there.
However, until that magical day comes, there are some cool (free) tools, available at the ready.
1st up, Adobe’s Browser Lab: https://browserlab.adobe.com. Now, I just started using this one and here is what I like so far about it:
- Load Time. Once I enter the site and browser of my choice, the load time for the website is only a couple seconds.
- Zoom. The ability to magnify up to 400% and get a great look at the pixels in a page on the browser of your choice.
- Rulers. Get pixel measurements in the browser.
- Side by side view. View 2 different browsers next to one another.
- OS. View a browser in Mac’s OS X or Windows XP.
- Delay. You can set the number of seconds to wait before taking the screen shot. So you can wait for any Flash animation or scripting that is manipulating the page on load to complete.
- Onion Skin. This allows you to take 2 browsers and lay them on top of one another so you can get a true representation of how the pages render differently.
OK, and if I had to find something to complain about:
- OS. Need to expand the choices please.
- Browser selection. Would like to see Opera included.
- 1 Up View. Why does this left-align when onion skin doesn’t? Maybe I’m missing a setting somewhere.
Another option out there is the Browser Shots org: http://browsershots.org/. What I like:
- Browser selection. It’s big.
- Specifications. You can set screen size, turn JS off/on, and other great options.
- Side by side view (kind of). Once you receive your results. They all populate in handy little side by side icons that you can go between to your hearts content.
Complaints:
- Browser selection. Umm, why isn’t IE6 an option when 4, 5, 7 and 8 are?
- Speed. It’s slow. And if you start to use this site frequently, or load the same site multiple times, you seem to get throttled.
- View. It’s 3 clicks to view something in full size and no side by side, or onion skin comparison.
Now of course, before you deploy a new website you’ll need to actually test the functionality in all major browsers prior to launching, and neither of these tools will help you do that. Personally, I do it the old fashioned way (only way I think), loading the website across multiple OS’s and multiple browsers and testing the website end t0 end. But during the design and develop process, these 2 browser tools are a great resource.
Happy browsing
Gregg – http://richterwebdesign.com