As I've mentioned across several posts, my redesign for CannyBill makes heavy use of HTML5 and what I call extended CSS. Extended CSS is CSS2.1, parts of the CSS3 specification that have already been implemented in progressive rendering engines, plus proposed CSS3 that browser makers have implemented and submitted to the W3C. Working this way means that my design is flexible and adaptable to the natural differences between browsers. More on that later.

Although we looked at every page in our set of browsers, to keep this post brief I'll concentrate on the two most complex — the home and plans pages.

Choosing a benchmark browser

I strongly believe that to achieve the best design that I can, I should design to the best browser I can, not to the lowest common denominator or the most widely installed. Your benchmark browser may be different, but mine is Safari 4, not simply because I use a Mac but because its Webkit rendering engine is the heart of so many desktop and mobile browsers. Using Safari 4 (or any up-to-date Webkit based browser, the design looks exactly as I intended, complete with elements that I styled with border-radius, CSS generated gradients and shadows and RGBa.

Safari 4 Webkit

Home page in Safari 4 Flickr

Like many of the pages on the new CannyBill, the home page relies on:

• RGBa colour for the language bar and other elements
• Border radius for main navigation and call to action link buttons
• CSS generated gradients for main navigation and call to action links
• CSS generated box shadows on certain :hover states

The plans and pricing page adds extended CSS transforms (scale) and transitions.

Plans page in Safari 4 Flickr

While, aside from Webkit, only Firefox 3.6 has implemented much of this CSS, I can mostly live with that because, as we know, web sites don't need to be experienced exactly the same in every browser.

Firefox 3.5

Next in my testing order, Firefox 3.5 has implemented RGBa and border-radius.

Home page in Firefox 3.5 Flickr

Plans page in Firefox 3.5 Flickr

While that browser lacks the ability to display some of the CSS that is Webkit is capable of, people using it will not have their experience adversely affected and there is absolutely no reason not to include those features solely based on the lack of ability of a less capable browser.

Camino 2

Camino 2 (beta) also produces an acceptable result with its Gecko rendering engine.

Plans page in Camino 2 (beta) Flickr

Opera 10

Opera 10 is a huge improvement on previous versions, but its developers seem so far to be a conservative bunch in respect of implementing CSS that is not specified or almost specified by the W3C. That is why, although Opera 10 has a fantastic new UI and some interesting functionality, I would not consider it to be progressive like Firefox or Webkit-based browsers.

Home page in Opera 10 Flickr

Plans page in Opera 10 Flickr

Missing CSS design elements include solid specifications such as border-radius, box-shadow and CSS columns. I am assured that these will be in Opera's next release and I would like to see designers and developers get behind the Opera team to encourage them to push their own CSS boundaries.

Firefox 3.6

The browser landscape is now more varied, and I would dare say more interesting, than it has been in years. As a Safari user, I love Webkit innovations, but Mozilla are innovating too. The next Firefox release will bring that browser close to the capabilities of Webkit.

Plans page in Firefox 3.6 Flickr

IE8

By now, some of you might be wondering, but what about Internet Explorer? As we outline in our contracts, we test in the latest version of any browser, so for Internet Explorer that means IE8. While IE8 has cured many of the ills of its previous incarnations and is a fine browser for the non-discerning, it lacks implementations of RGBa, border-radius, shadows and of course the CSS generated gradients found only in Webkit and Firefox 3.6.

Home page in Internet Explorer 8 on XP (VMWare) Flickr

Plans page in Internet Explorer 8 on XP (VMWare) Flickr

In most cases a browser that is missing these features does not hamper the core design or a person's experience of using it. In the case of IE8, I used Modernizr to help me apply alternative styles based not on browser sniffing but on a browser's capabilities.

.rgba 

.no-rgba 

The area of the design where I did decide that a lack of CSS gradients in Firefox 3.5, Camino 2, Opera 10 and IE8 would hamper the design was the testimonial quotation. Webkit and Firefox 3.6 apply CSS gradients.

.cssgradients .testimonial { 
background-color : rgb(247,249,251);
background-repeat :  no-repeat;
background-image : -webkit-gradient(
linear, left top, left bottom, 
from(rgb(255,255,255)), 
to(rgb(247,249,251))); 

background-image : -moz-linear-gradient(
left top, left bottom, 
from(rgb(255,255,255)), 
to(rgb(247,249,251))); } 

For other browsers I simplified the design by adding a solid white background-color and a border. I also used Modernizr to alter the position of certain child elements in the testimonial.

.no-cssgradients .testimonial { 
background-color : rgb(255,255,255);
border : 1px solid rgb(223,231,239); }
 
.no-cssgradients .testimonial p.more {
bottom : 20px; } 

People who are using Internet Explorer 6 will see the page rendered using the Universal IE6 stylesheet. This is a pragmatic choice and one that frees up valuable time and resources to spend on design, rather than on expensive hacks for a broken browser that will have diminishing returns.

What does browser testing mean today?

Only a few years ago browser testing meant that I would spend hours of my time (and a lot of my clients' money) on attempting cross-browser, pixel perfection. Now, not only is this not practical or affordable, it's not possible. That is, unless I reduce my designs to the lowest common denominator or use expensive workarounds.

Why not just do this? After-all, many people still think that that is an essential part of a web designer/developer's job.

I disagree.

The landscape and the industry is changing, rapidly. If you think that the job is the same as five years ago, look at what I was still contending with then.

Home page in Internet Explorer 5 Mac Flickr

It is not a web designer/developer's job to fix or improve a browser. That is a browser developer's job, plain and simple. Not only is it impractical and uneconomical to attempt to make a site look visually identical across browsers, it also discourages browser makers from improving or to implement new CSS.

All of this brings me to what exactly browser testing mean in 2009/10. For me it simply means ensuring that my content and functionality are accessible (by using meaningful markup, foundation CSS and unobtrusive scripting) and that a design does not look broken when viewed through older or less capable browsers. This approach is liberating. It stimulates me to design to the edges of what browsers are capable of rendering.

Much as you might think that I must be lucky to have clients who allow me to work this way, I'm not. It's not a matter of luck. Instead it's a matter of clearly explaining the issues to people and giving them options. If my experience is anything to go by, people are more than willing to accept these natural differences between browsers and for you to design around them to make the best use of your time and their investment.