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.
By. Jacob
Edited: 2020-03-14 14:09
Traditionally the challenge faced by web designers has been to make their websites look the same in all browsers, and this created 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 design web pages for mobile devices—no one would argue that 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 just become harder to use!
When we design websites today, we try to design them in a way so they will work on all devices, we do this by making them responsive. This changes the way the site look on a mobile device from how it looks on desktop. Personally, I always incorporate mobile principles in the design from the start, which makes it easier to manage the design process.
You should rarely need to use vendor-prefixes in the CSS, or target specific browsers in your code. Such crazy hacking is very rarely necessary nowadays, because the standards are so well supported.
Modern Webdesign Techniques
Before we had all the cool capabilities of CSS, we had to use tables to create more complex layouts. For a long time we would therefor have to "hack" our way around the shortcomings of the browsers—even after CSS support becoming widespread among browsers this still persisted, and we would struggle with annoying limitations of both 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 was not enough to master the different layout techniques. You also had to know about browser support of different CSS properties. We would often resort to create crazy workarounds using conditional statements or browser sniffing.
It makes sense to a certain extent. You do not want your website to break for people using old browsers. However, the better way would be to make it gracefully degrade. It would also motivate people to update, as there is no valid reason to use outdated browsers.
People using Microsoft's Internet Explorer or Apple's Safari should shift to using either Chrome or Edge. Safari does not support the .webp format, which is a serious setback.
But what about people stuck in old versions of Windows? Even on Windows 98 (who still uses that?!), you can get a somewhat modern browser by installing Opera. It seriously felt like having a new computer when I tried this myself—a very strange feeling. 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 applying CSS-based solutions to problems does not take much time for me. When I design HTML forms, I try to avoid divitis entirely—as it has just gotten too easy for me to use a combination of display:block; and floats to line up stuff the way I want it.
I still see people using divs to markup forms, since it can be difficult to do it without extra elements when you are not fluent in CSS. I think this is fine if you are creating more complex layouts, and I actually prefer using div elements with display:flex; for forms myself.
New sectioning elements in HTML5 has made things easier, eliminating the need to use some of our traditional div wrappers. We now have elements such as main, article and section to help us layout and structure our page-content.
This means, instead of applying a margin or padding directly on p elements to create a distance to the element boundaries, we can simply use the section as a wrapper and apply a padding on that. Traditionally, some designers would have made an additional div around the paragraphs, and then added a padding to this instead of fiddling with the paragraphs directly. Thankfully, section will in many cases replace the temptation to apply such dirty "divitis" hacks.
However, my point is that 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 purism). 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). Just keep in mind that a total separation is practically impossible, so what we want to aim instead, is to just have 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.
Tell us what you think: