Testing in different browsers using Browsershots.org

If you're a template designer or happen to redesign your blog on your own, you must want to know how it looks in other browsers than the one you're using.

It's easy enough to open up the few browsers you have installed in your computer and test your newly designed blog in it. But to know for sure that it works ok in all the browsers out there is next to impossible. Just to test in 2 different version of browsers, IE6 and IE7, are tough enough - as I've faced with previously.

I have the IE7 and can't have the IE6 installed in the same machine. There are options out there to install a virtual PC in your machine so that I can install IE6. But it requires quite a large space for the virtual PC alone, and there are some other things to get out of the way to get everything in place. So, thanks but no thanks!

Recently, a reader here mentioned about using Browsershots.org to test a new template in all the browsers out there. All of them! I tried it and basically this was where my testing problem ends. All the testing works beautifully.

Browsershots.org is an online free service that takes the URL of the blog to be tested and opens it up in all the different browsers on their machines. Screenshots, or snapshots, of the blog page in each one of the browsers are then taken and uploaded back within a a few minutes into the main page for your viewing pleasure/displeasure. From there, you can immediately see which browser works or not, and zoom in to a full page ( top to bottom of page) to see the details.

Here's the Browsershots.org main page:

Here're the screenshots (you can zoom each one to a full page):

There are limitations in that you can only have a number of screenshots (~300+) per day per IP, and ~60+ shots per website per day. Limitations can be lifted up by signing up into their service or paying for an extended period of priority processing.

At least for me, having only a few hundreds of screenshots is much better than not knowing how it looks in other browsers at all. My own experience is that almost all browsers work great with my templates - except IE5 and IE6. Since knowing this Browsershots service, all my new templates are good to go with IE5 or IE6.

In some cases, you may see that your new template doesn't open up well in one or two obscure browsers. Before you try to do more tweaking to solve the problem, check to see that browsers' usage statistics. It's not worth your effort to pull up your brain power just to make it look okay in a browser used by one person for every million internet users. W3schools can provide you a record of the current browser usage monthly statistics.

Testing and Viewing in Other Browsers

(This is a sub-post for Step 6 from Tutorial 11: Starting Your Own Blogger Template)

(An updated content is added below.)

Personally, I don't like the stage of testing in other browsers. It's annoying that other browsers might show your blog differently than the blogs you're designing it in. But if you want all to have access to your blog and see it as nicely as you've designed it, then you have to go through this process. As for my blog and my demo blogs, I designed them in Firefox and tested in IE7. I've received comments that people using IE6 have some trouble with the templates, but I didn't test them in IE6, and not about to trouble myself downloading IE6 and debugging the codes. The way I see it, if Firefox and IE7 get it right, then it's IE6 that's got the problem (not my templates) and it's IE6 that has to debug itself. Anyway, isn't that why IE7 is made in the first place?

Personally, I think Firefox is by far above all. If you're not using Firefox, I suggest you download them right now - it's free, fast, not too crowded with useless buttons, lightweight, and just plain great. And if you're using IE6 and don't want to upgrade to IE7 because your computer is not fit enough to take the load, but you know that viewing blogs is prone to bugs - then Firefox should be the way to go. Plus, the download is quick, the upgrading is efficient and fast, and there's a lot more to this - but I'll just let you see them on your own. So, if you want to get rid of IE and use Firefox instead, the download button is on the sidebar...

I don't really have a tip for debugging. You just have to be patient and solve the problems one by one. The way I avoid problems is by writing a stricter code so they won't have a chance to flip flop or get 'loose'. If you want, you can start designing a template starting from any of my own templates. That way, you can maintain the part of the CSS code that's there to avoid any bugs in different browsers. But I can't guarantee they're 100% bug-free!

Update:
I have tested all the templates in all browsers using Browsershots.org and labeled the ones compatible with all browsers (including IE6). There are also some templates compatible with IE6, but have their sidebars pushed down the Blog Posts because their content-box width is wider than the sidebar. So, please check if this is the case if you see your sidebar misaligned.