MLD

How to test a website in multiple browsers & platforms on a single computer.

It’s one of the most annoying factors when designing for the web. I wish the browser manufacturers would hurry the ‘*####*’ up and get it right! Some things just don’t make sense from browser to browser. Even now on this site if you are looking at this page using the safari browser, the breadcrumb navigation is not styled correctly on this page. This is an apparent bug within the Wordpress plug in. The style sheet should work, but for some reason, it doesn’t. Trying to make a website look decent across all major browsers is a lot harder than it should be.

Skip to the instructions

The browser inconsistencies have been apparent since the browser wars of the early 90’s. It seems no-one has ever even tried to make it easy for the web professional, but things are slowly improving and one of these days people won’t ever know of the anguish their forefathers had to go through. Through the work of pioneers like Jeffrey Zeldman, and others at the helm of the web standard project who worked tirelessly with these browser manufacturers’ in standardizing the styling of content on the web we are finally getting closer to a digital age when designing on the web will be a slightly more pleasurable experience.

Soon?… Not soon enough and we’re hardly there yet. Unfortunately I don’t see it happening within the next five, maybe ten years.

As online designers we are constantly faced with the surprise of designing something with carefully placed text, imagery, using perfect spacing and perfect padding, then rendering it in a single browser on your operating system. Then look at the site on somebody else’s computer using a different browser or running a different operating system to see our perfectly designed site look completely faulty, or ‘whack’ as in: ‘No good’ at all. Nothing could be more frustrating.

It’s now possible to test a number of browsers on a single computer. It’s easy on the Mac to have a number of browsers and versions open at once. It’s a little more difficult on the PC, and what about testing across these platforms?

I don’t mean to say all web designs need to look exactly the same in all browsers. That would be unrealistic and unproductive in this day and age. I’m just looking to achieve the optimum site design in the majority of browsers used today. Sadly, I have never worked in a design environment that provided a computer lab built for the sole purpose of testing a site in different browsers on the fly. I remember arguing for such a facility in the past to the decision makers. It was agreed upon but never realized. I would think it to be a fairly cheap way of  increasing productivity and producing the best product possible. The alternative method was to annoy your colleagues to view something if they had an out of date browser, as a lone designer operating from a home office, this is not an option.

There are online versions of these browser testing labs such as, browsershots.org a free service & browsercam.com you can use a free trial 24 hours. These are great services and free to use up to a point. I think you pay for a more premium service and receive images more promptly. The main problem with this online method is the wait for a rendered image to return, which takes away from a fluid design environment in which I like to work. The paid service might help? I will, however explore another option and write a step by step process adding to this article in the coming weeks. This method will outline a way of testing a website design on multiple browsers using a single machine. As I am using the Mac operating system I will outline this method using a Mac. Currently you cannot test on Mac OS if you are operating on the Windows platform unless you also own, or have access to a Mac. All the more reason to switch over if you ask me, but that’s a whole other argument for another day. If you do test the two main browsers being used on the Mac– Firefox and Safari (both of which you can install on a Windows PC) chances are, if they look good on your PC, they will look even better on a Mac.

Instructions: Following is the process I have explored.

Step 1.

To run Windows on your Mac you will need to either purchase or download a free emulator. An emulator basically creates another computer on your computer and shares your hard drive between them (confusing, but it works). Here is a list of free emulators you can download or find out more information. I will be installing the Parallels desktop solution. It costs a little bit, but I’v heard it works well. The idea here is to reduce headaches not create more, so I’m going with the recommendation of others running Windows on a Mac. Another solution would be to purchase a cheap PC laptop. Then again, if everything is not on the same system it might take longer to set up, connect to the internet etc… The idea is to test as quickly as possible and then get on with doing what we are paid to do and what we like to do. Design.

Step 2.

Install Windows on this operating system. You must know some poor schmuck running windows? They will have an installation disk, ask to borrow it, install it and it comes with a version of IE (Internet Explorer). The version of IE will depend on the version of Windows you install. (I have done this now and after alot of ####ing about, it installed!). I “purchased”/borrowed XP and it installs IE version 6.

Step 3.

To run multiple versions of IE use this solution from Tredsoft. It will install versions from IE3 up to IE6 that you can run side by side. Now, I’m only interested in testing from IE6 to the current IE, but I still installed IE5 for a laugh. One would hope your target audience is at least using IE6? To run IE7 you have to install a stand alone player along with the IE7 program. All installers and instructions can be found here. There are certain features missing when running IE7 in a stand alone player such as no ActiveX support. However, you can now test the layout in multiple IE browsers running side by side on Windows while still having Safari and Firefox running on your Mac in the background. That’s multiple browser testing extreme style. Currently I can’t find a stand alone player for IE8, hopefully that comes soon. I suggest checking in with Tredsoft and blogging them with requests. Now, what would be really sweet is the ability to run Parallels locally using MAMP and testing sites locally! Alas, it seems harder than it should. Any Computer geeks out there got this set up? Please help!

Stay tuned.