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 […]

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.

Tagged with:

Patrick Cox

Patrick is a UX Designer and Researcher at Instructure (Canvas LMS).. He also enjoys family, snowboarding, sports, bacon and is jealous of your beard.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 12

Comments are closed.
  1. Great article! I wish everybody just had a Ferrari, so there where no incompatibilities… well, maybe some day… 🙂

  2. Hi Patrick,

    With pleasure I’ve read your article, especially after our little ‘chitchat’ on Twitter about this topic ;-P

    I get your point what you want to make with this article, and I believe in the ‘quality levels’ you’ve mentioned – mostly due to the browser of your choice (support of CSS3, WebKit, etc.).

    But this ‘discussion’ we already had in the early 90’s: “This website is best viewed in 800×600 on Internet Explorer” (aaargh, .. not again!).

    Furthermore .. a) the comparison between print and screen isn’t realistic, they are a different kind of medium with different software and possibilities to control the final outcome (print design ≠ screen design) and b) always keep in consideration what browser your audience (target group) has. As a web designer you’re making web sites for a target group, .. not for yourself.

    In the Netherlands, for instance, the most used browser at big(ger) companies is still IE7+ (implemented long ago and never changed since, only updated the version).

    Your target group mostly don’t give a sh*t about browsers, they just want to see a web site in the best possible way and experience-level.

    I’m not saying web designers should always start making web sites looking great in IE6 (which BTW I don’t support anymore, long live Javascripts to redirect IE6 users to a special web page: e.g. http://www.gonzographic.com/ie6.htm).

    But I truly believe in browser compatibility, trying to get the same experience and usability in all browsers (at least the big 5), okay maybe the ‘looks’ aren’t the same in all browsers (CSS3, WebKit, etc.), .. so be it. We, web designers, can’t change the fact which browser supports what, we only need to keep it in mind when designing web sites.

    But thanks for sharing your opinion/vision on this, it’s always good and refreshing to read the opinion of others!

    Cheers & Ciao Amigo ..

  3. I agreed with impulse to users to update their browsers, but I’m not agree to take the attitude to say to my clients ‘Your site will see great and fantastic just if your customer have the last “Ferrari” model.

    Part of work like web designer and developer is make that major number of users possible can receive the correct message, and they can look the site how it should see. Maybe not at all at 100% compatibility, but least they can see the website good and works with essential functions. ‘

  4. I would also recommend for those web designer to have a browser with small size for faster performance and compatible to all flash games and movie plug ins since i’m a gamer and a movie editor as well.

  5. Iván Flores > The ferrari is not the browser… The ferrari is your site (cos you’re the best designer ever) and your amazing site with effects on png with alpha, and lots of incredible jquery stuffs diserve to drive on the best roads (webkit, css3, canvas, etc…)

    Great article, Patrick, i think you’re totally right, but i’m not sure that clients would accept that their sites doesn’t display correctly on 30% screens of potential customers…
    Regards

  6. Just be happy there aren’t as many browsers to design for as there are mail clients…and all their little nasty quirks!!! It’s like driving a Pinto..off road!! ughh!!

  7. I quite agree, but it can be more to the point. Browser choices are limited.

    The top quality would be reached by designing for firefox, chrome, safari and opera. It will almost automatically work equally well in all three – if you stick to standards.

    ie8 won’t support the css3, make it degrade gracefully, because *a lot* of people use this browser. ie7 wil even need some fix to keep things in place. Of course you will apply that fix.

  8. It is so sad that we have to think the opposite of what you mention in your article. And that is because unless your doing freelance work, the agency or the company you are doing work for will dictate what browsers to target. Yeah I am calling out every IT department that is too damn lazy to upgrade to at least IE7!!! Get with it, IE6 was released in late 2001. That is going on 10 years ago. Pathetic.

  9. “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.”

    This makes absolutely no sense.