Web Site Design: How Your Site Looks to Others

You've put together a wonderful Web site. It's informative and looks great. It has useful information and an intuitive interface and clear navigation. But is everyone seeing your site the way you intended? Many factors contribute to the way a Web page is rendered, or displayed, on different computers:
. The operating system
. The browser and version
. The monitor
. Resident typefaces
. Internet connection
. User preferences

The Operating System
If you are among the majority of Internet users, you view the Web from a computer running the Microsoft WindowsXP operating system.* However, at least 25% of users are viewing the Web using other operating systems such as Macintosh OS, Unix and Linux, as well as previous versions of operating systems. Unless you are prepared to ignore 25% of your potential market, you must take into account what operating systems are being used. Even the same browser in the same version, may display items differently when working under different operating systems.

The Browser and Browser Version
The percentage for the majority narrows when we get to browsers with 54.5% of Web surfers using Microsoft Internet Explorer 6. The remaining 45.5% are using Firefox (28.8%), Internet Explorer 5 (3.2%), Internet Explorer 7 (5.1%), Mozilla (2.4%), Opera (1.4%), Safari, Netscape, etc.* Each different browser application and each version of that browser has its own unique method to interpret the HTML and other coding used on a Web page and may display the results differently in each case.

The Monitor
The best way to get an idea of monitor differences is to think of the last time you went shopping for a television and looked at the bank of TV sets lined up on the wall. They didn't all look the same, did they?
    Monitor resolutions vary from 800 x 600 pixels (17% of users) to 1024 x 768 pixels (58%), and higher (19%). Currently, most computers can display 16,777,216 different colors, but older computers and laptops often have a maximum of 65,536 different colors and handheld computers (and very old computers) often have a maximum of 256 colors available.
    There are CRT monitors and LCD monitors, wide screen monitors, tiny handheld displays and more. Each monitor, even from a single manufacturer, in the same size and model can look quite different.

Typefaces
Different computers, operating systems and applications include different typefaces. Not everyone will have the same typefaces you have. Additionally, individual users may have added new typefaces or customized the defaults used in their browsers.

Internet Connection
A large percentage of your site visitors may be using: a dial-up account, a slower DSL connection or a handheld device. They may be accessing your site from a computer that has company-wide restrictions on page size and content.

Individual User Preference Settings
In addition to changing default typefaces, users can make a lot of changes to the way their individual browsers displays a page. They can change the type size and default colors. The width of the browser window is completely up to the user and can be changed at any point.

What to Do
Of course, there are levels of response to each of the above situations. But some basic rules may help avoid broken page designs in a majority of situations:
Take into account the differences between operating systems. When including special items such as video, be sure to either use a universal format or include alternative formats for different computer platforms.
Learn about the differences in browsers. Internet Explorer does not currently support all HTML and CSS standards as set by the World Wide Web Consortium. However, there are workarounds to cope with this. (See the links below.)
Individual user settings are not something you can control. If a particular typeface is required, such as to make a logo or trademark display properly, it's best to create that content as an image, eliminating the need for the individual site visitor to own and have installed any particular font.
For the bulk of the copy content on your site, it is best to have a flexible layout that specifies a family of typefaces or a generic specification such as: sans serif. It you stick with the primary fonts that are included with just about every computer and keep it flexible, the slight difference between, for example, Arial and Verdana, will not undermine the user experience you intended for your site.
Before you fill your Web site with dozens of large, beautiful pictures, animations, scrolling copy, video, sound, etc., think about the trade-off for users on slower connections and behind corporate firewalls. Make sure there's a good reason for every item you add to your site and that it will enhance the user's experience and not overburden it.
The best approach overall is to be sure your layout has some flexibility built into it, use Cascading Style Sheets and be sure you include any coding necessary to accommodate various browser idiosyncracies, and then be willing to accept that there may still be some cases where you simply are not in control.

How to Know
The only real way to know if and how your site may be breaking in some browsers is to test it in those browsers. Should you get the new Internet Explorer 7? Absolutely. And keep IE6. And if you still have IE5, keep that too. Download Firefox if you don't have it; and Opera and maybe Netscape, too. If you have other computers, older computers, friends with different kinds of computers, view your site on as many as possible. If you're on a PC, find a friend with a Mac who will let you check the site on their computer. If you're on a Mac, it is critical that you review your site on a PC since more people will see your site using a PC than a Mac. Firefox, as well as Opera and Netscape are cross-platform compatible but Internet Explorer is not available for Mac after version 5.5. Safari is the browser included with Macs and is only for Macs.

When you're testing, look for breaks in the layout or unacceptable changes. You'd be surprised how small differences can accummulate to create a disastrous break in your site's design. You can't address the problem until you can see what's happening. The more you are able to improve your users' experiences, the more useful (and used) your site becomes.

*The statistics above are extracted from W3Schools' log-files. Statistics can often be misleading. Global averages may not always be relevant to your web site. Different sites attract different audiences. Some web sites attract professional developers using professional hardware, other sites attract hobbyists using older low spec computers. Also be aware that many stats may have an incomplete or faulty browser detection. It is quite common by many web stats report programs, not to detect new browsers.

W3School
Firefox
Opera
Netscape
Safari-Mac Only
Internet Explorer 7-PC Only