Browser compatibility – How do “they” see your site

The type and age of browser you use plays an important part in your journey browsing the great world wide web and will greatly affect how “they”, your customers, see your site.

Quite simply you could be missing out on parts of a website or a complete users experience by using the wrong one.

Essentially a website is made up of two fundamental things:

1. HTML

HTML is like the skin and bones of your body. Every ‘body’ has them but how they look varies.

2. CSS

CSS is like the genetic makeup of your site. It controls the look, style and color of your site like the genetic makeup of your body controls the style, look and color of your skin, eyes and hair.

Your eyes are like your browser to the world. You view the world through them as you view the internet through your browser. Imagine, if you will, the look of a person you see varies through different peoples eyes. Imagine if you look at someone and they had rounded shoulders and blue hair, but another person looked at the exact same person and they had square shoulders and no hair at all. That would be ridiculous and simply wouldn’t happen!

Well, in the world of the web it does happen and it all comes down to browser compatibility and a group called the W3C.

Who are the W3C?

In their own words from their website www.w3c.org:

The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor Tim Berners-Lee, W3C’s mission is to lead the Web to its full potential.

Essentially they define a specification of HTML and CSS which (in theory) should be adopted by web designers and, more importantly, browser developers.

The first is true – Web designers all around the world are using the latest and greatest that HTML4 and CSS2 (the latest version) have to offer. Some even dare to use the developing HTML5 and CSS3.

However most browser types don’t fully support all aspects of the specs particularly that of CSS.

CSS2, for example, was released in 1998 and even today many browsers are only just coming close to supporting all aspects of the spec. What’s worse is the level and degree of support varies between browser type.

More advanced and sophisticated browers such as Mozilla FireFox, Google Chrome, Apple Safari and Opera support more aspects of CSS then the giant itself Microsoft Internet Explorer. This is particularly troublesome and frustrating for web designers as Internet Explorer is still the most used browse type thanks to its bundling with the Windows operating system.

Let’s take a look at a real-time example.

To support or not to support…

Below is a text area and box that I created.

This is an example of the difference between browsers.

This is 100% HTML and CSS. It is not a graphic. I have no idea how you will see this as it all depends on your browser type. I hope you see it as I intended which is a box with two rounded corners and text with a soft drop-shadow, but I can’t guarantee it.

Here is a bitmap capture of how you the text and box would be viewed in both FireFox 3.6 (as I intend) and Internet Explorer 8.

As you can see they look different.

FireFox renders all the CSS as I designed it with the rounded corners in the top-left and bottom-right corner and a software drop shadow.

Internet Explorer does not show any of these nice styling I’ve done.

Even though I am using the latest and greatest version of Internet Explorer it does not support some of the CSS elements I used to create this HTML which just happen to be:

-moz-border-radius-bottomright:30px; = rounded 30 pixel corner in the bottom-right corner

-moz-border-radius-topleft:30px; = rounded 30 pixel corner in the top-left corner

text-shadow:0 4px 4px #A8A8A8; = text shadow offset by 4 pixels down and to the right with a soft grey color

This is just a few and there are many other CSS elements Internet Explorer does not support. To be fair there are some CSS elements that FireFox does not support either but Internet Explorer is far behind the rest.

So what can you do as a web designer and site owner? You could play it safe and not use any of these nice new elements or you can do something for the industry on a whole and start to use some of these nice new elements but educate your users to update their browser.

A simple “This site is best viewed in FireFox 3.6” for example could be enough to let your customers know they can still use this site but for the best experience switch over to FireFox.

Browsing in the past

Another problem web designers face is the number of old browser versions.

Many corporations rushed to adopt Internet Explorer 6 which was released in August 2001 as it gave the first stable platform to build web applications on and therefore was used by many companies to replace traditional desktop applications and databases in their organization. Strict IT rules preventing PC-users from ‘self-updating’ has left many office desktops trapped in the past.

Internet Explorer 6 is surprisingly still quite popular with many small office users and many people simple refuse to update. These users shout back at web designs with “why should I?” and “it’s not my fault if YOUR site does not work!”.

I find these type of reactions bizarre as the user demands the tools and functions but refuse to equip themselves with the right tools to use it.

I also find this type of reaction bizarre because it’s a free update. 100% free which would dramatically improve your browsing experience but also protect you from the many security risks earlier version browsers may have.

It’s not that the site doesn’t work, it’s actually that the browser they are using is so old it does not support the technology used to build and operate the site.

Web sites are far more than just text these days. They are interactive work spaces where users perform tasks and engage on a level once reserved for desktop applications.

To enable this great user-interaction with a site web designers must use tools and techniques that only modern browsers support.

So how can you help?

Firstly, update yourself! Update to the latest Internet Explorer and FireFox (or what ever browser you use).

I personally prefer FireFox. I find it faster, cleaner and a better user experience all round. Personally I find Internet Explorer runs like a wounded dog…

Secondly encourage your customers to update to newer versions of a browsers by again recommending a browser type and version somewhere on your page i.e. “This site is best viewed in FireFox 3.6”

You can run different browser software on the same PC. Test and cross test your site on popular browser types like Internet Explorer and FireFox. You will also notice the performance issues between each browser type and will naturally start to gravitate towards one yourself.

Finally, don’t be afraid to explore new techniques but it’s best to stay away from cutting-edge techniques for consumer-facing websites as you will run into compatibility problems. Cutting edges bleed 🙂

But please, please, please, please at the very least update your own browsers to the latest version. You’ll be doing yourself a favour and those around you who regularly hear you cussing your screen.

0 Comments

No Comment.