How different web browsers affect user experience

Share this :   | | | |
How different web browsers affect user experience

Outside of a small minority, people don’t often think about what browser they are using when accessing the web. Indeed, most people in the United States use the same web browser, Google Chrome. However, for digital marketing professionals, it is still worth considering the landscape of web browsers and the effect they can have on the user’s experience.

Understanding how browsers work

First, it’s important to understand how a web browser actually works.

When a user visits a website, the browser sends a request for that page to the server, which sends back a whole bunch of code in return. In order to display the page correctly, the browser has to know how to read and interpret that code correctly. This is done by something called a rendering engine.

The guidelines for how a particular piece of code should appear to the user is laid out in detailed specifications, but how each rendering engine actually goes about interpreting the code is different from engine to engine. This individualized approach can lead to a website looking different in different browsers.

A decade ago, the disparities between browsers were huge. Some sites were developed to work only with a specific browser, usually Internet Explorer, and developers would have to resort to crazy workarounds to make their content consistent for all users. Since then, things have standardized, and the specifications have become mature enough that modern browsers are largely consistent outside of edge cases and newer features.

However, it’s important to be aware that there are still differences between browsers that have to be contented with, especially on projects that are more complex.

Strategies for avoiding browser compatibility problems

1. Be careful of new features.

As I was building out mockups for a redesign of the Greenbuild website, I toyed with the idea of using a blurred, semi-transparent background behind the banner text to give the site a modern feel. I liked the effect, but testing across different browsers quickly revealed a problem. The CSS backdrop-filter property that I was using is relatively new and isn’t compatible with many browsers, including Safari and the mobile version of Chrome.

Google Chrome (left) renders the backdrop filter property correctly, making the text over the image easy to read, while Safari (right) doesn’t render the property at all, leading to the text over the image being difficult to read.

To avoid this, I recommend searching CSS features on Can I Use, a helpful website that will tell you the support available across a range of browsers for any feature, as well as share usage data for each browser. Once a feature is implemented, it’s also a good idea to manually check the website for problems, using as many different browsers and browser versions as possible.

2. Use graceful degradation and progressive enhancement as workarounds.

Just because a particular feature isn’t supported on all browsers doesn’t mean that you can’t use it, however. To get around a lack of support, web designers can employ a combination of strategies: progressive enhancement and graceful degradation.

The idea behind progressive enhancement is to build a site to the lowest common denominator, then layer on additional features to enhance the experience for users with capable browsers. Graceful degradation is similar, but in reverse: A website is built for modern browsers, but essential functionality is preserved for users with unsupported browsers. Which strategy you use will depend on the specifics of your site and your audience, and most likely, you will use a combination of both.

One of the most important times to be aware of this is when your site has complex elements, such as embedded charts, video banners, nonstandard scrolling or anything with JavaScript. Users often run ad blockers, disable background videos or disable JavaScript for reasons ranging from security to saving data on mobile connections. You could choose to make these features optional and available for advanced users, or you could build them in and have a fallback for users who opt out. Either way, it’s important to be aware that the experience won’t be identical for every user.

3. Consider your audience.

As always, everything comes back to your audience. If you know what browsers your users are likely to be using, you can be careful to avoid using features that those browsers don’t support. Similarly, if you know what browsers your users aren’t using, you may choose to use features despite a lack of support in those browsers.

For example, according to GlobalStats Statcounter, 65% of all desktop users in the U.S. are using Chrome, while another 26% are on Edge, Firefox or Safari. This means that 91% of users in the nation have a modern browser that can likely handle the most advanced features.

However, there are still 8% of users who are using some version of Internet Explorer, an old browser with a bad reputation for not supporting features. Depending on your industry and who you expect to be accessing your site, it may or may not be worth putting in the extra effort for that 8% of users.

Overall, while browsers have become more consistent over the past several years, keeping in mind the different experiences that people have when visiting our various websites is still important. If you are overseeing the implementation of a website, it’s worth asking whether everything you want to do will work for all users and to explore your options for mitigating the risks of browser incompatibility.

Read our case study on redesigning the Greenbuild international website