Share via:

Should a Website Look The Same in All Browsers?

A website should not necessarily look the same in all browsers. What we want, is a website that looks and works well, independent of browser and device.


Edited: 2018-02-09 18:39

Web standards, and browsers

Traditionally, one of the challenges faced by web designers has been to make their websites look the same in all browsers. This has created a huge pressure on us to know all sorts of things about the individual browsers, but maybe we have been looking at this problem in the wrong way. Websites do not necessarily have to look the same in all browsers, they should just look as good as they can.

Think about how we are designing web pages for mobile devices. No one would argue that your a site displayed on a mobile device, should look the same as a site displayed on desktop. It is quite simply impossible, since the screen on mobile is too small for it. Of course you could just force the device to zoom out, but the site would quickly get unusable. So, do not do this!

When we design our websites today, we try to design them in a way, so they will work on all devices. We make them responsive. This will change the way the site look on mobile, from how it looks on desktop. Personally, I always design for Desktop, and then adjust the design for mobile. Desktop should, in my mind, have the best experience, because they are bigger, stronger, and their screens are much larger.

Modern Webdesign Techniques

Before we had all the cool capabilities in CSS, we were using tables to create layouts. It has always been about "hacking" our way around the shortcomings of the browsers, even after CSS support becoming widespread among browsers, we have still struggled with annoying limitations in browsers and standards. Floats had to be cleared to avoid parent containers from collapsing, and position based layouts was limiting us in certain ways. Often, the CSS gods would end up using a combination of different techniques, complicating their code, and making it difficult to understand to others.

To further complicate things, it is not enough to master the different layout techniques. You also had to know about browser support of different CSS properties. The sane designers would have chosen simply to not support old browsers. The stubborn would create crazy workarounds with conditional statements, or even rely on the fact that some browser versions would not support certain properties. They would memorize all this, and allow the design to gracefully degrade.

It makes sense to a certain extent. You do not want your website to break for people using old browsers. However, there is a solution. Instead of hacking your layouts, you can just show the mobile version of your site to less capable browsers. It would also motivate people to update, as there is no valid reason to use outdated browsers.

People using Microsoft Internet Explorer or Edge should shift to using either Chrome or Firefox. Edge is actually a pretty good browser, but it can still behave differently if you use display:grid;

But what about people stuck in old versions of Windows? I even remember even on Windows 98 (who still uses that?!), you could get a somewhat modern browser by installing Opera. It seriously felt like having a new computer. Today, this does no longer work, since Opera stopped supporting Windows 9x. You can still find an older version, but newer CSS properties are not supported.

Separating markup and presentation

I do not mind using CSS hacks or additional div wrappers (divitis) when necessary, but I still try to keep it to a minimum. I have been working with CSS for a long time, so using solutions to problems does not take much time for me. When I design HTML forms, I avoid it totally. It has just become easy for me to use a combination of display:block; and floats to line up stuff the way I want it. However, I still see people using divs to markup forms.

New sectioning elements in HTML5 has made things easier, eliminating the need to use some of our div wrappers. We now have elements such as main, article and section to help us. So instead of applying a margin or padding on p elements, we can simply use the section as a wrapper. Some designers would have made an additional div around the content, and then added a padding to this. The section will in many cases replace the temptation to such divitis fixes.

However, my point is, it is more important to have a website that works, than one that looks the same in all browsers, or one that follows a certain design principle such as (no divitis). Usually, people will not even notice the difference, since they are constantly using the same browser on a daily basis. I think it is mostly us, web developers, who notice that something looks different in another browser.

Even if you are just using CSS float and position, your markup should already be very clean, and easy to understand. With modern techniques, you can end up with a even cleaner layout, almost having totally separated markup (HTML) from the presentation (CSS). Keep in mind, a total separation is impossible, so what we want is clean markup rather than a complete separation from the presentation. Information needs elements, so the presentation is undoubtedly still tied to the markup, even with very clean CSS techniques.