After many years spent building content management solutions for many of the Top 100 countries in the world (Including a stint working for Microsoft), I find it interesting how little validation goes into ensuring sites are cross browser compatible. Most developers are aware that testing the cross-browser compatibility of a website is something they should do, and although we all have own preferred browser, it is a given that your website visitors will probably not be using the same web browser as you. Cross browser testing is a type of compatibility testing designed to ensure that a web application behaves correctly (sometimes identically) in several different browsers and/or browser versions.
In the 90’s, there was a stage where Microsoft had over 95% of the browser market and no one cared about ensuring a site worked correctly in multiple browsers. The slow, steady decline of Microsoft Internet Explorer continues apace with the Internet Explorer charting another market share low in April with 59.95 % of the browser market–down from 60.65% in March and 67.77% from the same time last year. Clearly, IE 8, while largely well-received, hasn't done much to reverse the overall decline of Microsoft’s browser. Hard to believe that IE held an estimated 95% of the browser market in 2003, isn't it?
This is the first time IE’s share has ever fallen below 60%. What this clearly shows is that cross browser testing is now more important than ever before. Ensuring your site works on Internet Explorer means that at best, you are confident that your site works on 6 out of 10 visitors browsers. This of course is also incorrect because as any developer can tell you, IE 6, 7, 8 and even the IE 9 preview are vastly different rendering engines altogether.
So looking at the fact that Internet Explorer 8 has 24.66%, Microsoft Internet Explorer 6 17.58% and Internet Explorer 7 12.50%, even ensuring you reach around 6 out of 10 customers means you need to have at least done cross browser testing on 3 different browsers.
Meanwhile, Mozilla’s Firefox, Apple’s Safari and Google’s Chrome all made small gains at Internet Explorers expense. Chrome posted the largest gain, rising 0.6 points to 6.73%. Firefox’s market share rose 0.07 points to 24.59% and Safari’s increased just 0.06 points to 4.7%, a surprisingly under whelming gain for a browser that ships not just on the Mac, but on the iPhone, iPod touch and now the iPad as well.
So assuming that you built your website to reach the largest possible market, or if you are redesigning an existing website, you could look at the website stats for your website and see which browsers (and operating systems) the past visitors have been using. Understand, this is not a recommendation to ignore the less frequently used browsers of your visitors, but an exercise to show you what browser your website visitors are using, this would be a good place to start.
A safe policy to have is that each web page is viewable in as many browsers possible. The best way to do that is to ensure your code is as W3C standards compliant as possible. Of course you can use Multi-Browser Viewers Html validator to help there. (A shameless plug of one of our more powerful but obscure features).
So how do you make a Site Cross-Browser Compatible and is screenshot testing enough?
Firstly, to create a cross-browser compatible website ensure you follow the following simple standards:
1. Use only standard compliant coding.
2. Don't use browser specific (proprietary) HTML tags and features. (These only work in the browser they were created for and may even break your web page when viewed in another browser.)
3. Validate your web pages.
- Validate your HTML/XHTML coding using the Multi-Browser viewer’s or the W3C’s free validation service.
- Validate your cascading style sheets using the W3C free validation service.
4. Given the interest in HTML 5 and the lack of interest in XHTML 2, develop HTML 4.01 Strict and follow these practices: (which are recommended in HTML 4, and required in HTML 5 and XHTML 1.1)
- All elements and attribute names must appear in lower case,
- All attribute values must be quoted,
- Non-Empty Elements require a closing tag,
- No attribute minimization is allowed,
- In Strict mode, all inline elements must be contained in a block element.
Some people may have the "You can't please everyone" attitude. Yes, your site will look different in each browser because each one interprets the coding differently. The goal with cross-browser compatibility is to make your site viewable in the major browsers available and have the pages render correctly. One thing that will drive visitors away is a site that doesn't work in their chosen browser. Of course you wouldn’t be reading this blog if that was the case so we now get to the steps I tend to follow to ensure compatibility.
Test browser screen shots to identify initial layout issues. (Don’t just rely on screen shots as this is only a visual guide.) It doesn’t mean your website works. It only means it looks okay.
Test actual browsers to ensure that all menus, css, post backs etc. work. Remember that just because your site works in IE 8 doesn’t mean it will in IE 6.
Test mobile devices.
Cross-browser testing is a hassle. Most of the time you can follow standards and get a decent looking website working cross browser, but there's always variations. All browsers have their quirks and older IE's have more than their fair share. As I see it, there's basically two sections to cross-browser testing.
|
|
Pros
|
Cons
|
|
Breadth
ScreenShot Service
|
Get screenshots of your site on multiple browsers and platforms
|
No interaction with the browsers, no way to debug interactions.
|
|
Depth - Interaction
Virtual Machines
|
You really get to see how your site looks and works on many browsers.
|
Typically, you have to maintain a bunch of Virtual Machines, or a be aware lot of browser installations. Please note that this is not the case with Multi-Browser Viewer
|
Neither are mutually exclusive and you really do need both to ensure cross Browser computability. Having a site look the same is the start, but ensuring the site actually works is certainly just as important, if not more important.
Hope that helps.
James Melvin
Location: PostList
