How to improve your website’s cross-browser compatibility

Profile picture of Michael J. Fordham

{date}

{#hash1}

{#hash2}

Illustrations by {name}

From Safari to Chrome, your website should look great on any browser it’s viewed on. Here’s how to ensure it's always at its best.

4 min read

A 3D illustration of different browser icons, including Chrome, Internet Explorer, Firefox, Opera and Safari, floating in mid-air surrounded by a hoop

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

As a website creator, you want your site to look great however it’s viewed — no matter the device, platform, or browser. One key factor to help you perfect your responsive web design and development, is cross-browser compatibility.


This can be tricky, as browsers support features differently, and platforms may show semantic elements in completely separate ways. For example, a button on your website in its default state will look different on a Mac compared to Windows.



The importance of cross-browser compatibility


The websites you create should look great and leave a strong impression on clients and users, regardless of whether they’re using Opera, Chrome, Safari or anything else.


Cross-browser compatibility is a commonly overlooked step when creating a new website. Often, the designers and developers will be using a single browser to create it — and they may quickly check it on a handful of other browsers before they consider the project complete. This can be sufficient for simple sites which aren’t mission-critical, however if you’re building more complex sites, your site may look vastly different on other browsers.


Of course, testing every page on every different combination of device, platform and browser is nearly impossible, and very costly. So how can we make sure our site will look and behave just as we envisioned on as many browsers as possible?


If you're building a website on Editor X, you can rest assured that it will be automatically compatible across different browsers. If you’re coding your own website from scratch, check out the tips below:



A website design on Chrome, Firefox, Opera and Internet Explorer
Website designs often show slight variations across browsers.


Ensuring cross-browser compatibility



1. Don’t Repeat Yourself (D.R.Y.)


When developing your website, keep your code simple and reusable. Instead of copying and pasting code in many files, write a reusable function (be that a JavaScript function or a Sass mixin) which you can call when you need it. This means that whenever a problem arises, you’d only have one function to fix rather than many different files, minimizing the chance of making mistakes.



2. Define a doctype


At the start of your HTML file(s), define the language the code is written in so that browsers interpret it correctly. For example, in HTML5 the doctype declaration is simply:


<!DOCTYPE html>


In older files, you may see something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


This is due to earlier versions of HTML relying on a Document Type Definition (DTD).



3. Validate your code


Erroneous HTML and CSS code can make your website misbehave in different ways across all browsers. The bugs can be hard to spot and the webpage will still typically build with small, seemingly random problems — which in turn makes it hard to debug.


A way to avoid this is to validate your code. You can validate HTML and CSS with the W3C validators, or install extensions in your IDE which will check your code as you write it. Some styling languages which require pre-processing, like Scss, will not compile if there are errors. This isn’t a bad thing, as they typically point out where your mistake is and that can help you fix it.



4. Use a CSS reset


By default, browsers may apply their own default styles to your website. For example, Chrome will apply a default margin to your page — it’s small, but noticeable if you use a darker background color.


To fix this, you can use some code to reset the defaults - removing the guesswork as to why some styles are different on other browsers. Here’s an example courtesy of meyerweb:


/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

*/