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

Case study: Redesigning the Greenbuild international website

Share this :   | | | |
Case study: Redesigning the Greenbuild international website

This past summer, we transitioned our website for the Greenbuild international conferences from Drupal 7 to Drupal 8. While this change on the back end didn’t have to mean change for our end users, we decided to leverage this opportunity to rebrand and refocus the site. Here are three key takeaways that we gathered from the process.

Create and maintain consistency in user experience.

Over time, it is easy for a website to develop minor inconsistencies in branding and presentation, and this is especially likely when multiple teams in an organization have a stake in the content. What starts out as a minor deviation to satisfy an immediate need can lead to a user experience down the line that feels less cohesive.

As always, it’s for the marketing team and brand managers to try to limit these deviations and keep the entire experience feeling unified and coherent. It helps every now and then to revisit an existing web property to clean up the inconsistencies. Scheduling regular revisits of websites, preferably in a staggered manner so that you can devote time to each one, can help you to avoid procrastinating on compounding branding problems.

One of the drivers of inconsistent branding can be a lack of adequate default options baked into the content management system. When analyzing the areas for improvement with our Drupal 7 site, we found that a lack of tools and templates meant that content managers were coming up with creative workarounds and solutions to common problems.

To combat this, we created a robust set of templates using the Paragraphs module in the Drupal 8 Core. The goal was to give content managers on the site an easy, standard set of options for adding and editing content, making brand consistency the default rather than the exception.

Achieve a sleek site with more images and less text.

Trimming text-heavy sites can be tough when every piece of information feels essential, but the truth is that nothing makes reading a site feel more like a grind than large blocks of text. Lightening the experience by removing unnecessary text and integrating photos and visual elements is a great way to keep users happy and on your site.

For the Greenbuild website, we decided to add visual appeal by separating text into colored sections, adding more decorative and illustrative images, and giving some pop to headers with colorful backgrounds. The result is a site that has more shape and texture with which the user can engage.

The redesigned Greenbuild international website uses more images

We added images, modular blocks of text and headers to the new Greenbuild international site.

Focus on what’s most important.

Of course, not all content can simply be trimmed or removed—a lot of it is important! However, being strategic in how you present this content to the user can make a big difference in how they interact with the site. While a piece of content may be important, it isn’t necessarily important to every user, every time they visit a site.

With the redesign of the Greenbuild site, we decided to rethink how we presented some of the content. For example, we took information that was common to each of our five international conferences and moved it to a separate homepage. We also took content that would be interesting to specific users, such as the schedules, and separated each piece out to its own page.

It’s a good strategy to allow your users find the content that they need, rather than making them sift through all of the content that you want to give them. The key balance to strike is making all of the information on your site easily found by those who need it, while keeping it out of the way of those who don’t.

The purpose of the Greenbuild site is first and foremost to drive attendance and engagement for the conference, and reworking the site gave us a chance to refocus on that purpose. By creating brand consistency, integrating more images and visual design, and focusing on content that promotes the key motivating factors for attending or sponsoring the events, we were able to better serve the website’s core purpose.

Read more UX tips