Sunday, 19 February 2012

Why Websites Look Different On Various Browsers

Okay, you've rounded your corners, you've added the shadows, you've cleared unwanted swathes of colour to create your tranparencies...

...why does it look so dreadful on Firefox/Explorer/Opera/etc.?


Because different browsers work in different ways, and designers forget this at their peril. Wikipedia has a list of the different kinds of browsers and the layout engines they're designed to work on. The short version is that the multiplicity of layout engines is responsible for the differences in the way graphics, CSS and javascripts render (or not) in various search engines.

The problem

When I redesigned my website recently to incorporate rounded corners with drop-shadows, I forgot to make the adjustments in the CSS for the webkit browsers, with horrible results. It's just as well I often use different browsers when accessing features related to my "official" email address, or I wouldn't have spotted and rectified it.

I remember having a conversation with a designer who is more advanced than I am at a training session with SHV, in which she complained that she had spent ages making her website beautiful, adding all the mod cons, and when she went to show a client she was mortified to see how awful it looked in IE.

My failure to double-check my work on alternate browsers caused me to miss the enlarged corners that the square corners of my logo spoiled till today (it was only like that for 20 hours or so), but it's easily done.

Why don't the browser designers adopt the same standards?

For the same reason we don't all use the same browser. I'm a huge fan of Cometbird and hate Internet Explorer with all my heart and soul because it makes my work, which looks gorgeous in Cometbird if I say so myself, look absolutely hideous unless I take steps to correct (and limit) my designs so they're compatible there. And it's painfully slow, broadband or not.

I doubt that any designers like IE. In fact, most of them might even agree with my assertion that it's a necessary evil because it's built into most PCs, but I've found people online who *gasp!* hate Cometbird and love IE. I don't think they're designers, though.

The point is, as the Wikipedia article will tell you, there's a lot of history behind the browsers that we use today, and for that reason the designers have been moving in different directions without consulting each other and without considering standardizing -- until recently. Firefox appears to have become more webkit-compatible (my rounded corners were ruined when I viewed my site in Firefox), and IE seems to be bringing out a new version every year that sucks a bit less.

The Future

The difficulties experienced by designers trying to make their work compatible on multiple browsers and the move to alternatives such as Firefox, Opera and other browsers is apparently causing the powers that be at Netscape, Microsoft and Google to rethink their design strategies and work towards a system in which common standards are being adopted. When it finally happens, we designers will have our workloads reduced because we won't be struggling to make our CSS features work as intended on more than one browser -- and our clients will have nicer-looking websites, whatever browser they use.

No comments:

Post a Comment