10 ways to avoid cross-browser compatibility issues

[Rss Bot 1]

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.

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.

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

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 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 issue 267 of Web Designer, the creative web design magazine – offering expert tutorials, cutting-edge trends and free resources. Subscribe to Web Designer here.

Related articles:

• How to use Markdown in web development
• 20 useful tools for web developers
• How do you tackle user research and testing?

View the full article