We’re now in the full swing of 2011 and the new year is unfortunately still carrying lots of baggage from the last decade. This baggage consists of old ideas, principles and standards which are still hanging around causing headaches for developers and more importantly, costing money to clients. The web is a fast moving industry where new standards and best practices can emerge overnight (or seem to) and old ideas, however great they used to be, often get superseded and quickly become old hat. We need to embrace these new standards and take advantage of what’s available to us today to make the best quality product in the most efficient way.
In the coming weeks, I’ll be posting some articles which are all linked with the idea of leaving behind the old world and looking towards the future of the web. First up…
Cross browser pixel perfection
This is an old and tired battle that has been waging for years and I myself have battled so often I could count myself among the ranks of web veterans of the world.
The idea that all websites must look the same in every browser is a time consuming one. Lack of good standards support in browsers like IE6 means we are still having to apply hacks and workarounds to ensure a site looks the same as it does in the latest version of Safari. To achieve effects like rounded corners and colour gradients we require the use of images which means more work to create the images, more files to maintain and more HTTP requests and downloads for the end user. I think you’ll agree that’s quite a bit of work just to make a rounded corner work in older browsers.
Just to give you a quick example, say we have a button on a form. Using old techniques, we would apply extra code and images to make buttons look like this:
Embracing up-to-date standards would mean modern browsers are capable of seeing the button above and lower grade browsers would see a simpler version:
While it doesn’t have the “clickable” look, with the right wording, this can be easily identifiable as button. Facebook has over 500 million users yet their buttons are much more akin to my latter example so even the big players sometimes choose to ignore what is considered best practice or conventional.
Rather than concentrating on creating cross browser pixel perfection and worrying if IE6 users will see curved corners, we should use our time more efficiently and pool our efforts into creating the best overall experience. Websites that load quickly, have great content and CTAs which are well thought out have far better chances of succeeding than a site that’s riddled with round corner images and old hat methods to make sites look the same across browsers.
