Origen Creatives - Web design by Josh Clark

Musings A blog for talk about web design and the occasional rant.

Saturday, June 05, 2010

Selling CSS3 to Clients

Recently I had the great privilege to do a talk at Refresh Portland on CSS3. One of the myths that I talked about was this idea that we have come to believe that a website should look the same in every browser. In print, this concept of presentation perfection is much easier to achieve. Afterall, a  print piece may go to one printer in a single run, or maybe a couple, but in general, once a piece is printed, cut and distributed, the uniformity between pieces is extremely great. 

On the web, however, we build pieces that must be viewable in multiple browsers with different levels of support and capabilities in a landscape of devices that is constantly changing. We view the web on computers, televisions, mobile devices, music players, and gaming systems. Within each of these devices there are various levels of support for modern web standards. 

The truth is, a website can't look exactly the same in every browser. It's impossible. That might be why Dan Cederholm, a good friend of web standards created www.dowebsitesneedtolookexactlythesameineverybrowser.com.

The problem is that while this is the truth of the web, and has always been the truth, many of our clients, stakeholders and colleagues believe that our site should look exactly the same in all browsers, on all platforms, across all devices However, we can create better experiences for our users by leveraging the technology, constraints and features available to us in some more capable browsers, while continuing to provide a base-leve experience to those using more lack-luster technology.

One of the technologies that we could benefit by using is CSS3. Supported extensively in 4 of the 5 major browsers (Firefox, Safari, Chrome, and Opera), as well as mobile devices (Android and iPhone devices), CSS3 can help us enhance the user experiences of many of our users without effecting those still using Internet Explorer (although one would argue that they should be punished). 

In order to convince some people we need to talk about CSS3 not as a liability ("Doesn't work in all browsers") and instead starting speaking about it as a feature benefit. Here are four ways to sell CSS3 to clients, stakeholders or colleagues who you need to get buy-in from.

1. Good implementation allows us to leverage technology without killing the experiences of our other users.

If we implement our CSS3 right, it should have a zero-impact for our baseline users. This doesn't necessarily mean that we build the design we want for IE, and then add "flare" to CSS3-compliant browsers. We should build a website using all the tools available to us, including CSS3. But, it must degrade well into less competent browsers. 

2. CSS3 rewards standards compliant browser-use by enriching the experience.

In the past 7 years market share for Internet Explorer has plummeted, while Firefox market share has grown exponentially. When people can experience the web in a better way, with an enriched experienced, they will. By building in CSS3 we can reward those using better browsers. I'm not talking about breaking the usability or functionality layers of a website for non-CSS3. I'm talking about enriching the experience layer. By doing so, we push the market to adapt support, by creating a larger market incentive for users to switch. If they know they can have a better experience in a better browsers, they are more likely to change.

 At AnEventApart Seattle, Pete LePage, the Senior Product Manager for Internet Explorer gave a talk entitled "Help us Kill IE6." I whole-heartedly agree with the title of his talk (although, I'm not sure his talk supported his chosen title). One way that we as web designers can help is by enriching our user experience for compliant browsers, help change the landscape of the web, and pressure browser makers to move forward.

3. Allows us to move towards the future of the web. 

Browser support will only get better. The browsers who have implemented CSS3 capabilities are al members of the W3C and so their adoption helps solidify the standard. Like a fine wine or Cheese, CSS3 will only get better with wider browser support. What we do today lays the ground-work for the future, and things can only go up from here. If a browser doesn't currently support CSS3 (or a particular part of the developing standard), they probably will in their next version. IE9 is supposed to have some level of support for CSS3 - although exact support has not yet been finalized. One day, when a user updates their browser, they will automatically have access to the enriched experience, and your clients will be more than happy to learn that it didn't cost them a dime more. 

4. Cheaper production costs

Let's face it. One of the reasons why some of the CSS3 properties were created was to make common elements (like border-radius, opacity, text and border-shadow) easier to execute. CSS3 lowers production costs on most projects, allowing site enrichment without a strain on the pocketbook. Transitions, animations and transforms allow us to do some pretty cool things - many of which would have been expensive to develop and execute using other methods - with just a few lines of code. All clients like to see "sizzle," and CSS3 makes that happen in 4 out of the 5 major browsers for virtually nothing extra.

Parting Shots

Using CSS3 is not something we need to see as a liability. With a more thoughtful approach then "the site needs to look exactly the same in all browsers" we can leverage the features of CSS3, reward users of compliant browsers, move toward the future of the web, and save our clients some money while doing it. I don't know about you but this sounds pretty good rationale for using CSS3.

Oh, and if you can get away with it, try this: find out what browser your client/stakeholder is on, and design a site using CSS3 anyway. Most people don't jump erratically between browsers looking for variants in the design anyway, so chances are your client will never know. If they use Internet Explorer, deliver them an excellent site rendering in IE. If they use Firefox or Safari, they'll love the extra stuff. And if they complain, you have these four feature benefits to convince them you were right. 

Happy coding!