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.
Hi, I’m Sam. I’m a web developer at Flaunt Digital, and today I’m going to be talking about browser compatibility.
So 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. And 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.
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.