I’m often faced with this; clients expect their beautiful Photoshop mock-up reflected exactly in all browsers. They’ve designed by committee, had countless meetings to agree the radius of their rounded corners, and designed content to fit the mythical page fold. So, should we strive for this? Should we develop sites so they look the same in all browsers?
As web professionals, deep down inside we of course know this is not really possible, or is only possible through nasty browser hacks. We might like to say that ideally visitors will use our site with the latest greatest version of browser xyz. Unfortunately we don’t live in an ideal world. People don’t always upgrade to the latest browser. Sometimes people can’t upgrade. I have worked with many large UK corporate clients with a controlled desktop policy. My current client is (in 2011) still enforcing IE6 as the standard desktop browser – a 10 year old browser! There is an update rollout in process, but even that is only to IE7 – a browser that is 5 years out of date and getting older by the day. And they are not alone in this. Many many large organisations have a similar policy.
And we’re not just talking about visitors using their work PCs. Less technically savvy users may not upgrade as often as we might like. And there are those users who even if they wanted the latest browser may not be able to install it – there are countless users with older spec PCs who perhaps still have Windows XP, and therefore won’t be able to install IE9 for example.
There are so many combinations of operating systems, browsers, screen resolutions etc, I think it’s just not practical. And of course its a moving target with new and improved browsers being released with increasing frequency.
So what are the typical problem areas in a design that we are talking about here?
Well, lets start with the holy grail of all that is web design – rounded corners. As we know, css3 now allows us to implement these really easily. Before css3 we had to utilise a variety of techniques involving background images and extra markup typically for the corners. I’m a big advocate of keeping the markup simple and semantic, so adding extra divs for the corners really feels nasty. My view is that unless the rounded corners form an intrinsic part of the brand I go with the css3 border-radius technique. Modern browsers will display as intended, older browsers will still work and will still have a border but with square corners. Is that so bad?
OK, so what about font faces and sizes? Being able to use the same font as in the design is easier now that we can use @font-face, and font delivery networks such as typekit and fonts.com make this even easier. Thankfully we are no longer restricted to using system fonts, but it does make sense to declare these in the style sheet as fall back fonts in the case of the browser not supporting or not being able to use @font-face for some reason. Font smoothing and anti-aliasing is very difficult to control. Windows users have the option to use ClearType, but it’s a user option that is managed through Control Panel. Mac users have a similar control in System Preferences. Fonts can look quite different when rendered with and without ClearType and we as web developers have no control over this.
Often it is felt that the font size is an important part of the design. If only we could control it in the same way that we can when designing for print! Again, users have a certain degree of control over this. Modern browsers allow the user to zoom the entire page, but they also allow the user to zoom just the text. Internet Explorer 6 only allows the user to zoom the text. When the user zooms just the text, all manner of strange effects can happen to our design if we’ve not coded properly, but at a minimum the page almost certainly wont look like the original design.
Transparency can be troublesome. There are standard css properties for opacity, but IE does not support them. For IE we have to use a filter. css3 has introduced rgba colour values where the a is the alpha channel which allows us to control opacity, or we might use images with transparency but IE6 doesn’t support transparent png files very well! All in all, if your design includes transparent elements, getting this to work cleanly and efficiently in all browsers will be a challenge.
Even standard controls look different in different browsers and operating systems. An un-styled form element such as a button or select field is rendered with very rounded corners on a Mac, but square corners on a PC.
So with all this in mind, can a site look the same in all browsers?
No, I don’t believe it can, and I don’t believe it should. I believe that what is important is that the site or application is available and usable for all users, but that does not mean that it has to look exactly the same for all users.
Because we can’t control what operating systems or browsers our visitors use, we need to ensure it works for everything. The key word here is ‘works’, not ‘looks the same’.
This is our challenge. Enter ‘Progressive enhancement’ …..