Have you ever looked at a website on one computer, then you look at it on another computer and it’s slightly different? Maybe it’s slight, and you have to look closely, but if you look close enough at any website, it will usually look different on different computers. Why? Shouldn’t websites look exactly the same everywhere?

One might reasonably think this, but it’s not true. Most websites don’t look the exact same everywhere (we’ll explore why in a minute). However, they also don’t need to look the same everywhere.

Wait, websites don’t need to look the same everywhere!?

This disturbs many of us that pay attention to detail. It looked just right on this computer, and it’s subtly different over there. Yuck! However, we have to realize that most people simply will not notice. They are focused on their computer and getting their task done. As long as it looks great on their computer, they don’t care that it looks slightly different (but still great) on another.

Okay, I guess, but why does the website look different in the first place?

I mean, if no one changes the website, than why does it look different? What’s the point?

Well, there are two different reasons why the website looks different: it just happens to be different, or someone intentionally made it look different. Both have the same underlying root cause: different browsers are different.

Browser differences

One of the greatest things about the Web is that it’s not controlled by any one person. Microsoft, Apple, Google, Opera, Mozilla, and many other people all make software that let people use the Web. They’ve had a public discussion and worked out how the Web works and written it in a long boring document. Their goal is to make everything that matters work the same, while still leaving enough room for everyone to do innovative things and compete to be the best.

Sometimes browser developers take advantage of the options left to them to choose settings that they think people will like better. Other times, the standard wasn’t quite specific enough, and two browsers implement something differently. In the end, that will likely be fixed, but it may look different for the mean time.

That brings us to the main reason sites look different in different browsers: browsers are developed at different speeds and with different priorities. There was a time (a long time ago) where only certain browsers supported images. So websites would look different depending on if images were available or not.

Today our differences are not quite as drastic, but they still exist. Just a couple years ago, it was easier to make rounded corners in one browser than another. Today, some browsers let us put a nice shadow under text to make it pop off the page; others haven’t gotten around to it yet. How do we deal with all these differences?

Progressive enhancement

The industry best practice is called “progressive enhancement”. The basic idea is that your site should work everywhere as best as possible, given the available features. If there were a browser somewhere that can’t load images (maybe because of bandwidth), then the text should still be readable. If your fancy order button that spins around and flashes to get the customer to click it doesn’t spin and flash (please don’t do this), the customer should still be able to order pizza. If we can’t make rounded corners, we could make them square and keep the rest of the design.

In practice, maybe there’s a drop shadow on the sides of the page on your website. It’s a very minor part of the design. So maybe we could implement it by making it look normal in really old browsers, but a modern browser would show the drop shadow. Most of these decisions in websites we make will be along these lines.

(Fun fact: many of us think of responsive web design as an extension of progressive enhancement: with responsive web design you use the screen size to its fullest potential, in addition to all other features)

Testing

As part of a normal development and launch process (it’s in ours), a good web developer will test the website in many different browsers in different configurations so he can make sure it looks great (but not the exact same) everywhere. We do this, and as a result, you will not notice too many differences, but we do make progressive enhancement decisions where necessary. If we did it right, you shouldn’t notice that too much either.

Other differences

Other slight differences are those of fonts: Macs and PCs have different sets of fonts. They’re usually roughly equivalent, but if you look closely enough, you can tell the difference. We carefully choose fonts so the differences are very minor.

Additionally, if the user has told their browser they want larger text, or something like that, the website obviously will not override that and will look different.

So, about those differences

Now you understand why slight differences in appearance occur between browsers. Sometimes the browsers have done things slightly different, sometimes, the operating system is different, and sometimes it’s intentionally different to take advantage of differing capabilities. However, it should not affect the overall image of the website or the web developer should fix it to preserve user experience.

With as complicated as today’s computers are, sometimes differences in layout seem dependent on the phases of the moon and the federal holidays, but we leverage our experience to wrangle the website to look the way that works best for you. As you can tell from our portfolio, we have years of experience with this, and if you have any questions, you can contact us to work on your website.