Browser Compatibility Issues And Solutions

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 and parallax scrolling 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, 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 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) or a JavaScript framework (such as Angular or React), 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 .

Related articles:

10 rules for making user-friendly web forms
5 cross-browser testing tools to try today
5 ways to speed up your websites and apps

Simon Jones is a software engineering director in financial services, leading a team of full-stack developers. He has a background in computer science and UX design.