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.
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.
For Greenbuild 2018 in Chicago, our creative team had the opportunity to totally redesign our presence on the expo hall floor. We designed a 70-by-60-foot (4,200 square feet) booth that showcased both the USGBC and GBCI brands. The ideal booth design needed to have a longevity of three years.
Our main goal was to build brand awareness for USGBC and LEED, as well as each of the GBCI brands (Parksmart, PEER, SITES, and TRUE) and their various products and services. We also wanted to be sure to provide an inviting space for attendees to learn about each of the brands, for staff to hold sales meetings with customers and for local USGBC community members to network. Part of this goal also included providing a designated space for our GBCI Certification Work Zone.
We started to design the booth from the basic floor plan, and then moved into the actual design of the physical space. One side of the space was devoted to our GBCI Certification Work Zone—this meant we included tables and chairs for meetings, a check-in desk and planters to clearly divide the space. We split the other space into two sections, one focused on USGBC’s merchandise, with a counter and shelving, and the other devoted to community meetings and networking.
We selected all the interior furniture and carpet. We also created a specific space to showcase Arc, and a spot to mount the plaque display. The entire booth space was framed by recycled cardboard walls.
Our next step was to design the recycled cardboard walls and focus on messaging. The interior facing walls included our USGBC logo, the LEED logo and messaging from our overall mission, such as “Better buildings are our legacy.” The goal was to create an open space showcasing the brand, without creating too much stimulation to detract from presentations or meetings. We also included mounted TVs as a way to incorporate digital signage and video within the booth.
The panels facing the exterior of the expo hall featured messaging focused on our current membership campaign. We wanted to show off that we are a diverse community of real estate leaders, governments, developers, contractors, architects, engineers, educators, innovators and companies working to build healthy, efficient and equitable buildings and communities for all.
Seeing the booth go from sketches to the final product was such a cool experience! We worked on-site at Greenbuild to interact with customers, meet with members and provide further information about all of our products. Watching the space being used as suggested, and seeing people actually experience our brand in person, was rewarding for me.
This year at Greenbuild Atlanta, we will be using our booth again—but every year, we get a chance to improve the experience. In 2019, we will have new flooring provided by Interface, new digital visuals, Arc demonstrations and information, opportunities to meet the experts, merchandise for purchase and some giveaways. Will you be attending Greenbuild this year?