eye
Image by Gwennie2006
We all think we know how our blogs look. We look at them everyday. We boot up our computers, fire up the browser and…

Wait. What web browser are we using? And is it even a computer?

Firefox or Internet Explorer? PC or Mac? Windows or Linux? Desktop or handheld? iPhone or PS3?

There are a lot of possibilities, but some are more important than others. This is the order that I would recommend testing them in, and how do the test.

Start Off Easy – Standards Browsers

Firefox Even if you use Internet Explorer (IE) for daily browsing, I recommend that you start in one of the other browsers.

IE’s view of the page will look different to Firefox’s, and to IE’s credit, it is much easier to make a patch for IE than for Firefox.

  1. Download Firefox (And I recommend the Web Developer Extension as well. Endlessly helpful!)
  2. Download Opera.
  3. Download Safari (There is a Windows version).

When your page looks right in Firefox (Or either of the others), then 99% of the time, it will look right in the other 2 as well. Three of the four major browsers done.

Prepare for A Headache – IE6 and 7

NB – I’m a Windoze Windows user, so I only know how to test IE on Windows. If you know how to do it for Mac or Linux, pleases let me know in the comments! Sorry.

Update: For Linux users, try IEs 4 Linux. Thanks Dandellion!
For Mac users, try IEs 4 OSX. Thanks Matt!

By default, it isn’t possible to run both IE6 and IE7 on the same computer. However, with IETester,it’s easy.

IETester can be used to test both IE7 and IE6 on Vista and XP (As well as IE8 and IE5.5, if you want those as well). Download it for free from Debug Bar.

IETester Screenshot

Work on IE7 first. It will be the easier of the two to solve problems for. When that’s done, move onto IE6.

To make debugging easy, use conditional comments to give each version of IE its own stylesheet (Or its own rules inside your regular stylesheet).

Getting Mobile – Opera

operahandheld[3] To test how your blog looks in a mobile environment, the easiest way is to load up the page in Opera, and press Shift+F11.

You will now see your page as it would be if rendered by Opera on a mobile. You can adjust this appearance by creating a mobile stylesheet.

e.g. for WordPress users with a handheld.css in their theme folder:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/handheld.css" type="text/css" media="handheld" />

The Fun One – iPhone

iPhone If you’re a Mac user, you can download the free Software Development Kit from Apple, which includes a complete iPhone simulator.

If you’re a PC user, you’re less lucky. Sites like Test iPhone and iPhone Tester claim to emulate the experience, but they do a poor job.

They both zoom in to 100% view, leaving a lot of vertical and horizontal scrolling (On the iPhone, the page is zoomed out by default, so the whole width fits on the screen). They also show a bug for the background image of this site at least, but the bug does not appear when using my iPod Touch.

If anyone knows of a better Windows iPhone emulator, please let us know.

In the meantime, if you want the peace of mind of knowing that your site works on the iPhone, drop your link in the comments and I’ll check it out for you.

Drawing the Line

There are many more browsers out there. Flock, Konqueror, Camino. However, most of them won’t be worth the effort of debugging for, unless you have time on your hands.

Use your web analytics program to find out which browsers are being used on your site. In Google Analytics, go to Visitors > Browser Capabilities > Browsers and OS. Then make sure your blog works perfectly on these, and well enough on the others.

What browsers have you tested your blog on?

Enjoy this post? You should follow me on Twitter!