Why Websites shouldn’t look the same in all Browsers

For years it’s been industry standard to consider a web design complete when it looks the same in all browsers. Client satisfaction demanded it and your boss kept checking your projects on various browsers and letting you know of inconsistencies. And it’s no wonder since the design is the first thing that pops up when a person visits the website. It’s the image that remains imprinted in people’s minds as the identity of the website. Of course you wouldn’t want someone to visit your website from another computer and another browser and find it looks different or worse, it looks broken.

Bit this article isn’t here to discuss these parts. Yes, the website’s identity and solid layout are crucial and you should try as hard as possible to make them stand out. What we want to discuss right now are the cases when making the website look the same in all browsers equals going one step too far. And it’s not about doing extra work and wasting more time, sometimes giving that much interest in making your website look identical across browsers can actually hurt your website. Yes, you read that correctly – when caring hurts. Let’s see why:

Websites are not all Design and Content

When we have a website then we have a design, some content and we also have usability. The website’s usability is as important as its design and content and you know you’ve gone too far when the design is affecting its usability. That’s isn’t a secret any longer but exactly how can you determine when a website’s usability is affected by trying to make it look the same across browsers? We’re not discussing things like supporting legacy browsers is hurting your website because probably everybody knows that by now.

The most common mistake I’ve seen in this matter is using fallbacks for each and every HTML5 or CSS3 element you’re implementing. Sure, you feel like you discovered a new toy and like to play around with it a lot. However, when the website is rich with shadows, rounded corners, grandients canvasses or web fonts, creating a fallback for browsers that do not support them is just going to hurt. Just consider this: Every rounded corner, shadow or gradient implies a background image and a container inside the code to hold it, or worse a CSS expression. To recreate web fonts you’ll probably go with a font replacement tool like Cufón, which requires the standard library script, the font script and the call script. The consequence of all this: Page gets significantly loaded. Or bloated if you prefer the naming.

Also, sometimes it’s just not possible to recreate something the browser renders naturally and make it look equally as good. For example you might find it difficult to recreate a box shadow that spans across the entire page container. That would probably mean creating 8 other containing elements around the container, 4 for the margins and 4 for the edges, make them stick to the container’s margin and apply a repeating shadow to them as background. Often you’ll find this impractical so you’ll go with a simpler, but not so good looking shadow.

Let’s take a look at this example, the home page of CyberChimps.com, which uses CSS3 extensively, does some falling back but also leaves some design elements behind in older browsers:

CyberChimps.com in Firefox

CyberChimps.com in IE8

We can agree the website looks equally well in both browsers. If we look carefully at the navigation menu we can see in Firefox there’s a linear gradient as background that has been successfully mimicked in IE. However we can also see in Firefox the navigation bar there are some rounded corners which in IE were left behind. The overall feel of the website remains however the same. In Firefox we can also notice a subtle shadow behind the navigation bar. In IE this could probably not be imitated so they have opted for a more obvious shadow. If we look at both browsers, we can tell the shadow in IE looks obviously out of place.

What it means when you use fallbacks

Every time you use a fallback or any technique or hack to make a browser behave some of the following occur:

• Each background image is an additional HTTP request – page load time suffers
• Each background image needs a separate container in the code – code gets bloated, empty tags even in new browsers, semantics are lost
• Each script is an additional HTTP request – page load time suffers again
• Each script is run in the browser – browser respond slower
• Every CSS expression uses significant ressources – Don’t ever use CSS expressions. CSS expressions are bad, mkay?

Also consider that most people who use older browsers probably also use older computers. Consider also that the browser you’ll mostly need to tweak for is Internet Explorer 8, which is a slow behaving browser by its nature.

Now I’m not saying you shouldn’t develop your website cross-browser. By all means, if you can make it look and behave as close as possible across all browsers then do it, but do it with care.

Use Browser optimization but use it with care

Of course one or two background images or a script can’t hurt too much. If all you’re doing is adding a background image for the top navigation which has a gradient background and adding the HTML5 script for IE then you should have no problem. It’s when your website has lots of rounded corners and shadows and gradients and I mean tens of them when these hacks start to hurt. Also, if these elements are more subtle then falling back to a solid color instead of a background image and forgetting about box shadows may seem better ideas than to implement them by force.

Consider the following rule of thumb: If the website’s design is based on HTML5 and CSS3 elements in its essence then stick to that and use fallbacks for older browsers only where the website’s consistency demands it. If the website uses only a few of these elements then you can make them look conveniently across all browsers.

If you take a look at my website you’re on right now you’ll notice I use elements like rounded corners, background gradients and box shadows quite a lot. However if you visit it from IE 8 you’ll see they’re all gone: the edges are hard, gradients are replaced with background colors and box shadows are completely forgotten. Now I’m not saying my website is an example of consistent user experience. The complete lack of fallbacks was a compromise made in favor of speed.

A not so good example may be if you visit the WordPress backend. In the screenshots below you can see the visual experience of the page is severely altered:

WordPress Admin in Firefox

WordPress Admin in IE8

In a modern browsers you will see shadows, gradients and rounded corners and if you visit it from IE 8 most of them will be gone, however in this case they have an excuse because they are trying to get rid of outdated browsers.

Offer the same experience, not the same looks

If you’re website looks great but it responds slow to something as simple as vertical scrolling then it’s not so great altogether. It’s not worth making it look like the design you had in mind if it can’t behave like a website should – fast and smooth. If the website’s speed and accessibility are kept and its looks are still pleasing then it’s enough for a satisfying user experience. If JavaScript, HTTP requests and other make it load and respond slower then you’ll have to lighten up the page’s load a little. Obtaining  a functional and aesthetically pleasing website is not difficult, you just need to find the right balance.

But my client wants it and pays for it

The main reason why this article was written is the continuing market demand for websites looking identically in all browsers. And it maybe written in vain since, we all know, the client always wins. But the fact that the client wants it doesn’t stop you from trying to talk him out of it. In the end it’s for his benefit and remember – you’re the expert.