|
Beginning:
Designing for Different Computers and Browsers
So,
you've designed not just a Web site, but a masterpiece,
complete with fancy fonts and a one-of-a-kind graphic on
the right, all in various shades of the lovely color "Autumn
Splendor." But when you pull up your site to show your
mom, everything is pea green with Courier font, and you
can't even see your graphic on the right! What happened?!
What can you do?
This
problem actually results from a positive aspect of Web design:
an unlimited number of people living anywhere in the world
can view your site! Unfortunately, not all of these people
use the same monitor size, browser, and monitor resolution
as you do, which affects how they see your masterpiece.
Fortunately, doing a little research and making a few adjustments
so most of your visitors can see your site as you designed
it isn't a bad trade for asite that looks good for a large
number of people. All you need to do, is remember the following:
Monitor Size Makes a Difference
Browser Type Affects Colors and Fonts:
Not Everyone Has "Autumn Splendor"
Monitor
Size Makes a Difference
The
computer monitors that your visitors use will vary in size
and proportions. Most Web surfers use one of the following
three sizes of monitors: 640 x 480; 800 x 600; or 1024 x
708. If you design your site to fit perfectly with a 1024
x 708 monitor, those visitors with 640 x 480 monitors will
see a distorted and cut-off version of your site. Additional
problems come with visitors who use Web TV to view your
site. Web TV monitors are narrow, but they automatically
compress site content to fit the width of your site. However,
compression is sometimes another word for "distortion".
To see how your Web site is viewed on Web TV monitors, go
to http://developer.webtv.net/design/tools/viewer to download
a free program that simulates Web TV.
The
most common monitor size is 800 x 600, but you probably
don't want to alienate visitors whose monitors are smaller.
Although there's no exact solution to these problems, knowing
the following will help you avoid drastic problems:
- Frames can cause problems with different monitor sizes,
so try to keep your frames to a minimum or only use
them when absolutely necessary.
- Try setting your table size as a percentage of the
browser window instead of as an exact size (100 % instead
of 800 pixels). Then your tables will expand or shrink
as needed.
- To make sure visitors can view all of your content,
try setting your tables as 600 pixels wide (to account
for 640 x 480 monitors).
- Above All: Test your site with different monitors
or dimensions before publishing it!
Browser
Type Affects Colors and Fonts: Not Everyone Has "Autumn
Splendor"
The
browser types and versions (e.g., Netscape Navigator or
Internet Explorer) with which your visitors view your site
also vary. Internet Explorer (IE) and Netscape both have
HTMNL that the other doesn't recognize; for example, in
Netscape, you can use the "blink" code to make
your text flash on and off the screen, while in IE, you
can use "marquee" HTML code to make your text
scroll on the screen. Browser types therefore affect what
your fonts and colors look like. To account for these differences,
try the following:
- Make sure that the colors you use are on the basic
216-color pallette, or stick to fairly basic colors
- Try to use TrueType fonts or list a variety of acceptable
fonts in your font tag. For example, if you list the
following three fonts in your <font face> tag,
a browser will use the first font, if available: <font
face="Trebuchet MS, Verdana, Arial, sans serif">.
If Trebuchet MS is not available, the broswer will use
Verdana, and so forth. If you end with "sans serif"
or "serif", then the browser will use its
default font for each category.
- Both browsers are free, so download them, and test
your Web site on both. To download Netscape, click
here. To download IE, click
here.
|
