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.
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
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
05. Keep your design simple
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.