|
A Web Page For
All Resolutions?
Teacher: Thomas
Benton
640 x 480, 800 x 600, 1024 x
768, 1280 x 1024... so many resolutions! Is it possible to
build a web page that looks good regardless of the monitor's
resolution setting?
Maybe not. But here's a web design
strategy that will help the looks of your web page in the majority
of your visitor's browsers.
There are two requirements that
must be met to give your page a *balanced* appearance at both
ends of the popular resolutions spectrum.
1) It must not require horizontal
scrolling at the lowest resolution. Surfers hate to use that
horizontal scroll bar!
2) It should have some content
that spans the width of the page at the highest resolution.
Too much blank space is irritating to some.
Accomplish these two things and
your web page look like it *belongs* when viewed at any resolution.
Sound difficult? Actually, it's
easy to do.
We'll use three main components
to structure our universal web page layout.
1) A dynamic table at the top
of the page set to 100% width,
2) A fixed width table in the center of the page set to 600 pixel width, and
3) A dynamic table at the bottom of the page set to 100% width.
The second table is your web
page's main content area. It should be centered horizontally.
This will allow it to *float* and remain centered between the
margins regardless of the viewer's monitor resolution. Follow
good design practice and set the background color to white.
(Black text on a white background is easier to read.)
The dynamic tables at the top
and bottom of the page will stretch from left to right margins
at all resolutions. This is where you can introduce a little
color to your web page. Use a background image or choose a
background color to complement the content of your website.
A color stripe, or stripes, to
define the top and bottom of the table looks great too. The
table at the top should have a bolder appearance than the table
at the bottom of the page.
Use the top table for your logo,
main navigation, and/or headline. Embed fixed width tables
to control layout and positioning of any content you add here.
Make sure that the table content doesn't word wrap at 640 x
480.
Use the bottom table for a secondary
text link navigator, copyright and contact information, etc.
A picture is worth a 1,000 words
so, to see how this page layout looks in actual practice, take
a quick peek at http://www.webdesignwisdom.com. If you check
it at various resolutions, you'll find that it looks very good
at 640 x 480 and 800 x 600. And it still looks good at 1024
x 768. At 1280 x 1024 the center content table is somewhat
small for the page, but, because of the top and bottom tables
that span the page, a balanced design is achieved.
You must admit that our page
looks far better at the higher resolutions than a page that
uses a single left-aligned, 600 pixel, fixed-width table.
If you use Server Side Include
directives to add the top and bottom tables to your web page,
you can quickly change the look and feel of your entire website
by simply changing the colors, content, or design of these
tables.
Apply your own ideas and create
unique variations to this basic design theme. Experiment. Make
your website look good to all your visitors.
About the teacher:
Thomas Benton's
WebDesignWisdom.com is a comprehensive website design and Internet
marketing resource featuring free articles and tutorials to help
beginning netrepreneurs get it right the first time. Subscribe
to his ezine, Active-eBuilder, at http://www.active-ebuilder.com or
at http://www.webdesignwisdom.com
|
