What is Browser Support?
Joe Turner — December 9, 2016 Follow @iwebtweets— December 9, 2016
Often browser support is seen as a given, casually sweeping discussions 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.
Why do browsers display pages differently?
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:
Standards take years to implement so browsers try to interpret the draft specifications as best as they can. This can lead to inconsistent interpretations between browser manufacturers.
Like all software, browsers have a lifespan and fall out of date. Most modern browsers automatically update so this is becoming less of an issue. For older versions that don’t receive these updates people get stuck on a certain version. This is common for old versions of Internet Explorer. This could be because they’re part of a large network that is lagging behind or because the operating system they’re on doesn’t support newer updates.
What does browser support mean?
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.
Why do browsers display pages differently?
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.
Supporting from the start
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.
Out of our control
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
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:
- Basic content should be accessible to all web browsers.
- Basic functionality should be accessible to all web browsers.
- Sparse, semantic markup contains all content.
- Enhanced layout is provided by externally linked CSS.
- Enhanced behaviour is provided by unobtrusive, externally linked JavaScript.
- End-user web browser preferences are respected.
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:
- There will be some support for older browsers. Because new technologies are layered on top of each other it means if one isn’t supported, the website will still work (although the experience might be a little janky).
- There are many reasons a website could break on someone’s computer. For example if they’re using an ad blocker it could stop a certain script from loading. Ensuring the site works without these technologies means people still receive an experience that works.
The cost of supporting older browsers
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:
- The older the browser support required, the greater the number of workarounds will be required. This increase in amount of code may impact the overall website performance.
- The ongoing maintenance costs can be significant. We need to test on more devices and browsers and keep maintaining the additional code required to support them.
- There may be technical constraints to supporting older browsers. You must expect certain browsers not to include some functionality, especially on more complex websites.
- Even with support, the experience for customers might be pretty clunky.
Technical debt
Technical debt 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.
Investing time and money in the right place
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.
This article was originally published at www.iweb.co.uk
Digital & Social Articles on Business 2 Community
(60)
