When a website is let out into the wild, there's a lot it has to survive. The tranquil browser landscape of old (a handful of desktop applications) has been transformed into a veritable jungle through which mobile devices, tablets and even gaming boxes stalk their prey.
As a result, the challenge of making a website work well in every browser through which it might be viewed has become much harder. The key to ensuring that this challenge doesn't leave the web designer pulling out their hair is defining what we mean by 'work well'.
Watching Avatar in black and white
Let’s start by thinking of a website as a TV program and a browser as the TV set. Nobody would expect watching Avatar on an old black-and-white CRT TV to have the same visceral impact as watching it on a full-blown IMAX cinema screen in stereoscopic 3D.
But crazy as it seems, this is what often happens with websites. When a client says, "This site needs to work in IE6," this can usually be translated as meaning that all those lovely 'HD' components like rounded corners, complex gradients, text shadows and multi-layered transparent images need to be painstakingly recreated for IE6 users.
Of course, there are numerous patches and fixes that enable a web designer to replicate these HD components for browsers unable to support them naturally. Rounded corners and drop shadows? No problem! Just use a hack that exploits VML. Want your web fonts free from the perils of Windows rendering? No worries! Just use sIFR.
The hidden cost of hacks
This all seems very tempting: hacks like these are well documented and are simple to implement. However, everything comes at a price. Potential problems that may arise from using such technologies include dramatic increases in page load times, or reliance on third-party technologies such as Flash. This could make your site less responsive, slower to load and leave users frustrated – regardless of what browser they choose to use.
So does this mean we can either have slow but nice looking, or fast and dull? Put simply, no. If we understand what a website's purpose is (and by extension, what its users need to achieve), we can ensure the website is a great experience for them all.
A worked example
Let's imagine that we're making a website to sell shirts. A few core goals may be for it to:
- Represent the look and fit of each shirt as accurately as possible.
- Make the experience of buying a shirt simple, safe and secure.
- Ensure a seamless, enjoyable user experience.
- Ensure that each brand of shirt is represented well, and feels credible.
Now let's imagine that we've created a beautiful set of Photoshop visuals that we're ready to show the client. In these, we have custom fonts, rounded corners, text shadows, drop shadows, custom form buttons, drop caps and ligatures.
These visuals satisfy points 1 and 4, and the client loves them. We're ready to build. But how do we replicate all those rich effects, now we've promised the client – having found that 20 per cent of their user base is still using IE6 and 7 – that the website will work in older browsers?
Redefining work
The key here is to define what 'work' means. What it shouldn't mean is that every tiny detail of the design is recreated in every single browser. Rather, it should mean that users of any browser should be able to use the site as dictated by the four goals we set out earlier.
With our focus shifted, we can define the phrase 'will work in older browsers' more precisely:
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
"We’ve discussed with the client what the core brand elements are and identified that their logo and the custom typeface are key, and will therefore need to display accurately on every browser. However, the sunburst gradient won’t show across all browsers because we want to create it in CSS3 to ensure that we’re not slowing things down with too many images. Instead, users on old browsers will see a flat colour."
This solution means the site still achieves its goals while ensuring that it represents the client's brand in the best possible way. This is the ideal scenario. However, many clients find this concept hard to visualise. To start on the right foot, you could show one of the key pages mocked up for an old and new browser. This should help the client realise that the design isn’t being 'degraded' for older browsers, but tailored to their capabilities.
By bringing a client back to what their site needs to achieve, their focus can be redirected to the fundamental questions. Otherwise, it's easy for them to become fixated on a visual flourish that has no impact on the online representation of their brand.
Not simply recreating your design for older browsers pixel by pixel can be an uncomfortable shift to make, but I’m confident your clients will thank you in the end – particularly once they see the feedback from their users.
A little light reading
There are many brave souls forging ahead with these ideals. Andy Clarke's book Hardboiled Web Design is a great read. We at Tangent Snowball have also created a short pamphlet for our clients inspired by Paul Boag's Where Are My Rounded Corners?
