10 ways to avoid cross-browser compatibility issues

10 ways to avoid cross-browser compatibility issues

The prospect of cross-browser testing is unlikely to fill anyone with joy, but it's the essential last step of any web build that you can't afford to get wrong.

You might be packing the latest in responsive web design (opens in new tab) and parallax scrolling (opens in new tab) tricks, but one little slip in your testing could see a whole load of potential users locked out of your swanky new site. So to help you along and make sure you get it right, here are the top 10 things you need to do in order to ensure that your site will work, however people are looking at it. If you're starting a new site, get off to the best start with a brilliant website builder.

While you're here, you might also want to check out our guide to the best web browsers (opens in new tab), and upgrade your storage with these top cloud storage options. And for more on different browsers, see our history of the web browser.

01. Validate your code

You're much more likely to experience weird behaviours between browsers if your code isn't strictly valid, so check it with the W3C Markup Validation Service (opens in new tab) to make sure it's standards-compliant.

02. Fail gracefully

Design your site with the view that not all functionality will work. It's often healthy to check how it renders without JavaScript or styling enabled, to see if the user can at least tell what's happening based on content alone.

03. Know your audience

Make sure you understand the browsers and devices you're targeting. Is your page mostly for mobile users? Are you working within a company that still uses legacy browsers? Test accordingly (decent web hosting services can help here).

04. Consider using a framework

If you use a well-established framework, whether for styling (eg Bootstrap (opens in new tab)) or a JavaScript framework (such as Angular (opens in new tab) or React (opens in new tab)), generally this means someone else has taken care of a lot of the cross-browser compatibility work for you.

05. Keep your design simple

Illustration of a computer and a phone with 'www...' displayed on screens

Web designs don't always need to be all-singing, all-dancing

It might seem obvious, but the fewer cutting-edge CSS features you're trying to use, the less likely you are to have difficulty supporting all browsers. Give consideration to whether you really need them.

06. Reuse and reduce components

This can start from the basics of managing your CSS classes sensibly, through to using web components to modularise your entire site. Essentially, the fewer places you have to test and maintain similar changes, the easier it is to manage.

07. Test with the difficult browsers first

If you know you need to support Internet Explorer 6, then start out with that. You don't want to get 90 per cent of the way through your testing before discovering the first issue.

08. Create test scripts

Whether you're automating or not, even for simple sites you should define the set of tests you expect to run in each browser. Otherwise, you'll end up missing things between runs.

09. Test as you go along

Especially important if you're doing something that might be tricky, don't wait until you've finished developing to start testing. Take an iterative approach to catch issues early.

10. Check your features

Double-check browser support of newer features online before you use them, and make use of feature detection and polyfills if you absolutely must rely on something that isn't comprehensively supported.

This article was originally published in Web Designer, the creative web design magazine. Subscribe to Web Designer here (opens in new tab).

Related articles:

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Simon Jones is a technology leader with experience managing product and engineering teams of up to 200 staff, both at startups and large corporates. He is a proficient full-stack developer, in particular with Go & React + TypeScript. He now works at Facebook in London. Formerly CTO at Norwegian VC-backed startup Just, and Engineering Director at Barclays and American Express.