Test Web Designs In Multiple Browsers
Many developers tend to overlook cross browser compatibility when creating the look and feel of Web sites. These can have negative side effects that directly hinder the performance of your blog or Web sites. To assure that the HTML and CSS in my web designs render correctly in the various browsers I use http://browsershots.org. This great tool generates screen shots of my web designs using various versions of multiple browsers on several operating systems. It then presents my with thumbnails of my Web Pages which I review thumbnails to assure the designs render correctly.
Why Is Cross Browser Compatibility Important?
For some web sites it is acceptable to trade off a small percentage of visitors to have snazzy looking Web site. At Single Throw, we often deal with customers who average sale size runs is several thousand dollars and even have customers who’s minimum sale size is over $100,000 dollars. The average lifetime value of one of clients customers is often millions of dollars.
When dealing with visitors that are this valuable to our clients, it is necessary to identify, target, sell and retain every visitor possible. And that means that we have to assure that the HTML and CSS of every web page we design renders correctly on every single browser.
Visitors to your own blog or web site may not be as valuable to you, but trust me when I say every visitor is valuable. As I can personally attest, having Web pages that are not cross browser compatible can guarantee that your blog or Web site will under perform. It can quickly alienate visitors, sending them directly to the back button on their browser, causing them to miss out on all of the great content you have worked so hard to put on your Web site.
How can I test if pages is cross browser friendly?
While most people would suggest make sure that you have valid HTML and CSS markup, I have found there is really only one way to assure your pages are cross browser compatible, view your pages in different browsers. The problem is there are literally dozens of browser that each run on different operating systems. Further, it is usually not possible to have the different versions of the same browser installed on the same computer at the same time.
You best friend for assuring your pages render correctly in various browsers is http://www.browsershots.org
Example of various screen shots of my blog generated by Browsershots.org
When you first go to browsershots.org your are provided with dozens of checkboxes with various browsers for various operating systems. Simply check each browser that you want to test, enter the address of your page, and click submit. Browsershots with then begin taking screen shots in each browser that you have selected. When its all done you can even download all of the screen shots to you PC.
Q: What operating systems and browser platforms are supported by browsershots.org?
A: At the time of this writing browsershots supports Linux, Windows, Mac OS, Gecko, KHTML/WebKit.
Q: What operating systems and browser platforms are supported by browsershots.org?
A: Dillo, Epiphany, Firefox, Flock, Galeon, Iceape, Iceweasel, Kazehakase, Konqueror, Minefield, Mozilla, Netscapte Navigator, Opera, SeaMonkey, Shiretoko, K-Meleon, Internet Explorer, Opera, Safari, Camino
Q: Can browsershots.org take screen shots using older versions of browsers?
A: Yes. Browsershots has the option to select just about every major release version for each browser it has on it’s site.
Q: How much does browsershots.org cost?
A: Browsershots.org is a free web browser screen shot generator. However, free requests are usually queued and usually takes 30-40 minutes to generate a thumbnails of the 46 most popular browsers. You can purchase priority processing on a monthly basis, which usually generates your thumbnails within 5-10 minutes.
August 13th, 2008 at 12:39 am
Several notes:
1. Many browsers at browsershots.org are outdated or it is usless to check them:
a. dillo — no one uses it because it supports nothing.
b. epiphany, firefox, iceweasel, galeon, iceape, Mozilla, netscape, seamonkey — all use same engine Gecko, so it is enough to install firefox and check it.
2. It is not enogh to check how site looks, it is important to see how it behavies: JavaScript, forms etc.
3. It is faster and easier to install IE, Firefox, Safari, Opera and check them (for windows users — only missing KHTML). For linux only serious problem is IE7, even Webkit (safari’s engine) can be tested soon on linux.
4. It is more important to check that the site written according to standards to be sure it will not be broken in nex Super Craizy Web Browser 2010.
August 13th, 2008 at 12:59 am
1) People still use outdated browsers. Many people believe in the notion if its not broken, don’t fix. For example, my friends parents are still running windows 98 with IE 5.5
1)a I never even heard of dillo or some of these other browsers to be honeds
1)b It doesn’t matter if they use the same Gecko engine or not. Simply click on the thumbnail in this post to see why (the thumbnail links to http://browsershots.org/http://blog.alexanderhiggins.com/). You can immediately see that the default wordpress theme renders differently in various in epiphany, firefox, iceweasel, galeon, iceape, Mozilla, netscape, and seamonkey. Futher, the page renders differently between the various versions of each browser.
2) I agree 100% with you. Installing the latest version of each browser and checking a web sites functionality with each should be part of every developers best practices.
3) The problem is that is oftend not possible to have multiple versions of the same browser installed on the same machine. As your can see from 1)b it is important to test the various versions of each browser. How many times have you had something work in firefox 3 and not 2 or in ie6 and not ie7 or vice versa.
4) These new standards are going to be a subject another blog post. I really doubt that developers are going to adopt them for various reasons unless they are changed from there current version. Again, that’s a whole different topic. But just think of how millions of sites are still using HTML 4 (including google) instead of xHTML. There will be even less adoption of the xHTML strict. There is some crazy stuff they expect to be followed and its just not going to happen….
August 13th, 2008 at 1:18 pm
[...] done I was stuck with an RTL stylesheet has some cross browser compatibility issues.
October 1st, 2008 at 10:02 am
Hi
Nice site!
G’night