As a website designer you have the ability to create an attractive and functional design. Unfortunately, you do not have the ability to control which internet browsers will be using to view your site. Because each browser behaves differently you will need to test your projects in multiple browsers.
In most cases the variation from one browser to another will be minor, and probably will not even be noticeable to the average visitor. However, sometimes you site will have major problems in a particular browser that can prevent visitors from being able to use the site. The best way to be sure that your site is usable in different browsers is sufficient testing.
How Can You Test Your Website in Different Browsers?
For starters, you should be familiar with which browsers are most commonly used by your visitors. After all, you’ll want to make those browsers the biggest priority. Google Analytics will show you a breakdown of which browsers are being used by your visitors and how many visitors are using each one, breaking it down into a pie chart (shown below).
Once you know which browsers are most commonly used by your visitors you should focus your testing efforts on those browsers. You can easily install several different browsers like Internet Explorer, Mozilla Firefox, and Netscape, but with the huge amount of browsers available you’ll never be able to have them all. This is where you will need the help of a few specific tools.
BrowserShots - Test your website in different browsers. BrowserShots creates screenshots of your pages in a wide variety of browsers and displays them for you to see. It also has several additional options.
BrowserCam - A paid service that lets you test multiple URLs in a huge number of browsers.
NetMechanic Browser Photo - Another paid service. Choose between one-time use or pay for an entire year.
Litmus - Another paid service. Also provides resources for testing email.
AnyBrowser - A variety of tools for creating and testing websites.
Articles and Resources:
How to Check Your Website with Multiple Browsers on a Single Machine - from thesitewizard.com
How to Use Different CSS Style Sheets for Different Browsers - from thesitewizrd.com
Why Test Your Website in Different Browsers - from gbradhopkins.com
CSS Hacks and Browser Detection - From WebCredible.
Introduction to Browser Specific CSS Hacks - from SitePoint
Cross Browser Issues - from devarticles.com
Position is Everything - Modern browser bugs explained in detail.
52 comments from readers
1 Adam_Y Aug 21, 2007 at 2:26 pm
Some good advice there… especially using analytics to check exactly who/what is being used to view your blog.
There is one further problem I find though, which is the question of screen resolution. I draw a webcomic for my blog and I find the line between catering for lower and higher resolution users quite a tricky one to tread.
2 Fatih HayrioÄŸlu’nun not defteri » 21 AÄŸustos 2007 Web’den Seçme Haberler Aug 21, 2007 at 3:52 pm
[…] Farklı web tarayıcılarında sayfalarımızı nasıl test ederiz. Link […]
3 Goyin Aug 21, 2007 at 6:09 pm
I hate that you have to program to multiple browsers. Why can’t everyone just settle down with Firefox?
4 Max Design - standards based web design, development and training » Some links for light reading (22/8/07) Aug 22, 2007 at 7:14 am
[…] Effectively Testing Your Website in Multiple Browsers […]
5 Vandelay Design Aug 22, 2007 at 5:26 pm
Adam,
Yes, in your case I think that is an important issue. I guess you have to find what’s best for most people while inconveniencing as few people as possible. You’re right, not easy.
Goyin,
I’m doing my part (using Firefox).
6 ProjectX Blog » Blog Archive » Links Aug 22, 2007 at 10:20 pm
[…] Testing your site in multiple browsers […]
7 Antonius Aug 23, 2007 at 8:28 am
Glad I came across this list. I was on another site, where the blogger was suggesting that you check how your site looks in numerous browsers, but he did not give any suggestions. Just checked back at Workingathomeinternet.com, and he did respond to my question with two of the above sites.
8 Vandelay Design Aug 23, 2007 at 4:59 pm
Antonius,
I’m glad it can help!
9 Some useful links for online newspapers from the Web Design Update list : Joe Think » Online News Blog Archive Aug 23, 2007 at 7:47 pm
[…] Effectively Testing Your Website in Multiple Browsers […]
10 Weekend Links - jQuery 1.4, CSS Images, Printing Techniques, Converting to CSS, Cross-Browser Coding | BluDice Blog :: PHP, MySQL, CSS, Javascript, MooTools, and Everything Else Aug 25, 2007 at 3:50 pm
[…] Effectively Testing Your Website in Multiple Browsers Making sure you website works in multiple browsers is essential to any public website. How can you do so? Read this article to find out. http://www.vandelaydesign.com/blog/design/effectively-testing-your-website-in-multiple-browsers/ […]
11 Gyms & Health Clubs by Aaron Aug 25, 2007 at 5:09 pm
I ran into a page one time that just could only be viewed in IE… I can’t imagine how much traffic and potential revenue that site is losing by not testing in multiple browsers.
A lot of those testing services seem pretty unnecessary, though- I feel like as long as you have your pages tested on the major browsers, you shouldn’t have too much of a hard time with the others.
12 Sly from Slyvisions.com Aug 25, 2007 at 6:37 pm
More effective internet tools. I’ve been searching for this and all Google gives me is…cr*ap.
Sly from Slyvisions.com
13 Lazy Sunday Link Love Aug 26, 2007 at 10:00 am
[…] Steven tells you how to Effectively Testing Your Website in Multiple Browsers […]
14 Nick Cowie Aug 29, 2007 at 11:24 pm
Your method works great with desktop browsers, unfortunately Google Analytics does a lousy job of identifying mobile browsers (they do visit your site, check screen resolutions in Google Analytics you should see some there).
And as for testing in mobile browsers good luck, there are a lot of them and multiple versions of the same browser ie Nokia release a new S60 browser every year.
15 Adam Aug 30, 2007 at 11:31 am
Mobil browsers, oh no, that seems to be another large can of worms. The company that can come up with the universal mobile browser will be very wealthy.
I understand that mobile technology is a rapidly growing marketing field to include search technology.
16 Vandelay Design Aug 30, 2007 at 5:02 pm
Nick,
You’re right, this doesn’t really address the issue of mobile browsers. Thanks for leaving your thoughts on the subject.
Adam,
It definitely is growing rapidly, so I guess it will have to be more of a priority in the not-too-distant future.
17 Mobile Search Technology - My Online World Sep 2, 2007 at 5:21 pm
[…] The other morning, as the result of reading a comment on the Vandelay Web Design Blog article Effectively Testing Your Website in Multiple Browsers, I was reminded of Chuck Sacco from the Mobile Marketing site PhindMe.mobi we had met at BlogPhiladelphia Unconference. […]
18 Methylviolet Sep 5, 2007 at 9:55 am
I am a non-professional non-designer who got drafted to create the lab website. Being arrogant, ignorant, and a masochist, I insisted on learning HTML/CSS and coding it myself. It went up on Friday. It looked beautiful in four browsers and on ten computers in various resolutions.
But on the boss’s mom’s computer? Broken, indeed non-functional, I found out yesterday. I guess there is a reason people go to school for this.
Thanks for the article. I may yet take this shotgun out of my mouth.
19 Vandelay Design Sep 5, 2007 at 9:43 pm
Methylviolet,
Thanks for reading! Sorry to hear about your problems with that 1 stubborn browser. I checked out your site and it looks good, especially if that’s your first crack at web design. Not too many 1st projects look that good. Have you found the problem with the 1 browser?
20 How to Successfully Switch Your WordPress Theme Without Throwing Your Computer Through the Window << Vandelay Website Design Sep 8, 2007 at 3:41 pm
[…] Once you have the test blog set up, enter some test posts. Use ordered lists, unordered lists, images, blockquotes, links (without trackbacks if you’re using external links), and whatever else you plan to use in your real posts. Check everything to make sure it looks the way you want visitors to see it. Be sure to test it in multiple browsers. […]
21 Aaron’s Blog » Blog Archive » Finally..it’s fixed Sep 11, 2007 at 6:27 pm
[…] For more information on this subject see Effectively Testing Your Website in Multiple Browsers. […]
22 Aaron’s Blog » 2007 » September » 11 Sep 11, 2007 at 6:57 pm
[…] For more information on this subject see Effectively Testing Your Website in Multiple Browsers. […]
23 77 Recursos para diseñadores web » Comenta o Muere | Actualidad, Humor, TecnologÃa, PolÃtica, Ciencia, Música… y otros muchos temas de los que merece la pena hablar. Sep 15, 2007 at 8:58 am
[…] For more information on this subject see Effectively Testing Your Website in Multiple Browsers. […]
24 煎蛋 » 网页设计必备资æº? Sep 15, 2007 at 11:38 am
[…] 更多类似工具。 […]
25 77 Resources to Simplify Your Life as a Web Designer << Vandelay Website Design Sep 15, 2007 at 12:11 pm
[…] For more information on this subject see Effectively Testing Your Website in Multiple Browsers. […]
26 è? è??艾蔻 » 网页设计必备资æº? Sep 15, 2007 at 6:06 pm
[…] 更多类似工具。 […]
27 VaGrancyâ„¢ Emotion» Blog å˜æ¡£ » 网页设计必备资æº? Sep 17, 2007 at 8:07 am
[…] 更多类似工具。 […]
28 ®eflect, ®epent and ®eboot - Blog of Webdesigner Penny Haslop » links for 2007-09-11 Sep 17, 2007 at 11:20 pm
[…] Effectively Testing Your Website in Multiple Browsers […]
29 凤凰飞 » 网页设计必备资æº? Sep 19, 2007 at 4:08 am
[…] 更多类似工具。 […]
30 Data Shared » 77 Recursos para simplificar la vida del diseñador web Sep 25, 2007 at 4:56 am
[…] For more information on this subject see Effectively Testing Your Website in Multiple Browsers. […]
31 虚拟主机 Sep 25, 2007 at 10:01 am
It is a verygood web!
I will email to my friends!
32 现代�财 Sep 30, 2007 at 1:12 am
It is a verygood post!
33 Driving Search Engine Traffic to a New Blog << Vandelay Website Design Oct 4, 2007 at 8:26 pm
[…] Effectively Testing Your Website in Multiple Browsers – 103 visitors. […]
34 РеÑ?урÑ?Ñ‹, делающие жизнь web-дизайнера проще… | PC-Обзор - новые горизонты. Oct 8, 2007 at 1:17 pm
[…] 24. Effectively Testing Your Website in Multiple Browsers. […]
35 3 Powerful Results from Internal Linking << Vandelay Website Design Oct 25, 2007 at 6:41 pm
[…] Effectively Testing Your Website in Multiple Browsers was the 9th most frequently visited page from August 1st to today (2,065 page views). Again, in the image below you see a small spike in traffic. […]
36 Yoese???? » Blog Archive » ???????? Nov 12, 2007 at 9:08 pm
[…] ??????? […]
37 a strangled duck - The Designed Web - November 13, 2007 Nov 13, 2007 at 2:31 am
[…] Website Design presents Effectively Testing Your Website in Multiple Browsers posted at Vandelay Website Design, saying, “Tips and resources for making sure your website […]
38 Testing Your Website in Multiple Browsers « arcagility Nov 14, 2007 at 5:34 am
[…] Testing Your Website in Multiple Browsers […]
39 77 ???????? ??????? ????? ???-????????? ????? | Shakin.ru Nov 16, 2007 at 1:03 pm
[…] ????? ?????? ???????????? ? ???? ??????? (?? ??????????): Effectively Testing Your Website in Multiple Browsers. […]
40 Path to Web Dev Enlightenment Dec 6, 2007 at 4:27 am
[…] Great article on testing websites in different browsers, it has some paid and some cost free options included; http://www.vandelaydesign.com/blog/design/effectively-testing-your-website-in-multiple-browsers/ […]
41 Amie Stilo Jan 10, 2008 at 12:58 pm
I often forget to test my site in different browsers and then when I find out down the track that the site does not look good in ie I need to revamp it. I use firefox most of the time and forget about internet explorer lol.
42 Recursos y Tutoriales » Blog Archive » 77 recursos para diseñadores web Feb 27, 2008 at 4:55 am
[…] For more information on this subject see Effectively Testing Your Website in Multiple Browsers. […]
43 peri oyunları Mar 9, 2008 at 12:22 am
sometimes visitors tests our sites at other browsers for us
one of my site was not working on opera and some of my visitors send me feedback about it.
44 Offline Sources for Design Inspiration Mar 20, 2008 at 3:04 am
[…] Testing Your Website in Multiple Browsers […]
45 77 Resources to Simplify Your Life as a Web Designer « Designlist Apr 3, 2008 at 2:45 am
[…] For more information on this subject see Effectively Testing Your Website in Multiple Browsers. […]
46 Mike Apr 28, 2008 at 10:39 pm
I’ve always found that a standards-based approach works wonders when developing a website. Having said that, some browsers really do not agree with standards (IE).
Once you’ve had a few years of practice when dealing with browsers like IE you learn what CSS parameters will cause what to break. Sadly for me it still happens a lot with IE and occasionally Opera, so I often test my websites at university, where I can test on most popular browsers. Working past that, BrowserCam works wonders for me as well.
As far as Mobile browsing goes I almost feel it’s starting to phase out, what with many handsets now pushing for 800×600 screen resolutions. Give it a couple of years (and a few more iPhone competitors) and horrid things like WML and mobile optimisation will be a thing of the past.
47 What Makes Someone Leave Your Website? | Vandelay Website Design May 14, 2008 at 7:43 pm
[…] the user can’t access the site, what other option do they have besides leaving? With so many different browsers (and versions of browsers), different internet connections, and different needs from users, […]
48 frank May 16, 2008 at 10:48 am
Eeek! I just found out that 30% of my viewers are using IE6 or older!!
Thanks for the tips. Now to update…
49 Santiago May 20, 2008 at 4:08 pm
Thanks for this post! its very important for us, have resources like this.
Thanks Again.
Santiago
50 Goyin Jun 5, 2008 at 4:39 pm
Its too bad people can’t just use Firefox…
51 网页设计必备资源集合 Jul 4, 2008 at 12:12 pm
[…] 更多类似工具。 […]
52 78 ресурсов, сделающих жизнь web-дизайнера проще… « Блог Серёжи Борзова Jul 22, 2008 at 8:34 am
[…] 24. Effectively Testing Your Website in Multiple Browsers. […]