Cross browser compatibility has been a big topic in the web developer community for a long time. But what is cross browser compatibility really? Is it pixel perfect layout in every browser and mobile device? Does it mean the page is barley usable in each and every browser? Even in text-based web browser like Lynx? Let take a quick look at what makes a page cross browser compatible.
First and foremost any web project needs to support more than just one browser to get any adoption. At a basic level you’ll need to make sure everything works in all the major browsers like Chrome, Firefox, Safari, Opera, Microsoft Edge and (still!) Internet Explorer 11. Only you can decide if you need to support older versions of these browsers as well, based on your actual user base. A look into the data of your analytics solution will give you a few insights into the browsers your users actually use.
But what does supporting a browser mean?
I would argue that not every feature your page offers needs to work in every browser. The implemented modern web features vary between browsers so it is perfectly reasonable to offer a feature to users of Google Chrome but not to users with Internet Explorer 11. The key to this is that you should offer a graceful fallback to the users who will not be able to use the specific feature. Because if the user sees a broken feature he will always blame the website and never the browser he or she is using.
Do you sometimes use your phone to browse the web? Are you annoyed by the pages which don’t work well on mobile devices? So build your page in a responsive way whenever possible so it adjusts to different screen sizes automatically. This will benefit mobile and desktops users alike! And with frameworks like Bootstrap this is really easy to accomplish. Did you know that even your Google Rankings will really benefit from this as well?
Users are more likely to leave your website if it is slow to load. And of course mobile users on a slow connection will also benefit if your page is fast and does not load that much data. Again you can gain better Google rankings with a faster website. So make it fast and make it work even if your users disable some of the content like images or fonts. Luckily there are many tools out there which can help you with the website performance like PageSpeed by Google.
Did you try out your page using a screen reader? As a person who is colorblind? If not you might turn away on quite a few users unnecessarily. This is unfortunately not as easy to accomplish as there is no widely accepted framework or way of getting to accessibility. But basic tools like the AChecker can give you quite a few insights and offer solutions as well.
As you can see cross browser compatibility is much more than just supporting the latest and greatest browsers out there. Luckily many of these things are easy to test using a wide array of, often times free, tools.
Picture by J. Albert Bowden II