Outward Focus Design

Have you ever had a customer mention that your website doesn’t look right to them, but when you look it’s fine? Or been searching the web on a friend’s computer, looked at your website, and it doesn’t look right there? Chances are your web designer did not thoroughly test the website in all browsers before launching your site, and your site looks a bit different in the different browsers. This is a detail commonly overlooked by amateurs and novice (or lazy!) designers.

Websites are different from printed materials in that the design is subject to rendering by applications (browsers) that don’t necessarily treat all code the same way. Once printed, a brochure’s layout will always look exactly as the designer intended. However, website layouts can easily be “broken” if the code is not understood correctly by the browser that’s interpreting it.

There are dozens of browsers in use, but something like 98% of folks online use one of four browsers: Internet Explorer, Firefox, Chrome, or Safari.

Of those, Internet Explorer is the one that causes the most difficulty for web designers, as Microsoft has only very slowly implemented standards that the other browsers adopted from square one. However, all of the browsers have certain quirks, and tend to exploit subtle mistakes in a website’s code differently.

Let me give you an example from my own experience. I recently completed a redesign for Mixed Greens Blog, a high wattage food and photography blog written by two amazing women here in Seattle. One of the features on their homepage displays a photo by each of them, side by side, as an introduction to their photo gallery.

Now, I work on a Mac, so as I build websites I am constantly checking them in the Mac versions of Firefox and Safari. Here’s what that Mixed Greens feature is supposed to look like, and does on Firefox and Safari:

Looking at the site on a Windows computer, I realized that there was a problem. Here are screen shots of the same part of the website in two more browsers:

Viewed in Internet Explorer 8

Viewed in Opera on Windows XP

Whoops! What happened to the photo on the left? As it turns out, I had allotted a certain amount of space for the two photos, however the photos actually took up 4 pixels more space than I’d calculated, due to a margin and border (web designers, whether they like it or not, have to become pretty good at measuring and calculating pixels!).

Firefox and Safari rendered the layout fine, being a bit more forgiving in this instance than Internet Explorer or Opera. However, since approximately 50% of the viewing public uses Internet Explorer (only 1% uses Opera, though it’s by all reports a great browser), getting the layout right for Internet Explorer is crucial.

So what’s a web designer to do? Or what are you, as the owner of a website, going to suggest to your web designer to make sure it’s right?

It is actually quite a chore to check a website design in all of the browsers. For example, though I use a Windows laptop, I am only able to use it to check my designs in the most recent versions of Internet Explorer (8, as of this writing), Firefox, and Chrome. It would take another laptop with older software to check in the other browsers, and that’s simply not within my budget or realm of patience. (Note to tech geeks: I realize it’s possible to run multiple versions of the browsers on one machine, but it’s not practical for the average user such as myself to set up.)

There is now, though, a solution I’m using that works really well. There’s a new company called Cross Browser Testing, www.crossbrowsertesting.com, that allows the visitor to check their website in dozens of browsers across mulitple platforms.

It’s geared toward professional designers, and there is an offer to use it for free for a limited number of tests. To continue using it, the cheapest registration is $20 bucks a month, which allows you 150 minutes of testing per month. There are of course more expensive options available. You can use this service to take screenshots of a website in the different browsers, and you can also do a “live test” in an environment that is a bit slow and awkward, but is still very useful.

I would highly recommend this site to any web designer. For you site owners who’d like reassurance that your designer is checking cross browser, you can ask him or her to send you screenshots from the different browsers.

If you've found this article useful, found an error, or have a suggestion, please leave a comment below. Thanks a lot!