Website Development
Designing your Web Site for ALL Browsers
by:
David Bell
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.
by-http://www.wspromotion.com |
