Shaun Mccran

My digital playground


Why develop cross browser designs - why not code to specific browser strengths?

I've been working for a marketing Agency for the best part of a year now, and one of the things that always rear's its head in a digital project is the compatibility of designs in multiple browsers.

We have all encountered differences in design compatibility and functionality due to the browser vendor and version number, but the usual course of action is try and code solutions that address the differences in browsers in an effort to make them look and work in the same way.

This article examines why that is the case, and I put forward the argument that by doing this you are spending valuable project time trying to ensure the same user experience on different browsers, when it may be a much better idea to use that same development time coding to the strengths of each of those browsers, to create a more rich user experience instead of a more generic one.

Most of us have at some point been in the position of finishing a project, only to look at it in a couple of different browsers and notice that something isn't quite right. In some case elements are slightly out of alignment, in other more extreme cases elements have 'div dropped' out of place altogether.

This is mainly due to how different browsers interpret the DOM, and how they interact with things like positioning, margins, padding and spacing in general. The historical trend here is to redevelop your CSS so that it works in the offending browser, or alternately add in comment tags to allow browser specific CSS files to essential force that browser into line.

view plain print about
1<!--[if IE 6]>
2<link rel="stylesheet"ie6.css" media="screen" />

Why do you want to make the experience the same in every browser?

Why downgrade users who DO have browsers capable of handling newer scripting languages that CAN deliver a 'Rich' experience. By omitting the newer richer features of modern browsers you are creating a weaker experience for everyone. Your policy of backwards compatibility is hamstringing the user experiences of people who can enjoy an all singling and dancing web experience.

Working in a Marketing Agency it is easy to see sometimes that clients view web design in the same way as leaflet and other types of hard-copy design. They have a vision of what they want something to look like, and they try as rigidly as possible to make it look exactly like their vision. A lot of clients simply cannot process the idea that you cannot guarantee how a user views your site. A favourite shock tactic of mine is to view their site in front of them, then turn off all style sheets and custom fonts. The look of horror on their faces is very telling, and it gets across the point very well.

Don't create a rigid site design – create a fluid user experience

Rather than spending time redesigning your site to fit around older browsers (it is mainly older browsers that are the issue) why not spend that time enhancing the 'Rich' features of the newer browsers? Rather than trying to create exactly the same experience in every possible browser, why not play to the strengths of the compliant browsers. Maximise the user experiences that 'Rich' enabled visitors can have, rather than enforcing a lower grade experience for everyone. Remember what you are creating is a uniquely interactive experience for each visitor, not a simple viewing of a rigid paper design, but online.

Its controversial broaching subjects like this with clients and it can take quite a bit of persuasion to make them see things differently sometimes. I'm sure that if you can make them see that 'lowest common denominator' development is a very backwards way of thinking, and you are very unlikely to ever deliver a project with any WOW factor, they can be swayed.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Ben Nadel's Gravatar I think this makes a lot of sense. As long as a site is "functional", I don't think that it has to look the same in every browser. I think rounded corners is a great example of this; if most browsers support CSS-based rounded corners, there is really no compelling reason to spend extra time/effort/money to get rounded corners to work in IE6. At that point, the cost of winning far outweighs the benefits.
# Posted By Ben Nadel | 08/11/2010 15:35
Shaun McCran's Gravatar Thanks Ben, its always good to hear your thoughts.

Having worked in a marketing agency for a while now I'm amazed how far people want to go to deliver the same experience to each browser. It seems a real shame when, as you mentioned, there are features that some browsers just inherently handle, yet these are dropped due to backwards compatibility issues.
# Posted By Shaun McCran | 08/11/2010 21:44
Lola LB's Gravatar Oh, I definitely agree with you. It's easiest do to this when you're working on your own site, as I'm planning to do. I don't envy those who have clients to satisfy and have to educate them as to why it's impossible to have one design look exactly the same on all browsers.
# Posted By Lola LB | 09/11/2010 12:16
reflective tape's Gravatar Thanks for sharing. I really appreciate it that you shared with us such informative post, great tips and very easy to understand.
# Posted By reflective tape | 13/01/2016 00:11
Back to top