Supporting multiple browsers

A common mistake that clients make is assuming that their web site looks the same for everyone as it does when they look at it on their own computer. In reality, there are many things that affect the appearance and sometimes even the functionality of a web site, for example, screen resolution, browser choice, operating system, internet connection speed, and device type. Most of the work fun of building a web site is making sure the experience of viewing the site is acceptable for as many people as possible, no matter how they choose to view the site. In this article, I’ll cover the types of things that affect the experience and what you should do to make sure you reach as many people as possible.

First, a vocabulary lesson

To understand what really goes into making a web site work for as many people as possible, you have to understand a few basic concepts. So let’s cover those first.

Operating System

An operating system is the system that runs your computer. Chances are, you’re either using a version of Windows or a version of Mac OS. There’s also a small chance that you’re using a version of Linux, and even a smaller chance that you’re using something else entirely. The operating system is the software that manages all the different programs you’ll use and manages the way you’ll interact with the computer.

Browser

A browser is the software or program that you use to view web sites. There are quite a few popular choices on the market, including Firefox, Chrome, Safari, Internet Explorer, and Opera. Most of a browser’s interface is a big window that you’ll use to view web sites. They’ll also include an address bar where you type in where you want to go, provide bookmarking capability so you can remember your favorite sites, and probably also give you a search box so you can search the web.

Search Engine

A search engine is a web site that you use to search for other web sites. The most popular choice right now is Google, but Bing and Yahoo are still hanging in there along with other choices like Ask.com.

Screen Resolution

Even though each computer monitor is a fixed size, they nearly always have the capability to modify the display to higher or lower resolutions. The same monitor can be adjusted to show 800×600 pixels, showing everything large and clear and easy to read, or adjusted to show 1024×768 pixels, or even 1240×1024 pixels, where everything will appear smaller and more elements will fit on the screen. Computer users with low vision or eyesight problems will often choose a lower resolution so that everything appears larger, even though it means less will fit on their screen.

What’s the browser got to do with it?

Your web site is made up of some code. Mostly HTML, with some CSS thrown in. And maybe also some JavaScript and/or Flash if you’ve got some interactivity, animations, or video available. That code is the same no matter which browser your site visitors use. So why does your navigation bar look broken on your friend’s computer when it looks fine on yours?

The answer is that while all browsers are getting the same code, they all support different features. And to make it even more complicated, sometimes they support the same features, but support them in different ways. There are lots of ways to deal with that, and your web developer will know which approaches are best for your particular situation.

IE6 – the evil browser

There’s a lot of chit chat flying around the web these days about Internet Explorer 6, or IE6. It’s a ten-year-old browser that’s still in common use. An average site will see about 20% of its visitors using IE6. Two newer versions of IE have been released – IE7 and IE8, but unfortunately, a lot of users have either chosen not to upgrade to these newer versions or have been prevented from doing so by their IT departments at work or by their old computers that don’t support the new versions.

IE6 is such a polarizing issue because IE6 is poorly written. It doesn’t support a lot of the most popular features in use on the web today, and of the features it does support, it often gets the implementation all wrong. Code that works fine in all the other browsers is often broken in IE6. For more complex sites, sometimes the code is so broken and requires so much reworking that it doubles the time it takes a web developer to build the web site. Even for simple sites, there’s a significant amount of time dedicated to getting the site working for IE6 users.

Deciding what to do

What are you, as a web site owner, to do about the browser support issue? You can not expect your site to look exactly the same in all browsers. As long as the content is available and the layout is usable, people will be able to get to your content, even if it doesn’t look exactly the same. Making sure that nothing is broken to the point where it can’t be used will get you a long way.

You also want to look for a web developer with a common sense approach to supporting multiple browsers. There are two methods in popular use right now:

Graceful Degradation

Graceful degradation means building a web site to take advantage of all the newest features in the most capable browsers, then building in ways to make sure those features don’t appear broken in older or less capable browsers.

Progressive Enhancement

Progressive enhancement is in a way, the opposite of graceful degradation. Instead of first building features that take advantage of the latest and greatest, you first build the site in the most basic way possible so that it will work for anyone using any browser. Then you layer on styles and features that enhance the experience for users with newer and more capable browsers.

Over time, progressive enhancement is more maintainable and sustainable. No matter what new features browsers develop, you’ve got a solid base that will always work for everyone.

Save time and money with common sense

Your goal when building a new web site should be to make the site’s content available to as many people as possible. Make sure you’ve got analytics installed on your site so you can take advantage of the reporting features – this can tell you which browsers your site visitors are using, which operating system they’re using, and what they’ve set their screen resolution to be. Each web site has its own audience, so it’s always a good idea to have the data for your site’s visitors rather than relying on global statistics for the entire web.

Don’t expect the site to look exactly the same no matter what browser and operating system your site visitors are using. Aim instead to make sure the navigation elements are usable and look nice, and that everyone can get to all of your content. Make sure it’s easy to understand what your site is about, even when you can’t display images and styles. Use progressive enhancement to layer on fancy features so that everyone will be able to at least get to your basic content and nobody will miss out. You’ll be happier when you’re reaching as many people as possible and your site visitors will be impressed that they never see a broken feature.