ZigPress

Words about WordPress from Malta

Website Testing Process

When designing and building websites, any professional will tell you that you should test in as many browsers as possible. In the real world, the number you can actually test in may be quite small, depending on your operating system and how many computers you have access to, but you can still set up a process that will allow you to feel reasonably confident that your site will look (almost) identical for the vast majority of your site’s visitors.

In this article I will take you through my own browser compatibility testing process, which uses nothing more than a Windows XP notebook PC.

A quick word about my development process first: I don’t like to reinvent too many types of wheel, so I usually start with a standard CSS template. If I am building a 2-column site, I take and adapt a suitable template from Dynamic Drive, and if I am building a 3-column site I use a custom template of my own devising (the Dynamic Drive 3-column templates sometimes fail on Google Chrome).

Firefox

Firefox

I use Firefox as my main development browser; in other words, when I start to build a site, Firefox is the browser that has my new page open, and I refresh the page with each change I make. I have the Web Developer Extension installed (I find Firebug hard to get on with), and use it to check that my HTML and CSS are valid at each stage of the development process.

Other Browsers

As soon as I have my basic layout in place, and then whenever I make CSS or HTML changes that affect the layout, this is when I fire up the rest of the browsers I have installed. For example, whenever I add any layout segment that uses floats, or add a navigation menu, or change the dimensions of any part of the layout. Anything more than adding a bit of content or changing a colour means that it’s time to do the testing tango, using the following browsers.

Chrome

Chrome

Chrome is increasing in popularity and, like Safari, uses the Webkit rendering engine. I very rarely find that a layout built in Firefox gives me any problems in Chrome (apart from some 3-column Dynamic Drive layouts as noted above – so I simply avoid using those). I keep my Chrome installation updated to the latest version, because that is the default behaviour, meaning that most other Chrome users will have the latest version as well.

Opera

Opera

So few of the visitors to my sites use Opera that I used to think “why bother?”. But conversely, the latest versions of Opera (9 and 10) cause so few problems when testing (none at all, so far!) that I decided I may as well include it in my testing suite, simply because it never causes me any hassle. I use the latest version of Opera, because people who have made the decision to use such an uncommon browser are probably sufficiently committed to it to keep their version up to date.

Safari

Safari

Safari uses the same Webkit rendering engine as Chrome, however it still manages to treat code differently at times, so it must be included when testing. Having said that, because I keep the fundamental structure of my layouts quite simple, it rarely causes any problems. Like Chrome, I use the latest version of Safari for Windows, because it auto-updates by default.

IETester

IETester

You’ll notice that I didn’t head this section “Internet Explorer“. That’s because I never actually launch Internet Explorer – ever. IETester is a freeware Windows application that allows you to open URLs in tabs like any browser, but each tab can behave as if it was either IE5.5, IE6, IE7 or IE8. It picks up where the now-abandoned Tredosoft Multiple IE application left off, and does it better. It even has a companion plugin called DebugBar which allows a limited amount of DOM-based debugging.

I never use the IE5.5 tab (I haven’t seen IE5.5 on any of my sites’ analytics for quite a while), but I do test my layouts in IE6, IE7 and IE8 using IETester. This means I can easily see where a transparent PNG image makes things look bad in IE6, and I can see where I have a “has layout” or “double float margin” problem in IE6 and IE7.

Note: I always set IE8 to IE7 compatibility mode in my sites’ headers, so in theory I shouldn’t need to test in an IE8 tab, but I take a quick look anyway because I don’t trust Microsoft.

Recently I mentioned IETester when answering a query on LinkedIn, and my comment got the following response from an experienced web professional in Israel, who will remain anonymous to spare her blushes:

“Andy, I can’t thank you enough for telling us about IETester. It’s a web developer’s dream come true. I shared it with others in our office and they literally had tears of joy in their eyes – that’s how bad working with IE is. So thanks for lowering our IE-related stress levels. This tool is a life saver.”

My only niggle with IETester is that it uses a horrible Office 2007-style ribbon in its UI, which grabs a huge amount of screen area, but this pales into insignificance in relation to the sheer usefulness of the application.

What Do I Actually Test?

Four things: layout (simply by browsing every page), navigation (making sure hover behaviour is correct, etc), forms and JavaScript (the last two usually go together). I make extensive use of jQuery in most of my sites, predominantly for client-side form validation, so whenever I run a multiple browser test, I submit good and bad data to every form on the site, to check that the validation script is working. I then disable JavaScript on each browser and test the forms again, to make sure that nothing breaks.

If your site makes use of AJAX, you should also test all AJAX functionality on your entire browser testing suite.

Conclusion

The testing regime that I’ve described above, when I first put it in place, instantly put a stop to the “your site looks funny on my browser” emails that I used to get occasionally in my younger and less experienced days. It’s not perfect (I don’t own a Mac, so I can only test the Windows version of Safari), but it’s airtight enough for professional work.

Once in a blue moon someone will tell me that a site looks odd or breaks in something really obscure like Konqueror or K-Meleon. If I decide that it’s a big enough problem to try and solve, I use my old stand-by BrowserShots – but if it’s only cosmetic I don’t usually bother, for the sake of 1 visitor in 50,000.

If you are a web developer your testing regime may look a little different from mine – but the most important thing is that you have one that makes sense for you and your visitors, and that you apply it consistently and without fail.

If you don’t have a formal process that you follow, why not start with something like mine and adapt it as you go along?

I’d be really interested to know if you think I missed out something important, or if you have any tips which would improve my process. Comments are welcome – and don’t forget this is now a “dofollow” site.

23 Comments

  1. Really useful article – we don’t do much web-based UI testing and even less with customers who require it to be compatible with older versions of IE – but for those odd occasions, it looks like IETester could be really helpful to us. Thanks!

  2. Wow, I am kind of an amateur to the whole web development thing so I had not heard of it before, but that IETester tool is awesome! Thanks a ton for the link! :) I had been trying to figure out for a while now how to test my site since windows only allows 1 version of IE to be installed at a time. I have read through several other web development tutorials and none of them had even mentioned this useful tip.

  3. I use browsershots all the time to make sure my websites look properly in all browsers. Sucks how you have to pay after the 55th photo though

  4. Good points, I always check my sites out in the major browsers. I’m glad IE6 is being phased out, it makes developing cross browser a real pain in the ***

  5. You make some great points, with all the browsers that are being developed recently you need to make sure that your site performs on all platforms. Not doing so only limits you, if users can’t browse your site, you will lose their viewership.

  6. Great article ! I use almost the same process , but I didn’t knew about IE tester.I’ll use it in the future , thanks for mentioning it. IE 6 is the worst browser ever. I don’t understand why people still use it,is that so hard to install firefox or chrome ?

  7. Ok, that IE tool you showed was something I havent seen before. It was always a pain to check my websites using browsershot because surprisingly there are many ie users. I hate to support it but I have to go with the flow. Most of the time I just make sure everything works in FF, IE and Chrome. Can’t say about Safari but I’m sure it’s similar to Chrome so no problem there.

  8. I wish someone would make a list of all the small differences between Safari, IE, and Firefox. I know of at least 2 off the top of my head:

    1. Borders look different in IE and Firefox

    2. IE and Firefox align default formatted text differently (IE centers it and Firefox aligns on the left)

  9. You’ve be very thougher with the windows browsers but what about other system. Konqueror isn’t that obscure, lots of linux users out there. Plus you probably need to check all the Mac Versions. For me its just IE,Firefox and Chrome and cross fingers.

  10. I didn’t know about the other Firefox had another plugin similar to Firebug. Will try that one out and see if it’s better. Thanks for the info.

  11. A really good article and good points. Since I’m on a MAC I’m limited to what browsers I can check sites with, but a while ago I put a virtual version of XP on my MAC so I could test sites in IE 6 and I use IE Tester for IE 7. This is something that every web developer needs to do so that anyone can view their sites without any problems.

  12. @Custom Story Feeds: re Konqueror, it all depends on your analytics. On my sites, a visit from Konqueror is a genuine rarity, so it’s obscure in my context, even if it isn’t in yours or other people’s. A designer’s most important browsers are the ones that represent 99% of visitors – trying to handle the final 1% is hard to justify on a time cost basis.

  13. Hi there nice post…I think it is really important now to make sure that any website works across all browsers…I’m not sure what the stats are but I should imagine the IE is fast losing its market share to Firefox and Chrome…More and more people are choosing to use these so if your site doesn’t work seamlessly on them you are losing out on huge potential..thanks

  14. I use browsershots all the time to make sure my websites look properly in all browsers.

  15. Hi everyone! Can you help me?

    In many of the screenshots, the top and bottom of my Web page is shown, but not the middle. There’s a slit across the screenshot where it jumps from top to bottom, omitting the middle. Is this normal?
    I don’t know if it’s a problem with my Web page or BrowserShots’?

    Please help!

  16. It should be normal I get that sometimes as well. Or maybe you’re running some flash file in the middle of your content page? If u do, then remove it! Hope that helps.

  17. Thanks for this. I’m a complete novice at web development but have a keen interest to develop and better understand this communication method. In fact, my site is built for a relative (poor them…).

    I’ve completed testing with browser screenshots but you go into a lot more depth to ensure your site looks accurate.

    I can see my luck running out shortly! If anybody has any good development tips please let me know!!

  18. one of the easy options to test your web site in different browsers- ask your friends to check for you :) Some will have mac, some pc and they may use different versions of different browsers

  19. Thanks for the IETester info – that app totally rocks. Using it now…

  20. Your article is written in a impressive manner. I really liked it.

  21. With google chrome it is very easy to test your website. With IE as always I have problems…

  22. i love firefox…but some good points made about the others….hate IE though it’s getting better i think

  23. I changed from FF to chrome because FF is really really heavy with some addons while chrome is very fast and very useful for me.

    Regards.

Comments are closed