Cross browser compliance: how to design consistently

WASHINGTON DC – Web designer tips

Have you ever noticed that a website looks differently or works differently on (Microsoft) Internet Explorer than it does on (Mozilla) Firefox or (Google) Chrome or (Apple) Safari?  The problem is cross-browser incompatibility and the solution is cross-browser compliance.  There are two basic ways to solve this problem:

  1. All producers of web browsers (Microsoft, Mozilla, Apple, Google) adhere to web standards
  2. All web designers build according to conservative designs and use IE hacks

Allow me to demonstrate the problem.  Below are snapshots that I took today from a website called Angel.co across three separate browsers and two mobile devices:

Angel.co viewed in Mozilla Firefox

cross-browser-compliance-major-modern-browsers

Angel.co viewed in Internet Explorer (IE9)

how to make major modern browsers consistent

See the difference?

Now, it could be worse.

At least with Angel.co, the website is functional across all browsers.

In this case, the IE9 version of Angel.co doesn’t look right.  It looks broken.

Ideally, all versions of web browsers should view and display the same web page consistently across all browsers.

The real problem is when you are prevented from actually doing things on one browser that you can on others.  With WordPress, for example, I cannot upload images into my blog post using Microsoft Internet Explorer (IE9).  Now, it could be a security setting, I just haven’t fully exhausted and troubleshooted all of the possible reasons.  But, out of the box, both Google Chrome and Mozilla Firefox allows me to upload photos into my blog posts using WordPress.  I’m using Chrome right now, as a matter of fact.

So, there are actually four levels of cross-browser compliance:

  1. Cross-browser compliance level zero (0) – site functionality does not work in one browser but works in others
  2. Cross-browser compliance level one (1) – sites look messed up and inconsistent, but at least they work
  3. Cross-browser compliance level two (2) – sites look only slightly different, perhaps a tiny bit misaligned
  4. Cross-browser compliance level three (3) – sites look exactly the same and work across all major browsers*
  5. Cross-browser compliance level four (4) – sites even work well and are responsive on mobile devices :)

In this example with Angel.co, we’re at cross-browser compliance level one (1) – everything works but looks broken.

So, how do you make sites consistent across all browser?  Stay tuned…

*See: How to determine what is considered a major or most popular browser