|
A recent statistic I saw
reported that 12% of internet users were Macintosh users. Ignoring this fact is
like creating a catalogue 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 Windows XP 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....
|
