Why your website needs to support older browsers too [Interview]

While some of us may not think twice about installing the latest version of our web browser on our computer, not everyone has that luxury.

A variety of factors can contribute to a person having to use the internet on an outdated browsing tool.

As such, web developers have to build sites that are not only consistent across browsers (from Chrome to Firefox to Safari), but also across older versions.

IMPACT's Senior Front-end developer Tim Ostheimer explained what that looks like in practice and why it's essential. 

Why you need to optimize for older browsers

John: Should websites be responsive to and supportive of older browsers? 

Tim: Yes, that's a necessary part of a web developer’s job. Cross-browser support and responsiveness are necessary for the modern age because you don't always know exactly how a user is going to be accessing your website.

Most users, including myself, are loyal to a single browser — typically Google Chrome, but some aren't. 

There are differences between the various browsers and it’s important to ensure that your website functions properly with all of them, or at least the ones that are used by the larger majority of your traffic.

Is optimizing worth it?

Optimizing a website for some of the oldest browsers isn’t always worthwhile.

Often it can cause limitations with what your website is able to do, and that may have a direct result on your website’s performance and therefore the majority of your users.

It can also take a lot of time. Is it worth spending a large amount of effort on 0.01% of your traffic? It might be! The answer isn’t straightforward since it’s usually about balancing your efforts.

Even if only a small portion of your website traffic is using an outdated browser you don’t want to exclude them from being able to use your website in its intended way.

Some of those users could be valuable sales-ready leads, and a poorly optimized website could frustrate them or cause them to lose faith in the quality of your services.

Frequent visitors of a website will likely use multiple devices such as a desktop computer while they’re at home and a laptop or phone while they’re traveling or at work.

It’s important for the experiences they have to be consistent and feel familiar, even if the website looks a little different.

Who uses older browsers?

You might be assuming that browser use is a general metric that you can go search for online.

This is partially correct, but some industries, which rely on specific devices or older operating systems, might see more traffic coming from those older browsers than you would expect.

The first thing you should do is look at the analytics for your website’s traffic and identify what the most and least commonly used browsers are. This will immediately help you determine where to focus your efforts for cross-browser optimization.

If you are planning a website redesign, this is something you should do during the early stages of the project so everyone involved understands the browsers it needs to support and any limitations to be aware of.

Most modern browsers support modern features, and some older browsers support modern features too. However, older browsers have a range of support and may require a workaround or browser-specific variant to make it work properly, if it’s even possible.

You might be surprised to hear that a browser like Microsoft Edge lacks some of the features that Chrome and Firefox have had since 2010, so some features should either be avoided or a fallback solution must be implemented to ensure the website is functional.

How browsers compare

John: Can you give an example of an ability or a function that one browser would have than another wouldn't?

Tim: In most situations browser support is specifically related to CSS (Cascading Style Sheets), which defines the appearance of elements on a webpage. Although, browser support can also affect other forms of code or markup as well.

With CSS, one example is the way background images display on a website.

Background-size is a commonly used CSS attribute that allows developers to scale a background image to cover the entire area of its bounding box.

This is a feature that does not exist in Internet Explorer 8, which is the latest version of Internet Explorer that can be used on Windows XP.

I know what you’re thinking: “Nobody still uses Windows XP.” I wish that were the case, and it has definitely gotten better in the last few years, but some users are still trapped in the past.

Sometimes companies rely on outdated software if their entire process depends on it. Rebuilding the software for modern devices could be too expensive, too time-consuming, or too disruptive to consider.

Something like background-size may not cause the website to be unusable, but it will definitely affect the way your site looks.

Additionally, the lack of support for this feature could cause the content on the website to be illegible as a result.

For example, what if some white text would normally appear on a dark background, but due to the lack of support for a background effect the text appears on a light background instead. That user may not see that text at all, which results in a poor experience for them and a missed opportunity for your business.

To avoid a situation like this, a workaround is necessary to ensure the website looks similar in browsers that do not support the critical feature.

It doesn’t have to look identical — it just has to be functional. It’s okay if there are slight differences as long as the website is still usable and effectively serves its purpose.

Maybe the solution is to use a repeating texture as the background image instead of a precisely placed image. Or, maybe the solution is to use Javascript to position the image in a similar way.

The method depends on what the browser supports and how important the feature is.

Another example would be optimizing for touch devices. Since touch devices do not have a mouse, there are no hover effects. But, what if the main navigation on your website uses a hover effect to display its dropdowns?

This has nothing to do with the browser — it’s due to the device. This is an example of a critical feature that requires testing, and a solution when necessary, to ensure your website is functional for all users.

Which browsers should be supported

John: How do you determine what browsers to support?

Tim: This will always be dependent on the visitor analytics for each website. There is no specific rule or suggestion for browser support, it simply comes down to whether the effort is worth the payoff.

At IMPACT, we no longer build our websites in a way that is completely supported by browsers as old as Internet Explorer 8 unless it is necessary for the target audience.

Although, when I first joined this company seven years ago, I made sure we were doing it. In most situations, the amount of traffic is simply not worth the time it would take to support it.

Since the majority of our websites are built on HubSpot, we typically optimize sites based on its own list of supported browsers.

In fact, we were actually optimizing for Internet Explorer 9 up until the point that HubSpot released an update that started causing issues with it.

But, this doesn’t mean that we can’t optimize our sites for older browsers — it just makes it more difficult.

In order to evolve, we must eventually leave Internet Explorer behind.

Testing browser support

John: What’s the best way to identify or test browser support?

Tim: Personally, if there’s ever a feature I’m unsure about, I look it up on Can I Use. For easy testing, we use BrowserStack to view our websites in a variety of environments.

A good web developer will know what to look for, but it takes time and experience to learn that.

I’m personally familiar with browser support for most features and can proactively avoid the need to implement workarounds simply by building websites in a way that is the most widely supported.

Something to keep in mind is that there are many ways to build websites and, although modern browser techniques are usually the faster way, they aren’t always the right way if you want to ensure something works for all users.

It’s typically better to build a website with cross-browser support in mind rather try to implement that later on.

You don’t want to build an entire website only to realize that it’s completely broken in Internet Explorer.

What else affects how a website looks?

John: Are there other common situations or environments that could affect how a website looks?

Tim: One of the more common ones would be network firewalls.

Although most companies operate on technology that is newer than a device using Windows XP, many have very strict network firewalls in place.

This is something that is different depending on how the firewall is configured, so it is difficult to test how your website might look — and you may just have to predict the issues that it could cause.

For example, users on a connection such as this may not be able to access certain websites — there may be specific domains that are blocked. This can include third-party services or scripts used for tracking or embedded plugins.

If you’re using a service that embeds a custom font on your website, some firewalls may block that file if it isn’t hosted on the same domain as your website.

If your intended font fails to load, these users may see all of your text as Times New Roman instead.

The best solution here would be to either embed the font in a way that works for those environments or to choose a better fallback font so your site looks similar to your custom one, even if it isn’t the font you wanted.

Remember, it doesn’t have to look identical — it just has to be functional. Or, in this case, it doesn’t have to look identical — it just has to look decent.

Google Chrome on top of the heap

John: Do you personally see a problem with one browser, Chrome, having such a big slice of the market share (around 60%)?

Tim: Personally, no. As a web developer, most users preferring Google Chrome is ideal since it means the majority of users will be on a single browser that supports modern features.

It also means I can build a website and primarily do my testing in Google Chrome and know that is how it will look for most users. The main concern would be that Google has too much power, but it’s pretty obvious how much of an impact Google has on the world and its web browser is just a small aspect of that. 

However, multiple browsers being popular among users is also a good thing since each one will constantly be pushing the advancement of browser technology and continuously challenging each other to improve.

For example, Firefox is a leader of implementing better privacy and sensitive data handling whereas Google is focused on pushing the technical aspect and the open-source developer environment to provide people with the tools that they need to actively work and collaborate.

Browsers pivot toward privacy

John: Since we’re on the topic of browsers, network firewalls, and security... Within the last year there has been a new Firefox update, there's also been a new Edge Chromium update, and Google has announced that Chrome will move away from third-party cookies.

How do you see this push toward privacy affecting marketing and web development?

Tim: We're in the midst of it now. This isn’t anything new, we're just at the point where things are starting to be implemented. The issue of data privacy is definitely not going anywhere, but it's also nothing to panic about. 

The features being announced and added here are all good for the world and marketing won’t change much.

These features primarily affect tracking methods, which rely on third-party cookies, but the majority of those services are prepared for this change, have already adapted to it, or are actively looking into alternative solutions.

Unless you directly work on the development of services like these, the average web developer does not need to be concerned with these changes.

Website features which do not rely on third-party tracking services will not be affected, and these are what browsers are encouraging when implementing such changes.

Additionally, something like a browser plugin or internal firewall would likely block services like these anyway, so it’s best not to rely on them.