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

This entry was posted in How to, Web Development and tagged , , , , , , , , . Bookmark the permalink.

Comments are closed.

Close
 
Contact Us

inQbation headquarters is located at the Center for Innovative Technology (CIT) building at Washington DC´s Dulles International Airport and Route 28 in Herndon, Virginia.

The CIT building is also home to George Mason University (GMU) executive programs and the Northern Virginia Technology Council.

Washington, DC

2214 Rock Hill Road, Suite 010
Herndon, VA 20170-4228

icon-email resultsatinqbation.com icon-phone 703.999.1232