An Introduction To Browser Compatibility

Sam, one of Flaunt Digital’s Web Developers, gives an introduction to browser compatibility. He discusses what browser compatibility actually is and why it’s important, with some actionable tips and tricks along the way. Why not subscribe to our YouTube channel for more videos like this?

See below for a full video transcription.

VIDEO TRANSCRIPTION:

Hi, I’m Sam. I’m a web developer at Flaunt Digital, and today I’m going to be talking about browser compatibility.

What Is Browser Compatibility?

Browser compatibility is the way that a website works on a range of devices and browsers. For example, a mobile phone on Android using Chrome might display the website differently to an iPhone using Safari. This happens due to the way that the browser developer implements different specs.

Most of the time this is developed by a company called W3, who put together a document of specifications on how they believe the web should work. This is often carefully thought-out and lists how the developers of the browsers should implement these functions.

So W3 having a spec helps developers because it allows browsers to have a set function of ways to implement different features that website developers can use. Therefore we have a standard that we know if we design a certain way, it’s going to work consistently across all browsers. Although this may sometimes lead to further problems, as there’s occasionally bugs that we don’t foresee. For example, in IE11 they implemented Flexbox to the first draft, which was revolutionary at the time, but it was quite buggy due to an early spec, and it was untested. Therefore most website developers couldn’t use it, as it didn’t work consistently across all browsers. This later changed as Flexbox standards got better and more implemented, and therefore it’s now quite often used. And this should be the same with Grid in upcoming years, as this new feature has just been launched.

So when we start a new project, we often have to look into different customers that the client may have to face. For example, a corporate business might look into more IE users that are on old computers that they use during the work environment, where, for example, a fashion brand might target more mobile devices and make sure the website definitely works to the best of its ability on a mobile device, and then will fall back across all other browsers to make sure it still works, but it may sacrifice some features. For example, we’d make sure it works, but it might not look as pretty in IE9 as it would in Edge or Chrome or Firefox or Safari, which most of the time is fine as there’s only 1% or so of people that’ll actually use the website for fashion.

A really useful tool that we often use is a website called ‘Can I Use?’ And this allows us to see what features – CSS, JavaScript, HTML – different browsers and devices used, and allows us to plan what technologies we can use at one time. For example, if you search Flexbox, you’ll be able to see that Flexbox is available from Edge 16, Firefox 52, and Chrome 57, which allows us to see how old the browsers are and if it’ll fit into our customer market. Therefore we can plan whether we can use that technology and it can also influence how the site functions and is displayed. This allows us to plan the project so that we can use our time efficiently without having to constantly go back through the project and reprogram stuff due to different browsers that our customer needs that aren’t supporting this feature.

Although sometimes, like, as with any industry, mistakes happen, and you don’t see common use CSS tricks, JavaScript tricks, HTML tricks, and you have to go back through to support older browsers. Therefore sometimes you can use, like, if statements to get around the problems in JavaScript or adding classes to the website, and this allows you to subtly adjust the way the website works and is displayed so that different customers can still access the website, albeit that it might look different, function different, but it’ll still allow you to do similar stuff, which is always helpful.

So in summary, when designing a website with browser compatibility in mind, you should always start with looking at what technologies you can use for your target market, and working through your whole site, but testing along the way, and making sure everything works across browsers. If there is a problem that you didn’t foresee, then make sure to go back and if you can, correct it so it shares functionality. If not, maybe subtly change it, and this will lead to differences between different browsers, but it’ll still allow the customer to get through the website without any bugs or damage to the user experience.