|
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....
|
