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.