You may of found yourself asking “Why do browsers display pages differently?” and often browser support is seen as a given. Casually sweeping the discussion under the carpet, until a customer finds a bug on a specific browser.
Unfortunately, there is often a lack of understanding of what browser support is. It’s easy to blame the client for this but it’s our fault. The web industry has spent the last two decades providing clients with beautiful mockups of their websites with the expectation that the final product will match. This has never been the case and has only been magnified by the introduction of responsive web design.
Browsers fetch the content of a web page and render it for you to see. The W3C is an organisation that sets the standards for how browsers should render elements in code (HTML and CSS).
In theory this means all browsers should interpret pages exactly the same. In reality most modern browsers do exactly this but for older ones there are many more inconsistencies. Before we get the pitchforks out for the browser manufactures, this isn’t necessarily their fault:
Browser support is often perceived as the page looking the same in a range of browsers. This isn’t the case. Web pages may look different on different devices, operating systems and browsers but we would still class them as being supported.
A good example is how fonts are rendered. The fonts available and how they’re rendered varies for different operating systems and devices (iOS, Android, Windows and macOS). When we code websites we take this into account and tell the browser to use a range of fonts with varying priority. This means if a certain font isn’t available on the user’s device it will fallback to a similar one.
Above is an example of how this website chooses the most optimised font for each device. This means our website will look different but we’re taking advantage of the best available font on that device.
Just because the website looks different, doesn’t mean they’re not supported. Support refers to the ability to be able to easily navigate, interact and order from a website.
Different websites will require different browser support. Some websites may have higher traffic on older browsers, for example intranets or institutional websites. Gov.uk have released all their website statistics. The Gov.uk website statistics are a great baseline for British based websites that are either new or don’t have enough traffic to make a clear judgement.
Deciding early which browsers you’re going to support is important. By knowing upfront we’re able to tailor the technologies and code we use to ensure these browsers are supported. Retrofitting support can be costly and introduce a significant amount of technical debt to the project – more on this later.
Having the discussion upfront is important because sometimes we’re unable to support certain browsers for technical reasons. For example, most payment gateways no longer support old versions of Internet Explorer for security reasons. This means that on most eCommerce websites you won’t be able to purchase if you’re running Internet Explorer 8 or below.
The platforms and technologies we use may also have limiting factors on support for older browser versions. If you’re desperate for support for certain browsers this may affect the platforms and technologies chosen for your project so the earlier this is raised, the smoother the project will go.
Progressive enhancement is a popular way to develop websites. This involves layering technologies (and therefore enhancements) on top of each other ensuring that at every stage the website works. This enables a core set of features to work on all browsers.
Progressive enhancement has the following principles:
Following these principles will can create a website that is supported on most browsers. You might also note that the principles encourage enhancement of web pages, therefore allowing them to behave and look differently to match the users environment.
Working this way offers two benefits:
Before we all jump and say let’s support everything, there are some significant downsides and they generally revolve around cost. To initially support an older browser isn’t that much of an overhead, especially when agreed up front. The cost of retrofitting it can be significant – in time, money and technical debt.
To support older browsers there needs to be an open discussion about the implications:
This is something that often goes unnoticed until it’s too late. Technical debt is defined as:
Technical debt is a concept in programming that reflects the extra development work that arises when code that is easy to implement in the short run is used instead of applying the best overall solution.
If older browser support is considered from the beginning, the technical debt is reduced (but not removed) because the code can be written with support in mind. If it is retrospectively added, the technical debt can increase significantly with support being added in the form of hacks or large pieces of work requiring a lot of code refactoring.
Choose wisely when deciding which browsers to support. We generally support all browsers that are two versions old. I recommend sitting with your agency to analyse your statistics and decide which devices and browsers should be supported. Keep in mind there are thousands of devices available and it’s impossible to explicitly support them all. The more devices and browsers supported, the higher the cost to build and maintain a website.
Support is a balancing act. Always consider whether the revenue generated from those avenues outlay the investment. You may find that investing in additional features, advertising or conversion optimisation may have a bigger impact on your revenue.
If you need any further assistance, please contact iWeb on 01785 876453 or use the form below.