6 Steps to Reach Cross-Browser Compatibility

In this article, I want to point out the 6 essential steps to reach cross-browser compatibility while not wasting more time than necessary. Ideally, you would cross-browser test your website periodically while developing it. However, you can still follow these steps to test your existing website.

Step 1: Decide what browsers you want to support

If at all possible, decide beforehand which browsers and mobile devices you want to support. It’s much more expensive and time-consuming to rework the page than take cross-browser compatibility issues into account from the very beginning.

Step 2: Decide on a minimal resolution

Once you have decided on a browser and mobile device pool you want to support you need to take into account what resolutions are available to your potential customers and visitors. If you want to serve every possible device your site needs to adjust to the screen resolution on the different devices. If you cannot decide this easily you should consider building different sites based on whether your visitors are using mobile or desktop devices. A badly designed website on a mobile device could still be a pain to use.

If you don’t want to settle on a resolution you can create a responsive design. This design will adjust based on the users screen size using media queries.

Step 3: Reach full functionality in one major browser

This may sound obvious but you should get your page (or the current feature) ready in one browser first. My personal favorite is still Firefox but Chrome or Safari is a valid choice as well.  Once your page runs smoothly in your favorite development browsers you can move on to step 4.

Step 4: Create a cross-browser compatibility report

To save time loading up your website in all major browsers you should consider using a service or tool to do the heavy lifting. You can simply use our tool BrowseEmAll to create a cross-browser compatibility report. This also works for pure HTML files of course.

Step 5: Check the layout using screenshots

Regardless of how you get screenshots in different browsers, once you have hands on them you can do a quick check of the layout and find problems. Write up all browsers that have visible compatibility issues to fix. Once you have this (hopefully small) list choose one of these to fix. Don’t try to fix all of the issues in one run. 

Step 6: Use the report to fix problems

Now take a closer look at the cross-browser compatibility report. You’ll most likely find some HTML and CSS you used which some browsers does not support. Some of these are relevant to your visual problems, some aren’t. Try to fix these problems one by one and test every change individually to make sure you don’t break anything in all the other browsers. If your page works in the selected browser (and you didn’t break anything) go back to step 4 and repeat until you can cross off all of the browsers on your list.