Let's face it. Building a web site that browses consistently on
multiple platforms and multiple browsers is not always as easy
as we would like. It is safe to say that most designers spend
most of their time building their sites on a given platform.
Those with the highest standards should, upon completion, take a
look at their creation in different browsers and different
platforms. Sure, you could see how it looks in Window 98 with
Internet Explorer and let that be good enough, but do you really
want to risk a bad web experience for millions and millions of
potential visitors? Consider this.... A recent statistic I saw
reported that 12% of internet users were Macintosh users.
Ignoring this fact is like creating a catalog that can only be
optimally viewed by one in eight of your customers.Furthermore,
not all of the Windows users are using Windows 98. Windows 95
continues to be widely used, and Windows 2000 and NT represent a
significant percentage of visitors. It would be remiss to ignore
the small, but growing contingency of Linux users. Though small
in number at this time, the popularity of the OS grows daily.
Platform issues aside, Internet Explorer, despite Microsoft's
inclusion of it with all Windows Installations, does not
represent the only browser option. Netscape continues to enjoy a
strong following of users numbering in the millions, and Lotus
Notes is being used by numerous corporations as the "standard"
browser and e-mail application. Then, of course, there is AOL.
Although basically an IE engine "under the hood" AOL continues
to include certain differences. Considering the vast numbers of
AOL users, this browser must not be overlooked. If your site
does not look good in AOL, then you are risking turning away a
huge percentage of potential visitors. It should be clear that
cross platform and multiple browser compatibility is a must.
Therefore, understanding a few very basic and simple techniques
to help keep your pages looking their best in the most places is
also a must. Following, you will find a few tips and ideas to
help you do just that. #1 Paint the canvas your visitors will
see As a web site designer wanting to be as efficient in my work
as possible, I have configured my Mac to use two monitors. As my
mouse leaves the screen of one, it appears on the other. Thus, I
have a canvas that, on most days, is 1856 pixels wide over 32
horizontal inches. If I want to, I can easily boost that to over
2000 pixels wide. But, my clients and the average visitor on the
web do not have two monitors. In fact, most of them have the
screen resolution set to 800 X 600 or 1024 X 768. What's more,
every single time I have gone to a client who uses AOL, their
browser window opens to what looks to be a 640 pixel wide
default no mater how large the monitor or screen resolution. On
one of my first projects, I had designed a site to a modest 700
pixel wide format with a nice top navigation area. I went to my
clients office to get some "point and discuss" feedback to find
her new 21 inch monitor -- set at 640X480 resolution. My designs
looked terrible! If you intend your web site to appeal to the
broadest range of visitors, you need to design in a way that
will look good even at low resolutions. Check with some of your
typical visitors and see what kind of resolutions they normally
use. #2 Use Tables to Control Width Tables are great things when
trying to control the way text and images go together. In order
to achieve a nice looking design, using tables is the first
technique to consider. Tables can be assigned a fixed width in
pixels or a fixed percentage of the window width. There are
advantages to both approaches. If you are not concerned about
the relative vertical arrangement of objects in a table cell,
using the fixed percentage allows for more fluid layouts. If,
however, you want to keep text wrapped around an image with more
consistency, using the percent approach could lead to major
differences. Text will wrap quite differently in a cells of
different pixel widths. To have better control, consider using
fixed pixel width. However, you must now start making some
compromises. If you want to offer a site that looks good at
640X480, you will need to set your table width to 600 -- 620
MAX! You will want to center the table in the window to provide
a nice look when wider windows are used. However, if your
visitor has monitor resolutions set to 1600X800 and has the
browser "maximized" your page will have 500 pixels of blank
space on either side of your 600 pixel table. Fortunately, few
people will be browsing at this configuration. My experience
visiting clients, friends, and family suggests that, even if
monitor resolution is set at over 1000 pixels, the actual width
of the browser window will be reduced to something less. You
must decide if you will risk an odd looking page for those few
who have HUGE monitor resolution or risk the annoying scroll bar
for those with the basic 640X480 #3 Compromise your Font Use.
Supposing you select a fixed width table and have a cell that is
300 pixels wide. You write a headline in this cell, pick a font,
and size it to look just right. Good for you. Too bad that
headline will come up different on different systems. Even on
the same computer, there are very slight differences between how
Netscape and IE render fonts. Remember the 1 in 8 visitor using
a Mac? For technical reason it is beyond the scope of this
article to describe, fonts are significantly smaller on a Mac
than on Windows. Don't forget that your visitors can also set
the default size for font display in their browser, too. If they
do that, you are really starting to lose control of how fonts
are displayed! One solution is to use cascading style sheets,
but that technique goes beyond the casual designer's typical
experiences. The other solution is to compromise. Make sure that
it looks good on the predominant platform -- currently Windows
-- but don't use the smallest font possible either or your Mac
visitors won't be able to read it! #4 Check Your Final on
Multiple Platforms I commit to my web design clients that their
site will be look good to ALL visitors. To make sure this is the
case, I have an Intel computer as well as my Macintosh. I have
the Intel computer configured to boot into Windows 98, Windows
2000, and Linux. I test all the pages I design in these
environments. I test in both Netscape and Internet Explorer on
the Windows systems and the Mac. I enlist a partner to test with
Lotus Notes and AOL. This may seem excessive, but frequently
there will be some little thing that shows up in one of the
platform/browser configurations that requires some minor
correction. Would it be good enough if I did not make the
correction? Probably. However, it is always best to make a good
first impression and on the web, where you have about 5 to 7
seconds to get visitors to commit to take an actual look, every
little thing counts. If you do not have access to multiple
platforms, enlist your friends. Stop by a library or a Kinkos
and use their computers (often these places may have Macintosh
computers as well as Windows computers). These four simple
suggestions are the beginning of a journey toward the much
larger goal of making the content of your web site universally
available to your visitors. Ultimately, reaching this goal
depends upon many factors. However, progress toward this goal
must commence with awareness. Understanding that your site will
appear differently on different browsers and based on different
user preference settings is an important first step toward
awareness. Using tables and being conscientious with your use of
fonts takes you one step further. Checking your work on various
systems will begin to hint at how much further you have to go.
But, every journey must begin somewhere.... I hope this helps in
your future marketing decisions.
About the author:
David Bell is Manager, Online Marketing, at
http://www.wspromotion.com/ , a leading Search Engine
Optimization services firm and Advertising Agency.
