Websites Shouldn’t Look The Same Across Different Browsers"Here Is Why

Not long ago, on our sister site Smashing, we had a post discussing the communities adoption of HTML5 and CSS3 before they have become standards, and during that dialog we stumbled across another point that needed a bit more diving into. It was proposed that client’s expectations are somewhat unrealistic when it comes to their websites looking the same across all browsers and systems. This is not only something that the client is more than likely not going to be too happy to hear, but as it turns out, this is also a topic that some of us in the design and development communities are uncomfortable broaching with our clients.

We believe that the client will not want to hear what we have to say or that they will see this as a positive, so we often refuse to speak such evil. Image Credit

For whatever reasons, some members of the community, who may believe in this idea themselves, find it nearly impossible to explain to the client so they make no attempts to. They simply spend countless hours and suffer through numerous headaches trying to appease this unreasonable and unnecessary client standard which is in point of fact, looked on as an impossibility within the community. So why is it that we have a hard time explaining this understood truism to clients? The answers to that question are nearly as numerous as the reasons themselves that a webpage cannot look the same. So we hope to handle this for you.

This post came about with a focus on our clients and getting them to understand this idea, so that we can use this article as a guide for when we need to explain this to them, or as a reference that we can direct our clients straight to for their own benefit. We have approached the post with two basic fronts to take on in this discussion. Why a site can not look the same across different browsers. And why a site should not look the same across multiple browsers. Both of which are important to understand as we move forward in this dynamic and ever-changing landscape.

The Reasons Why it Can Not

First we are going to look at a few of the reasons why a website simply can not look the same across multiple browsers, because at the core, these are really the ones that should matter the most. It would be one thing if we were misleading the client or fooling ourselves into accepting this idea when it actually were possible to achieve, but that just is not the case. And here is why…

Vendors and Standards

One of the main reasons that a site will have some variance comes down to the basics, the multiple vendors and the standards they adopt per each version they release. Given that there are so many different options for browser, each with their own set of out of the box specs, you have to expect that there will be elements and design accents that do not fully display or function the same way across the various machines it will be viewed on. That is just an unfortunate truth of the industry right now.

Instead of looking passed this roadblock at all of the potential and possibility that lies beyond it, we allow these vendors and slow standard adoption to stop us in our progress. Image Credit

Especially given the W3C’s slow process of implementing new standards, vendors are often reticent to dive right in and put these cutting edge techniques into full practice. Which is decidedly their choice, but it has been said that the more the design and development community push the vendors to move forward, the better our chances of getting these new standards put into practice will be. But we need our clients to be on board with us to allow for this growth, and we need to help them to understand this landscape we are working in. One where certain areas of consistency have to be sacrificed.

Plugins and Addons

Not only are there multiple vendors making different browsers for the online market, there are also a massive amount of plugins and addons that will not only enhance the experience for the user, it can effectively alter the look of the sites opened up within its tabs. This is something else that we have to consider when trying to achieve this uniformity of presentation across the vast spectrum of browser options.

One of the main areas where we see concern from clients on this tends to come from that handy little ad blocker plugin which prevents ads from displaying and often times stops pop-ups from showing up on the page as well. When clients are seeing this for the first time, without any kind of heads up or a warning from us, they are not always going to have the best of reactions. This is why it is important to explain to our clients the various ways that their site can be impacted, or even just that they can be impacted by said addons and plugins. This way they have an idea of what to expect.

Individual User Preferences

Not only can the different browsers and browser addons effect the way a site is rendered from machine to machine, but so can numerous other individual user preferences. This can be a wildcard that can have various impacts on the site’s presentation that most clients may not consider when they are planning the approach they want to take on their site. Most of us take our own experience for granted, believing that this is the same experience every user has when they venture out on the interwebs, and that goes the same for our clients. They may be operating under this same assumption and we need to point out how unrealistic and unreasonable this perspective is.

Standard and Widescreen Devices

Another factor that can have more minor impacts on the way the site looks in the browser, but impacts nonetheless, are the plethora of screen sizes from device to device and user to user. From standard to widescreen devices, the screen size can determine how much of your site is displayed at any given time. Controlled by the user, who can freely adjust their browser window to further relegate your site into a smaller viewable surface. Clients might forget to take these considerations into account when they are formulating their ideas to kick off the process.

Sometimes we forget that our setup is not always reflective of every users hardware and we forget that there is more than one kind of display device in use. Image Credit

They need to know about these possibilities and the impacts they could have on the site. For instance on a blog, some designs with sidebars have the sidebar move to beneath the main content area should the browser window be scaled down enough. This is not often something we think about letting the client know, but if they happen across it on their own they may become slightly disturbed with no context or understanding about said positioning adjustments. Though these may not be regular issues faced, these are just further examples of the small details that can impact a site’s presentation from browser to browser.

The Mobile Market Factor

If ever there has been an entire market that has opened up beyond expectations to completely flip this truism on its head and give us an easy example that helps to prove this rule, then the mobile market would be the one. This quickly growing market has taken the web to interesting new heights and altered the basic approaches that we have taken to designing and developing websites And the entire market exemplifies the point we are trying to get our clients to see. Especially in the wake of this unforeseen X factor.

Not only has the mobile web caused us to see this idea much more clearly, but it also allows for the idea to be more easily digested and embraced by our clients. Mobile devices have seen a much more scaled back approach to the web being taken on sites, not just with the appearance, but also with the usability of the overall experience. The way users interact with a site and relate to and receive the content is much different, and thus requires an approach that compliments this smaller, generally touch navigated presentation. Once clients can see and accept this variance, others might be easier to digest as well.

The Reasons Why it Should Not

Now that we have gone over a handful of the reasons why having a site look the same across multiple browsers and devices can not be done, we are going to go through a few reasons why we should not even make this attempt at a visual consistency that will not be achievable. Beyond just the fact that it is not possible, that is…

Usability Matters Most

First up we are going to talk about usability. The look is certainly important to any website, but the look is always trumped in importance by the overall usability of the site. That is just a given. We can have all the fancy design elements in our work that we want, but in the end, how it works is the more vital aspect that needs to be consistently looked after. That is how we should view these projects, focusing not on if they look the same in every browser, but that they basically function the same way in every browser.

We have to remember that the way it looks is not as vital as the way it works. Every cog should be firmly in place. Image Credit

This is the point that we should be stressing to our clients when we are trying to get them to accept and allow for this variance in the look of the site. That these minor differences in the form are not going to be the main focus of the user, and that is who should matter to the client. No, the users are going to be concerned mainly with the function, and so should we. In this case, the appearance of the site is completely secondary.

It is What Necessity Demands

Just as necessity is the key to innovation, it is also key in steering our design and development decisions, or rather it should be. In other words, necessity should always be the key to our motivation when we are designing or developing a project. And just as we discussed, with the mobile web explosion, it is necessary to have and allow for these variances in the sites that we build. Otherwise, we are relegated to a much more stagnant industry that refuses to grow because we are sacrificing innovation to achieve a uniformity that is unnecessary and unreasonable.

So long as we are operating under this principle of doing whatever is necessary to deliver the best possible solution for our client’s and their user’s needs, then we should have an easier time explaining to the client why these differences have to be allowed. There is no since in wasting valuable energy trying to pull off something that is not going to come together in that idealistically dreamy way, when we can clearly see it is not necessary. For it is impossible.

Every User Counts

Another reason that we should easily be able to get the client to see why this approach should not be attempted is because every user counts. In trying to achieve this universal presentation, there are often going to be compromises made that will inevitably slight one segment of the audience in favor of another. However, it does not have to be that way. We need to remember that every user’s experience matters, and they should be able to get just as much enjoyment and use from the site as everyone else.Even if that means helping them along to a better browser that will allow them to do so.

We want to keep each user in mind and try to find the best way to deliver a solid experience to them that we can. Image Credit

This is not always in the user’s control as they are not always using their own machine, however, as long as we provide them with a quality experience then letting them know it could be even easier and more enhanced via another choice of browser is not forcing their hand in any way. We have simply provided them with an alternate course of action in a friendly, unobtrusive manner that shows we care about the experience they had on the site and are looking for ways to give them more. If we hold back anything from a segment of the online audience because others are not caught up with them, then how is that giving every user the optimal site performance? It’s not.

The Hack Factor

Though it is done on a fairly large scale, having to include vendor specific hacks in your code in order to have the site rendered ‘properly’, which in this case just means the same as it does every where else, is not the best course of action. Instead having natural degradations of effects and elements is the more preferred and natural way to have the site coded and presented. Sacrificing this idea of having the site look the same across the board tends to call for a bit of hacked code, which if you or your clients are concerned with validation, may not work to your overall advantage.

A Sign of Being Behind the Times

Another consideration that needs to be made by the client is that if we have to hack, and slight our way to this visual synchronicity then the site may be compromised into a more dated, less than cutting edge style and feel. By not allowing for the pushing of envelopes for those users who can gain the full experience the site could seem like it is somewhat behind the times, at least in comparison to other competitors that your client is up against.

Clients tend to want to put forward an up to date, fresh face to the world. They want to remain relevant, not feel like a relic. Image Credit

Not saying that is how it will always be seen, but there may be instances where it does reflect poorly on the company and their ability to stay ahead of the game and on top of the markets they are operating in. Users are going to be more apt to put their trust in a brand that they view as able to keep up with the changes in technology. If your site gives the impression of being behind the times, then you might find that users are going to be moving on and looking for a company that they feel is more on the edge, not sluggishly bringing up the rear.

Never Fear: Benefits Made Clear

Now sometimes we find ourselves afraid of accepting this idea, believing that we are still somehow compromising the site, but never fear, we have singled out a couple of points to briefly retouch on below to make sure that we drive them home and perhaps help put your minds at ease helping you to see some of the benefits of this acceptance to point out to clients.

Still Connects with Consistency

Though the site may slightly change in appearance between browsers and devices you can still have that connection of consistency through other elements that are able to remain unchanged. So this approach does not sacrifice the consistency that we have all held up as a guiding principle in our work, it just comes at it from a different approach. One that keeps after what tends to matter most to your users, the usability.

Time and Money Saver

By accepting this path of variance the project can actually be offered a bit of a break on the time it takes to put together and test out. Which tends to translate into money saved on the client’s end, which is usually an easy sell. Without having to track down hacks and such to keep the site visually identical between browsers the project can progress more smoothly and in a more timely fashion.

Embracing Innovation

As previously mentioned, by compromising the site to keep up this universal appearance regardless of the browser it is displayed in can make the site feel less than innovative, and can thereby reflect poorly on the client’s business. So by allowing for this visually varied approach you can create a sense of embracing innovation, making the company seem more progressive and forward thinking to some of their users.

That’s a Wrap!

So that is a basic breakdown of the reasons why we can not and should not try to make a website appear the same across the vast spectrum of browsers that populate the market today. Hopefully it has given you some ideas on how to broach this subject with your clients, or allowed for a place that you can direct them to read up on this discussion for themselves. Go ahead and let us know what approach you have taken or would take with your own clients in the comment section below.

Consider Some of Our Previous Posts

• Why We Should Start Using CSS3 and HTML5 Today is the article that got this ball rolling in the first place.
• Cross-Browser Testing: A Detailed Review Of Tools And Services takes on the task of making cross-browser a hint easier. Also allows you to see some of the variance between browsers.

(rb)