How to make sure all your users see your website the way you intended it to be seen.
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
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.
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.
