Although this idea isn't new (and just for the record I know I didn't invent it), when I teach my design philosophy at workshops and conferences I'm often surprised to hear that the notion that people using different browsers (even up-to-date ones) might intentionally see differences in visual design sounds new.
- a deeply embedded feeling that the web shares print's need for pixel perfection
- the desire of brand stewards to control every aspect of a design
- a misunderstanding among clients and managers perhaps reinforced by
- an old fashioned workflow that has its roots in print design and pre-press
Thinking about alternatives
Please allow me to clear up a common misconception. When I talk about designs not looking exactly the same in all browsers I am not talking about making bad designs for people using older or abandoned software. I would never accept that. Or that a design should look poor or broken. Or that a person could be denied access to content or services if they are using a less capable browser. What I am talking about is creating a visual design that looks best to people who are using modern software and at the same time thinking carefully about what a person using less capable software will see. This approach is simply based around thinking about alternatives. It's little different to the way that I hope we have been taught to think about web accessibility.
You might be thinking that it's strange for me as a visual designer first, that I would promote an approach where some people see a lesser design that others. But I'm also a pragmatist and I know that in my business, I would rather ask my clients to spend their money wisely on things that will improve their business, than to waste it on hours of unnecessary development.
Not everyone will agree with this approach and of course if you do agree, how far you take it will depend on several factors and your own circumstances. I have my limits too. So here are five examples of CSS design differences that I can live with and do live with every day.
Before reading on, take a look at a Demonstration XHTML/CSS design file from one of my recent projects. I hope you think it looks great. I hope you find that nothing looks broken or out of place. I hope that you think that if you were reading this page, that you would find everything just where you need it to be, no matter what browser you are using. (As this project is not yet live I have removed the client's branding and content. Copyright: This design is not a template and must not be reused.)