Once you take the time to learn a little about the history of web browsers and understand how they work, the need to build and test cross-compatible websites is clear. Between Firefox, Chrome, Safari, Opera, and Internet Explorer, you can't assume that your web page will look good and work correctly on everyone's machine just because it does so on yours.
However, understanding the importance of a web application that works across browsers is one thing, while developing for it is another. While it’s almost impossible to have a design look exactly the same on every browser, there are a few ways to make sure that you’re providing a consistent user experience. Luckily we have a few tips for making your website cross-compatible.
- Keep Your Code Simple - Think quality over quantity when it comes to coding. Don’t dedicate ten lines of code to a feature that only needs three. Not only will simple code be more cross-browser friendly, it will also be more maintainable when the time comes that you do have to debug or adjust it for compatibility.
- Use Frameworks - CSS frameworks like Foundation and Bootstrap will give you style code to make cross-compatibility easier for you. If you take the time to become familiar with some of the features, building a responsive web application becomes much faster and easier. These will also help you make the application look and behave correctly in mobile browsers.
- Define Valid Doctype - The Doctype is the first line in your code which describes the HTML that will be used in your application. Because different browsers have different standards and rules, you need to define the Doctype or the rendering engine will basically guess it for you. Of course, this is what can lead to bugs and inconsistencies that you want to avoid.
- CSS Reset - Every browser has different default CSS rules that they follow. This is why you use CSS reset stylesheet to make sure your browsers follow the same basic rules and behave consistently. You want to add one of these as the first stylesheet in order to reset unless you use a framework which will already have one.
- Validate - It’s a good idea to validate your HTML and CSS to prevent problems. Use the W3C HTML Validator and CSS Validator to make sure your code is error free and fix it if it’s not.
- Conditional Comments - Conditional comments allow you to link style sheets for different browsers, which is especially helpful when it comes to design challenges that are common with Internet Explorer.
- Prepare For Differences - Again, it’s pretty much impossible to have a design that looks the same on every browser unless it’s extremely basic. Details like forms and typography will likely vary no matter what rules you follow. Your main concern should not be making the design look identical on every browser. Instead, you should make sure that it looks acceptable and is usable without having elements that are out of place or that prevent someone from accessing certain functions.
- Don’t Skip Cross-Browser Testing - It’s not just enough to keep these tips in mind while developing. As hard as you try to avoid it, it’s easy to accidentally write something that doesn’t work in one browser. This is why you need to check that the site actually works on different browsers before delivery. Using a tool like CrossBrowserTesting gives you access to do this in over 1,500 browsers, so you never have to wonder what users are seeing when they visit your page from a different machine.