Re-thinking Browser Compatibility

Kryptonite is to Superman as the browser is to the web designer. The lives of web designers everywhere would be much better if browsers would render their beautiful designs without a bug or a hitch. But sadly this is and will never be so. It’s our time to re-think the way we work with the browser.

Print and Web

Modern web design is still very infantile compared to print design, where centuries of printed media have crafted best practices. Although a printed design does not vary much in position because of its fixed nature, it can vary widely in other areas such as color or contrast due to paper or press quality. These variables can dramatically alter the message of any design once rendered on paper.

Browsers are the most notorious destroyer of fine designs on the web,  just like old printing machines or poor quality paper products can ruin printed designs. But unlike the print world, web doesn’t have the ability to rely on centuries of proven methods to handling inconsistencies. Another unique property web designers have to handle is the fact that we don’t get to control the quality like print designers. We don’t get to pick which browser everybody will see our site in, we are at the mercy of the users and what browser they are using. At least in the print world, the designer has some control over how the users will see their product.

Different Browsers for Different Folks

Browsers are companies too, and just like any other company in the world they also have competition. If there was some huge web standards organization that forced all web browsers to perform the same then there would be no use for multiple browsers, we’d actually just have one awesome browser – I think we’d call it webkit. But because browsers are fighting for users – just like our web sites do – they build in different features in order attract users.

In the print world, copier companies compete with each other by adding different features and using different color profiles. Plus, they engineer specific features in order to differentiate themselves and market to particular audiences. For example, Canon color printers are more widely used in the commercial printing industry because they have a more standard, higher quality color profile and equipment. Ricoh color printers are marketed toward business color products that don’t require such a robust and complex color profile making them better for internal company publications like reports. If you’re a designer that is making print creatives for a large commercial campaign you’re more likely to us a commercial grade printer rather than a business or personal grade printer.

Browsers are similar. Some browsers are built to handle heavy design requirements and other browsers are built more for rendering documents. To put it another way; webkit and gecko browsers are built for publishing high quality, design intensive web sites, where as older IE and Opera browsers are built for handling readable documents, partially because they are old. Think about the difference between an Apple computer and a PC; Apples are built more for creative development where as PC’s are built for faster, more powerful computing power. Generally, IE will always be built for a more technical or business audience where Chrome and Firefox will generally cater to a more creative audience.

As the web progresses into the next decade browsers are going to do more to differentiate themselves, this means that we need figure out a better way to handle browser compatibility. Long gone are the days of trying to make everything look the same in any browser, eventually it will become near impossible to do, with out some serious workarounds – or just a really plain, boring design. These new browsers will no doubt force us to re-think the way we look at compatibility and what methods we use to handle browser differences.

Introduce Quality Levels

Take a deep breath – its okay for web sites to look different in different browsers and it should be that way. I’m not talking about completely different designs, I’m just saying that we should never design for the lowest common denominator – unless that’s your audience, but we’ll discuss that later. We should always, always, always design for the best quality experience. Print designers do, so why can’t we? This type of design mentality does two things:

1. Promotes progress by encouraging users to update equipment and software
2. Allows for the best user experience possible

Print designers have the luxury of always designing for the highest quality experience because they can directly control how their product is being viewed, but this lack of control doesn’t mean that we can not take a similar stance. When a designer takes a print campaign to a fulfillment company, that fulfillment company will provide the designer with a quality rating based upon quantity and price. If you pay less for prints, you get less quality. It’s that easy.

When dealing with clients and users, instead of spinning circles trying to get their site to be the same everywhere – why not give them quality choices. Show them what the highest quality site looks like in the highest quality browser and then show them what it looks like the lowest quality browser, then give them the choice. They can have their site look average in all browsers or it can look really freaking awesome in a few browsers – average in others. I’m down for quality levels, after all I can create an average experience in every browser but I can’t create the best most awesome experience in every browser.

I wouldn’t go as far as designing and coding in each browser just to show them the differences, that would be a lot of work for a simple explanation. If you know browser capabilities really well, a few Photoshop mock ups showing the difference would do just fine. You could even write a generic template that shows the differences and use that to show multiple clients how elements will render in different browsers.

Audience, Brand and Meaning

Gradients, custom fonts, background images or animations enhance your design, but they don’t make it. This extra design flare can be used to create a better experience but with out, they should never break the experience or meaning of your website. Luke W, in his Mobile First presentation talks about how we should design first for the mobile browser and then design for the larger display second. He contends that this allows us to evaluate what is truly important to the site and design. This minimal design method not only allows to us to design a better mobile experience but a better cross-browser experience as well.

A few things to consider when designing for different browsers:

• Know you audience. Your audience may not require the newest, latest and greatest browser capabilities.
• Maintain your brand by using colors, logos and consistent styles. The site may add or drop functions and elements but keeping a consistent brand will help maintain the experience.
• Make sure that the browser doesn’t break the meaning of your site. Content and meaning should always be separated from design and style.

Or just be like Ferrari

If you have a Ferrari you will know what I’m talking about. Ferrari’s are built to drive on the best roads in the world, not pot hole infested dirt back roads. It not only would destroy your Ferrari to drive it on some dirt track, but it would be insulting to the engineers and designers who spent their lives creating such a master piece. Take a hard stance – IE, Andy Clarke’s Hardboiled Web Design – and design your site to perform on only the best roads and forget about those losers who still use IE6, if they want to insult your design by driving it in a mud hole then so be it.