Why test your website in different browsers?

entry100.gifThis is entry #100 (Unfortunately, it took 6 months to go from 99 to 100) for gbradhopkins.com and in this entry we’re going to take a look at why you MUST test your website in various browsers.

As a Mac user, I do my web development in Adobe GoLive and preview the sites that I’m developing in Safari (Apple’s web browser) and often times I forget to test the sites in other browsers (Firefox, Opera, and Internet Explorer for Windows). Testing is especially important if your primary browser is something other than Internet Explorer for Windows.

Internet Explorer has a tendency to wreck a lot of layouts, especially if you rely on CSS (cascading style sheets) for much of your styling and to compound the problem, ~95% of web users are using IE for Win.

One thing to consider is your audience. If you have a site with an audience that uses a particular browser, then maybe you can ignore the others, but its always good form to take preview your site in various browsers to make sure the navigation, style and site structure remain intact. This not only applies to various browsers but also various versions of browsers. Not everyone will have the newest, most up to date browser that you, as a web designer or creative professional, are using.

Why Test?: Samples

Here are some sample screen captures, from various browsers, of a list that I created with a custom bullet for the Firebrand Media home page.

Safari (Original)

safari.gif

Firefox (Mac)

firefox.gif

Opera (Mac)

opera.gif

Internet Explorer (Windows)

windows-ie.gif

As you can see, they get progressively worse. This came as a bit of a surprise to me, as I had released the new list into the wild without actually previewing it in the other browsers. The fix, shown below, which was rather simple, took about a half an hour, and works well in all of the browsers, except Opera.


Safari (Fix)

safari-fixed.gif

Firefox (Mac)

firefox-fixed.gif

Opera (Mac)

opera-fixed.gif

Internet Explorer (Windows)

windows-ie-fixed.gif

Have a routine that you use when creating sites or a particular tool that you like to use to preview sites or verify the integrity of your design among the various browsers? Contact me on App.net or Twitter!