lost in translation – in the browser!

By in best practice, brand, featured, web design on 5 December 2011

If you believe that all Internet browsers render your page the same way – think again. Because thinking that will turn round and bite you!

Browsers are supposed to display the same way, but web designers often work long into the night to show your pages consistently.

It all used to be just Internet Explorer versus the rest, but these days, we’re battling with Firefox, Chrome, Opera and even Apple’s Safari!

Its not about layout and margins now – its now about trying to do more. Like using fonts. Bear with me while I take you back.

Older browsers only display a limited family of fonts -like Arial and Times New Roman. These were the only fonts that you could be sure that most users would have installed. But they make pages look – well, kind of dull and boring. Like we’d seem that all before.

Blame Apple. They built websites that looked cool and classy. Apart from great design, these sites used new fonts. And our old display problems began all over again!

Even choosing a fairly common font like Georgia – which looks great in Chrome when used for headings, will make Firefox throw a wobbly – the font will appear oversized, resulting in it overflowing the space. So what can we do?

We have to test carefully, maybe using more conservative fonts. We can use webfonts. Webfonts display more consistently, but some sites suffer performance hits as a result. Inevitably, cool design will take a little longer and may just cost a little more!