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 a pixel-perfect layout in every browser and mobile device? Does it mean the page is barely usable in each and every browser? Even in text-based web browsers like Lynx? Let’s take a quick look at what makes a page cross-browser compatible.

Browser Support

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.

Graceful Fallbacks

Speaking of graceful fallbacks. There will be visitors who don’t have the latest Flash plugin installed or have JavaScript disabled for whatever reason. Don’t assume that they will make an exception for your website, they most likely won’t! Instead offer a basic version of your page that can be used without all the bells and whistles. An easy solution could be to display the print version of the website. You have a print ready CSS stlyesheet right? Right?

Responsiveness

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 desktop 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?

Performance

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 that can help you with website performance like PageSpeed by Google.

Accessibility

Did you try out your page using a screen reader? As a person who is colorblind? If not you might turn away 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.

Summary

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