With the advent of mobile devices like smartphones, tablets and internet ready e-readers the concept of pixel perfect consistency is and should be a thing of the past. Add to that mix, a bevy of different screen or desktop sizes and achieving pixel perfection becomes nigh impossible. However, that doesn’t mean we need to let our designs display in overtly different ways in every browser. While pixel perfect is out, with simple and clean code we can get extremely close.
What IS Cross Browser Compatibility?
As mentioned above, cross browser compatibility has little to do with pixel perfection. It does, however, have to do with how a site functions across multiple sites. Consistent appearance is also an important factor but not necessarily the only reason we check for cross browser compatibility. Developers check their websites in different browsers and screens to make sure the site is functioning the way it should.
Sites can render their CSS in very different ways in different browsers. Older browsers, like Internet Explorer, will display differently than a modern browser like Chrome or Firefox. This discrepancy can cause issues in site functionality. That’s why it’s so important to keep your browsers up to date. If your browsers are current, then there’s less of a chance of you having an unpleasant web experience. The more consistent the site functionality, the more users across different devices & browsers will be able to access the site like they should.
Now, just because we don’t cater to every version of a browser available, doesn’t mean that there aren’t fallbacks available. Graceful degradation is a term web developers use to describe a fallback for older browsers. This coupled with solid coding will ensure that most browsers regardless of version, will be able to display the website correctly.
Performing Cross Browser Checks
There are two main ways one can perform a cross browser check to their site. The first way would be to open the site in multiple browsers. The downside to this being unless you have an Apple and a Windows computer, you would be missing on some potential quirks in other browsers. Another, and potentially costly, way to check your site on multiple browser would be to get an account to a site like SauceLabs, BrowserStack or some other online emulator. This option is a personal favorite of mine because I can not only check different browsers on different operating systems, I can also check how the website would look on older browser versions (for example – Windows Google Chrome version 37, instead of the most current version-which is 43). Most online emulators allow for you to check out websites on mobile and tablet devices and at varying screen sizes/resolutions.
All of these options can be a little bit overwhelming, however, and can potentially be very time intensive if you don’t have the right information while checking your site. You can find out how many users are using which browser if you have a decent analytics program running on your site. Making sure that your information displays correctly for your main user base should be most important, even if that means less time is spent making sure older browsers can handle your sites. The end goal should be to ensure that your current users are getting all they can out of your site and expand your future user base at the same time.