Readin' & Writin'

No arithmetic, though.

Cross Browser Compatibility and Web Design

By | February 08, 2016

cross browser compatibility for web design

It’s a good time to be online. The Internet is prettier, faster, and more user-friendly than ever, thanks in part to the innovation in browsers spawned by the healthy competition amongst browser developers today. While the options are nice, and overall the amount of browsers benefits the user, the number of web browsers in use creates a bit of a challenge for web designers. Complete cross-browser compatibility is a sort of Holy Grail of web design, and as such, it is almost impossible to attain the exact same design across all browsers. We can get extremely close, however, to giving every user the identical website experience (providing they aren’t using a very outdated version of Internet Explorer, that is).

Five browsers web designers have to consider when building a site

A majority of web users are sticking with five browsers, though there appears to be a slow migration in the direction of Chrome. In October of 2015, 66.5% of users were browsing with Chrome, while in November that number was 67.4%. By December, the number was up to a solid 68%, not a bad share of web users to be serving at all. The remaining web users of December 2015 can be broken down as follows:

Firefox: 19.1% | Internet Explorer: 6.3% | Safari: 3.7% | Opera: 1.5%[1]

It certainly would be nice to be able to design exclusively for the Chrome users that make up the 68%, but web professionals have to think about everyone browsing on Firefox, Internet Explorer, Safari, and Opera users too.

So the browsers are different. But isn’t code written in a universal language?

Now, all websites are built using standard coding tools, but the way the languages are interpreted can vary slightly from browser to browser. It wasn’t until 1994 that the World Wide Web Consortium (W3C) tried to start standardizing protocols, published recommendations for HTML4 (we’re now at HTML5), Cascading Style Sheets (CSS), and PNG images. Until then, browsers could easily use proprietary markup which meant the potential for a website to be coded not once but multiple times to satisfy the needs of multiple browsers.

These recommendations and protocols haven’t solved everything, however. W3C does not enforce their recommendations, so it is up to each browser development team to comply, whether in part or in full. Because of this, there are still some indiscrepancies that require workarounds, hacks, or design limitations to take place in the development process. For instance, Firefox has a unique way of scoping and interpreting CSS rules based on the position of the style element. This means Firefox can pick up rules in a different order than other browsers, so designers have to take extra steps to ensure Firefox users aren’t seeing the wrong font colors or incorrectly sized images. Meanwhile, CSS clipping masks are accepted by all browsers except Internet Explorer, Edge (Microsoft’s replacement for IE), and Opera Mini, so alternative coding must be established to keep a site’s look consistent, if masks are the route you choose to take.

Speaking of the downfalls of Internet Explorer…

It’s no stretch to say that Internet Explorer is the least favorite browser of all web designers everywhere. It’s reputation got so bad, in fact, that Microsoft has abandoned the brand and started over with its new browser, Edge.[2] Even before Microsoft officially ceased its support of all but the most up-to-date versions of Internet Explorer*, it had more security holes than any other browser by far. It’s so broken, in fact, that homeland security identified a bug so serious they asked users to give it up back in April of 2014.[3]

When developing and designing a website, web professionals unfortunately have to keep in mind the most common Internet Explorer CSS bugs (like the tendency it has to add an unintended staircase effect to floated lists)[4] because 6.3% of web users are stubbornly attached to their Internet Explorer (Which really deserves a whole blog post to itself).

Web developers and designers work tirelessly to optimize every web user’s internet viewing experience. But web users have to do their part, too.

Here’s a list of things we recommend you try if you think your Internet viewing experience could be improved.

  • Don’t use Internet Explorer!
  • Make sure you are using the most up-to-date version of whatever browser you prefer.
  • If you haven’t tried Chrome yet, today’s the day! Find out why so many people are making the switch.
  • If you’re having a glitchy experience with one particular website, try refreshing. Sometimes your web cache will show an older version of a site, and it needs a little nudge to download the new information.

In the meantime the team at S2N Design continues to work on ensuring an excellent viewing experience for all web users who visit the sites we build, no matter their browser of choice. If you want to be sure your audience is seeing your website as it was intended to be seen, regardless of browser, contact us today!