cross browser testing

Cross browser web site testing

With every web browser on the planet rendering differently it's a constant battle ensuring that your beautifully and painstakingly designed web site looks just as gorgeous on all browsers.

Personally I build a site entirely using Firefox and only at the end of the build process do I look at it in other browsers, curse and swear and then start to fix issues.

But what is the best way to check your site on multiple browsers?

When I was still using Windows I just had all the major browsers installed on the laptop so I could easily switch but even that's not perfect as getting multiple versions of Internet Explorer to work on a single PC is challenging and does not always produce accurate results.

Now that I'm using a Mac that's no longer an option and whilst I still have a windows laptop (or three) I really don't want to have to use them unless I really must.

"Once you've had a mac you won't want anything else"

I could install Windows on the Mac with a virtual machine but thats a bit of an overkill for me and every time I have tried I've somehow managed to mess up the image just when I've got it perfect. (That might be my fault I don't know)

There are several online tools that you can use to take a screenshot of your site from various browsers that you can use to compare but all the free ones can take quite a while to generate the images. Which is fine if everything is working OK but not much good if you need to make continual changes and test them.

What I really want is to be able to press a button and have my site presented to me, right now not in 15 minutes, as it would appear in multiple browsers on several platforms.

To make it even more perfect I'd like to be able to view these screenshots side-by-side or even better overlayed so that I can see the differences as easily as possible.

Today I found what is for me at least the perfect solution.

Adobe BrowserLab does everything I could want.

Screenshots can be viewed in a single view, side by side view, or as an overlay view with variable transparency. Each viewing option features a zoom function. We’ve also added measurement tools like Rulers and Guides, custom Onion Skin Registration, as well as the ability to move quickly to specific areas of a screenshot. You can also save screenshots in 1-Up or 2-Up views.

 

 

The web was meant to be read, not squished.
This isn't the way to test a responsive design.