This is a bit old - you may or may not notice the date on this post but it's over a year old. That doesn't mean it's not useful but we all know how fast things chance on the web so there's a chance that techniques and technologies described here could be a little dated.

A useful analogy of web design and browser compatibility

My standard contract (based on Andy Clarke‘s contract killer) includes a clause about creating designs for the latest version of current modern browsers and any older versions will get a workable version of the content. I do of course do some more specific catering for a certain browser if needed but generally building something sensibly and providing the correct fallbacks works well enough for clients.

But sometimes they question why I work this way? I find the best way to explain is with the good old movie making analogy – one I touched upon in an old Smashing Magazine article about using CSS3. It works well as it’s something people are more familiar with, even if they don’t watch a lot of films they will know the terminology and ideas you’re explaining.
So how does the moving making analogy go? A little like this.

Let’s pretend we’re making a film instead of a website. The website design is of course our film and the browsers are our forms of playback, in this case we’ll use forms of home playback. Let’s say we have a 3D TV setup, a BluRay setup, a DVD setup and a VHS setup. (I’m not here to argue about the merits of 3D films, we’ll just take it as a given it’s best and at top end) We’re making a film for the best possible medium we can, we want a film that looks good on a 3D TV that takes advantage of all that has to offer, at the same time though we want a film that can be watched by someone who just has an old VHS setup.
So we make a film that is in 3D and we make it as good as possible and then we make adjustments to put this film on standard BluRay, standard DVD and even make a VHS version. Gradually as we get to older forms of playback we start to have bits missing, we won’t have the 3D on older media, we won’t have the same picture and sound quality once we get to DVD, we’ll start to miss DVD extras and even more functionality when we get back to VHS.
But essentially we still have the same film but presented within the capability of the users setup, we still have the same story with similar visuals just sensibly tweaked where needed for older media. In the analogy of course the browsers on the 3D scale are the likes of Chrome and the VHS is around IE6, although maybe IE6 is even older? A black and white TV maybe?
Obviously you have to put each of these on a different medium, BluRay, DVD, VHS tape, you can take those steps as the tweaks you make at stages of your web design – modernizr and that type of stuff. How much effort you put in depends on how much you want in the DVD / VHS version.

So it makes sense that we work for 3D? Why not it’s the best quality we can get – why would we make a film for VHS? Why would we therefore design for IE6? We can’t predict what a user will have at home but we’re making something that will work no matter what. If for some unbeknown reason all your clients users have IE6 then you have to put a lot more work into the VHS version, but you are forever limited by the technology, in the same way there’s only so much you can do a website for IE6.

What also comes out of this is that if the movie has a rubbish script and story it’s not likely to be very good on any media, and it may look great on 3D but when you strip out all the fancy visuals it falls down on VHS. We want to make a film that works at every level and that means a solid script, or in our web design case a good content base for the site. So you work up from the story to a basic idea of the visuals, that’s everything that’ll go in the VHS, we then start to layer ideas on top of that until we get to the 3D version – of course you can work with your eye on those big flashy 3D visuals throughout the whole process but you still need to make everything work on the way up.

Hopefully that makes sense, personally I find it a good way to explain problems around browsers and why the web doesn’t look the same on every browser.