Pixel perfect?

9th March 2012, by Joe Turner

Occasionally, as a client, it can be a little confusing when a new website opens in your browser that doesn't look like the signed-off design - whether it's drop shadows not appearing where expected, round corners missing, or translucent areas being solid colour.

Web design is still seen as an extension of print and, as such, is still looked at in a very permanent, static way. It’s important to remember that visitors can access your website using a variety of different browsers (from Internet Explorer to Google Chrome) and devices (from laptops to mobile phones). Every single device and browser will render elements of a website in slightly different ways. By accepting these differences, you’ll actually start to reap the benefits:

Time spent on improvements

Creating rounded corners, gradients, drop shadows or animations is simple in modern browsers - but you’ll have a developer begging for mercy when trying to replicate it in older browsers, such as IE7 or 8.

Ask yourself this: would time be better spent making these elements look identical in older browsers (when the percentage of people seeing it is always falling), or should it be spent improving the user experience, carrying out user testing or adding some extra aesthetic touches?

Target a growing user base

As browsers are improved, the number of visitors using older browsers is shrinking every day. Why would you want to spend money on this area when you can create a website that will improve as the next generation of browsers are released?

Speed matters

By including functionality to allow all browsers to render a website identically, bloated code is created, alongside the need to load additional imagery that isn’t necessary for modern browsers. Broadband users now expect websites to load instantaneously, so there is no excuse for a slow-loading website.

Search results

The speed of a website could not only affect your conversion rate by users dropping out - it could also affect your search rankings. Google uses page size and loading time in its search algorithms. A fast-loading page will rank better than an identical page loading in double the time. Images and bloated code all contribute to the download time of a page.

Built to last

Building a page using old techniques to cater for a small percentage of users will inherently mean that a website has a shorter lifespan than one built using the new tools available to developers. As browsers develop, you may find that including code to cater for older browsers limits your website’s potential.

Quicker updates

What seems like a simple job could potentially take many extra hours if a website is built to operate fully in older browsers. Colour changes can involve recreating images rather than a simple CSS modification, for example. This extra time eats into a project’s budget and means less work can be completed.

Pushing the boundaries

The web is all about pushing technology to the edge, and designers love to challenge boundaries. The sure-fire way to de-motivate a designer is to hold them back and insist their ideas work in outdated browsers. Would you rather have a website that sings as loudly as it can, or one that simply fades into the background? 

But visitors will notice!

You will actually find your more accomplished users already using modern browsers, and those who aren't won't miss the round corners or drop shadows because they won't know to look for them.

This has always been a difficult point to explain but a comment I heard by Andy Clarke summed it up perfectly. It's a very well kept secret, but...

'Only geeks have more than one browser installed!'

Your average user will have one browser and would never think to compare a website in Chrome and IE7. So, by accepting this, and acknowledging that there will always be differences between browsers, we can design and build websites to their greatest potential.

• Development