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.
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.
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.
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. 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. 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. 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. 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.
I find that the best way to tackle this issues it simply by communicating that in the beginning with the client, and showing them examples. For the most part, your website will appear very similar in most major browsers, it’s only (I find) when you start checking in versions of IE that you’ll find undesirable effects.
This is why the company I work at tends to not support IE6 at all (as stated in a contract) and to charge for time spent fixing sites for IE7+
Well if things were done in flash …then everything would look the same on all browsers..but html5 evangelists are making it impossible for a design and user experience to stay consistent….future….maybe…but its not looking to be a designer friendly future…more like a programmers dream….. soon our sites would all be designed by programmers.
Justin,
Did I just read that correctly? Designing websites in Flash? The future of the web is very bright. Flash created a huge problem with accessibility, not to mention page load speeds.
HTML5 and CSS3 have the ability to make websites the best they’ve ever been. It’s possible to create a consistent design and user experience with media queries and other responsive techniques.
It’s our job to move where the web is going. It’s a very promising future for designers if you’re willing to accept change and move with technology. The thing is, we’re not just talking about browsers anymore, more and more people are using the web on mobile devices.
Designing websites in Flash is like using a typewriter… cmon now. You got to let go.
If you’re still stuck on the whole “if things were done in Flash, the internet would be a better place” deal, then you need to go work for companies like Zynga or PopCap and make Flash-based games so you can have that pacifier in your mouth.
Just what I want, let’s take a giant step back and have sites hijack my browser, resize the browser window for me, blast a burst of volume so loud windows across the street are blown out, take a day-and-a-half to load. Yeah, let’s go back to those times.
Flash is so misused, it’s pathetic. When done right, sure, Flash can be a beautiful thing, but 9/10 times, it’s mangled and an abomination.
“but html5 evangelists are making it impossible for a design and user experience to stay consistent” That is laughable, an almost moronic statement. UX is about how a user about using a product, system or service. Not some flashy graphics whizzing by a mach4.
“but its not looking to be a designer friendly future…more like a programmers dream” Um, hey Justin, is not Actionscript a programming language? Last time I looked it was a OOL, I could be wrong, someone correct me if I am wrong.
“soon our sites would all be designed by programmers.” Are you are developer or designer? If so, you need to go work at McDonald’s or something. That is just an idiotic comment. Last I knew programmers, DID design sites. Ya know, PHP, JavaScript, Python, Ruby, etc… You need to rethink your career path if you’re in web. Seriously.
This is an interesting view of cross-browser issues. I think Microsoft has probably taken this approach in every version of a browser they push out. Not only do they insist on ignoring any standards adopted by an ever changing industry, but many times, the refuse to even allow normal the most simple of web sites to function as it should. (i.e. – video embedding, form processing, etc.)
In my opinion, there is much more to making the site look the same across different browsers and making it function properly. Microsoft has made this the big issue it is today.
I agree, let Flash go. It’s had it’s day in the sun. For ‘full on’ multimedia style sites it may still be of use but not as a design standard.
Web designers have to be part programmer anyway.
Great post, I wish clients understand this
Just another set of reasons I use multiple browsers to test all the websites I design. And Regarding the whole flash argument here – I completely agree with Todd. It’s completely misused throughout the web, it’s actually rare for me to find a decently developed flash website.
100% agree with this post. If we have to make it pixel-perfect for all browsers, it could be a nightmare. Especially when facing many unstable browser version.
BTW: I want to share this post with my friends. But I didn’t find “share button” here. :D
Some really great follow ups to the post here. We appreciate the dialog. Though we would hope that passions go not get in the way of constructively and courteously having a back and forth. :)
Thanks again!
Noupe Editorial Team
Great article! I’ve had to deal with clients and bosses you didn’t grasp the concept more than I care to think about. Ironically, the ones who are totally non-technical are the easy ones to deal with. It’s the ones that think they know something about technology that refuse to listen most of the time. I’m having flash backs to hours-long debates with my former IT director (yes, the director of IT did not understand this and argued for hours with me about it). And now for my 2 cents on the Flash/HTML5 debate – Flash done wrong is an abomination and disgusts me. That being said, I’ve seen some HTML5 done wrong, and it’s an abomination and disgusts me. Reality check to everyone who has taken sides and is flinging mud- both technologies have their pros and cons. There are things that Flash can do that HTML5 is years and years away from being able to do. And there are drawbacks to Flash that HTML5 solves beautifully. Neither technology is the end-all-beat-all solution! All to often I see designers forget the one of the most important concepts in creating something – use the right damn tool for the job! Followed by – if you don’t know how to use it properly. then ask some one and learn. Standing on your soapbox declaring the “X is the best and only solution for everything ever” is just plain foolish. So I’d really appreciate if the HTML5 “evangelists” would cool it a bit, and the Flash guys stop designing full page flash sites and we all figure out how to work together and use the right tools for the job.
BTW – I have used both technologies extensively. They both are great tools and have a huge potential. HTML5 still has a LOT of growing to do, and I’m sorry, but Flash ain’t going anywhere. Oh yeah, back to the original topic- HTML5 still renders differently on different browsers, even though it’s the newest, shiniest thing out. And it’s still largely unsupported. I have the distinct displeasure of working in the corporate world, the few companies that have gotten away from IE6 have gone to IE7. And the vast majority of the population doesn’t keep their browsers updated cause their afraid they’ll lose their bookmarks. They do decent about keeping Flash up to data though.
Don’t get me wrong, in my oppinion, being a web designer / developer has never been more exciting than now and it feels that finally someone is trying to make our job more easy than before! it doesn’t feel like I’m working, it feels like I’m getting up in the morning to do something extremely exciting because I have all the tools to acomplish that. Imagination isn’t restricted by technology as much as in the past.
Then again, Justin is right at some extent. Flash looks the same in every browser and that’s a fact. Wouldn’t you just love it if html/css/jquery etc looked the same in every browser and we wouldn’t need to use different kind of tricks and hacks?
Of course, Flash has some huge drawbacks but I’m not really talking about that. Flash is extremely cool because you can fully control how users will see it and that is something that’s missing with HTML5.
Currently I’m working on a computer game which will be played in the browser and while we thought of bulding it with HTML5, we ended up using Flash for animations because developing all what we needed using HTML5 would be too complicated + users will have wide range of browsers (including crap ones) and we can’t mess up the gaming experience for anyone. But actually, using Flash for game animations makes sense
As I see it – HTML5 and its features will finally place Flash where it should be used. Flash won’t die, it will have its place (for exapmle – video streeming)! In the past there wasn’t really a different way to do it if you wanted animations etc We were using Flash incorectly, the same as when tables where used for layouts
Anyway, this is just the beginning and it will get ony better in the future, so I’d say the future of web development looks really bright! :)
Knowing Flash you know what quality result is. Until HTML5/CSS3 get consistent antialias, good font/vector/bitmap handling, flexible animation properties, small compressed result files, advanced filters and sound handling etc etc, you can’t say HTMLx is the obvious choice for multimedia in future.
When HTML5 have standard things, Flash have already at next step, what about jpg-compression with alpha channel or including individual font characters for optimal result size in HTML5?
Surely, the easiest way to prove that browsers act differently is to show the client the same ad printed on newsprint and in a glossy mag and ask if it matters.
@Peter Mann – When all else fails, that’s exactly what I’ll do. I’ll throw in a billboard and a handbill for good measure.
I 100% disagree with this article. As a web developer, it is your job to make sure that a site that you or another designer designs matches as closely as possible the original intent. It is a given that there are variables that you have no control over, but as a default install of a browser, your site should come across the same as closely as you can make it.
You mentioned mobile market factor in your article. Have you guys even looked at Noupe.com on an iPhone? It is a complete mess. You obviously have no developers that know how to code for mobile devices, so you simply didn’t bother. And so much of the text is unreadable, the graphics overlap each other, etc. If you want to preach “every user counts” and “usability matters most” then maybe you should look at your own site first.
There’s matching the intent, and then there’s cajoling ancient browsers like IE6, AOL9, and Netscape 4 into looking exactly, down to the pixel, like the latest version of Chrome or Firefox. And yes, I’ve had clients that demand exactly that, to the point that they would call and complain because one element in one of the aforementioned browsers was a single pixel off.
The web is not a single medium, but a collection of vastly different media. What would happen to the movie industry if every movie that has come out has to look exactly the same on grandma’s 1950s TV as it does in an IMAX theater? Here’s a hint – there’d be no such thing as high definition or 3D (or color, for that matter).
Your right about one thing: it’s incredibly ironic that this article is totally illegible on Mobile Safari. I wanted to read it while on line for lunch, since the concept appealed to me. Unfortunately, that’s impossible because of the fancy junk bloating the page.
Sorry you disagree, Tim, even though next statement essentially reflects the exact same position of the article. That it is not going to look 100% the same. Yes, it is our job to get it as close as possible, but the article, and by your own admission, that is virtually never going to be the case. There are going to be minor differences in the presentation. Even it’s as simple as having rounded corners in some browsers and not in others. The article also comes more from the perspective of getting our clients to realize the reasons the site looks differently on their PC at work, than it does on their PC at home. Have actually heard this complaint from others around the web. So that was more the point of the post.
As for the mobile design breakage, we are aware of it, and have people working to correct the issue. Thanks for your concern and the heads up. We hope to have that resolved very soon. ;)
Noupe Editorial Team
Great article & yes was searching for the share button too! :)
Great article, if only my clients would have time to read it and understand it… I would be saved.
Hi, I work for this Xpressbet.com. I can tell you that our website looks the same across all broswers (IE8 and 9 / Chrome/FF/Safari). While this is difficult to do it can be down with a dedicated testing team that checks all changes to the website in all browsers. Our developers hate us but it is possible and can be done.
I’ve been a designer since 1986, and I have been designing sites since 1994. The Web in my opinion is very lame, at best. What the Web needs is ONE BROWSER, period. That can understand any line of code, etc. Will that happen, hell no. Why, because of the following: greed, money, politics and stupidity! Imagine if TV displayed content in different ways, or you needed a different TV to view a different show. Finally, I could care less about HTML 5 / CSS / Flash, technology is NOT content or design. End of story!
If you really believe that getting a near perfect representation of a site working on all modern browsers and some older more popular browsers (IE6) is impossible and an unreal expectation then you have to face the fact that you can’t write a website correctly, been developing websites for 7 years now and have never had an issue with compatability, you stear clear of certain code and only use code that works on all modern browsers (including mobile) even more to that my websites are always W3C Compliant.
I agree with Justin, I am a designer. Flash allows a designer to design a great interactive website that is interesting and not just a big box of boring boxy images and boxy text buttons. Dreamweaver and other HTML websites are boring and always will be. Why look! The Wall paper is back! Didn’t we in the Design field work tirelessly to eliminate wallpaper backgrounds in websites.
This is what happens when programmers build websites. I see the future of the web doing a nose dive. Just because a mobile devise is used today does not mean it will not become extinct like the 6″ televisions of the seventies and eighties. The screen were too small to care anything about. I’ve talked to many people who are bored with mobile web devises. You have to zoom in on text and then zoom out to scroll. How stupid. If the 6″ and 2″ televisions were stupid so is the internet on a mobile device. They will not last. When you go into a store to purchase a product they store will look up stuff on a computer screen not a mobile device.
Keep using Flash website designers. Master your skills. Flash is still alive for when merchants see that people are not interested in the boring HTML sites they will loose interest in the web all together for the consumer will become bored with the web sooner than later.
Some people obviously aren’t keeping up to date.
CSS3 and HTML5 eliminate the need for technologies like Flash in practically every area. If you take the time to get to know them you will see. Even Internet Explorer, though it took its time, now supports these technologies.
There will always be people with older devices who will need catering for and it is up to you and your own unique circumstances how far back you support. Eventually though, we are going to get to a point where even browsers considered old support HTML5 and CSS3 to the fullest When that happens flash will be dropped as a standard, no doubt. Eventually no modern browsers or operating systems will support it.
The web will move forward, as all technologies do. Mobile devices are here to stay and will only improve. If they were going anywhere, they’d have been abandoned before the smart phone. If you don’t adapt now you will get left behind. It is elementary, nothing with technology stays the same, nothing is permanent. Once something better comes along the old is replaced.
Recognising how this fits into your career is the best move you will ever make.
As Darwin’s On the Origin of Species states, it is not the strongest or most intelligent which survive, it is those most adaptable to change.
D, I don’t know that will actually become a problem. If someone is using a dinosaur of a PC, they won’t even be able to display basic content. I recently had to take a family member to a hospital for a routine procedure. The hospital spent hundreds of millions adding on this wing of the hospital over the last year and instead of putting in new computers for public access, they acquired used computers with Firefox 1.5.0.4 as the browser. The computers were not only slow, but the browser was incapable of displaying most of the websites that I normally visit every day. The computers were barely functional and in terms of the browser, 2 minute page load times: non-functional. There is no reason content providers should even pay attention to computers of that nature. I’m stating that old computers will have bigger problems. There is a threshold that content providers need to heed when creating content with out-of-date browers/systems in mind, especially for mobile devices.