2
Things You Gotta Know
1 | 2
Resolution
This image is 72 pixels high and 72
pixels wide. In simple terms a pixel is one single square
of color. Right click on the image and in the popup menu
select 'Properties'. See there near the middle where it
says 'Dimensions: 72 x 72 pixels. Notice also the file size
info, 806 bytes. That's less than 1k. If you want to find
out what's happening on a website, start right clicking
on things. There's alot of info there.
See the pointy top of the D letter on the image above? Click
on it and see a popup of an enlarged image of the D. Each
of those little squares is a pixel. This big D image is
500 x 500 pixels.
OK, now that all that is explained,
move this window out of the way and right click on your
screen's desktop. In the menu select 'Properties' and in
the panel select 'Settings'. Click Here for a popup picture.
This is what you should be looking at on your computer.
See the resolution selector? Move
it around and see the example view changing sizes. Notice
the sizes 800 x 600 and 1024 x 768? OK, here is the important
part.
What you're changing there is the
viewable screen area. Set your screen resolution to 1024
x 768.
Now set your screen resolution to
800 x 600 and look at the example page again.
Notice that to see the whole image
you have to scroll to the right? This is because the image
is 900 pixels wide and your screen resolution is set to
only 800 wide.You'll find some websites that you do have
to scroll right and left but it's considered poor web design.
The significance to all this is that
the default screen resolution setting on alot of computers
is 800 x 600 pixels and most people don't know anything
about resolution. So, in order not to have screen side scrolling
most designers will design for a screen resolution of 800
x 600 so that the page is viewable in both resolutions without
side scrolling.
The downside is that you can't design
your website using all the screen area, called 'real estate',
at the 1024 x 760 resolution, because it won't look good
to all the people who have a monitor resolution set to 800
x 600. So, most websites are designed to be viewable in
the lower resulution and the content either center or left
aligned in the browser. If you've ever noticed, at 1024
x 760 you can usually spot a left aligned page designed
at 800 x 600 because there is a big chunk of empty real
estate on the right side.
Like the browser problem, a couple
of alternative methods are available to the web designer.
The most common ways are to write a javascript that will
determine what screen resolution your visitor is using and
redirect 800x600 visitors to a second website designed for
that resolution or you can substitute other pictures. If
it sounds like more work, you're right.
Big companies, who change their websites often
and want them to look perfect on every possible configuration
of computer and software, have teams of web developers on
staff. These folks sit in a room all day with rows of computers,
each loaded wth different configurations of software than
the next.
In this manner, the company's website can be evaluated
under the exact conditions that your neighbor's mom is using
on her 386-PC, running Netscape 3, on a 28k modem, at a
screen resolution of 800x600. Any problems found are corrected
before the new design is posted to their website.
The '2 Things You Gotta Know'
tutorial was written in the hopes of giving the reader an
understanding of some of the overlapping issues of web design
which must be considered when deciding what you want for
your website. In this case, the issue is how your visitor's
resolution and browser choices affect your web design ideas
and what are some of the choices you have.
If you liked reading '2 Things You Gotta
Know' and haven't read the tutorial 'The
10 Secrets of Web Design' CLICK
HERE.
1
| 2 |
