Putting together a website? Wondering if everyone will get
a good look at the entire presentation when they arrive?
One way to ensure they do is in your initial page setup.
When the typewriter ruled, and the 8-1/2x11 sheet of paper
was king, layout was much easier. You always knew how much
space you had to work with, what to set your margins to,
and what size the type would end up when you pressed the
keys.
Then along came the word processor and its various flexible
components. Layout changed. Tiny things we'd all done forever,
such as double spacing after the end of every sentence, are
no longer necessary. Word processing allowed for (and still
does) a vast array of page tweaking and layout design - from
font size and color to table arrangements and graphics. But
this article isn't about word processing.
We didn't stop there... some bright group of individuals
developed the internet and the webpage with its HTML coding
was born. And with that birth, our whole outlook on how to
design, how to use that "piece of paper" flew out the window.
No longer is it a sheet of paper but someone's monitor screen
size and resolution that we must keep in mind during our
design and layout phase. With screens from 13 inches and
up, we've got to be prepared for all visitors. And with a
wide range of audience ages, font size becomes critical.
Choose sizes too large and your website looks amateurish,
choose sizes too small and your viewer most likely will run
for the hills versus re-adjusting their browser (which they
could do, but most likely won't).
So what is the ideal page layout? How is it accomplished?
The simplest way after setting your page background color
is to create an overall webpage table. Picture this first
table as your 8-1/2x11 sheet of paper. Inside that piece
of paper you'll create even more tables, opening and closing
them as you go along, but ultimately ending the entire page
- just before the total webpage closing tags with your overall
webpage table closing tags.
A typical layout that lends itself well to just about any
presentation of material might look like this (see my ezine
webpage at http://www.thewizworld.com to get a visual idea
only - and while you are there resize your viewing window
to see how it automatically adjusts for you):
=============================================
(Note: replace * for < or > when coding your page)
*body background="#4682B4"*
*center*
*table width="80%" border="1" bgcolor="#FFFFFF" cellspacing="1"
cellpadding="8"*
*tr*
*td valign="top" align="center" width="10%" bgcolor="#FFFFFFF"*
First column of information
*/TD*
*TD WIDTH="90%" VALIGN=top*
Second column of information
*/td*
*/tr*
*/table*
*/center*
================================================
The absolutely most important attribute for this entire
page is the coding of the page WIDTH.
Many webpages are created using a fixed table size. Setting
your WIDTH using percentages though allows your page to automatically
resize itself for each individual visitor.
You can also place a fixed value inside the quote marks,
but here's the rub. Even widths of 700-750 will be too wide
for most browser windows. This will force your reader to
scroll from left to right. You will lose them since most
people will only put up with that for so long before they
give up and leave.
A good suggestion would be to work within a page layout
of 650 or less if you truly must choose a fixed width.
My second website, http://www.mywizardads.com, uses a fixed
table width of 600. The tables within the overall table adhere
to the 600 width also, with their individuals columns set
with adjustable percentages.
Granted, with the fixed table size a person will only be
able to downsize their browser screen to a given point before
some of the information is unviewable, but the 600 setting
works for most visitors and surfers.
=============================================
(Note: replace * for < or > when coding your page)
*table width="600" border="0" bgcolor="#000080" cellspacing="2" cellpadding="10"*
*tr*
*td valign="top" align="center" width="95%" bgcolor="000080"*
Top portion of information
*/td*
*/tr*
*/table*
==============================================
Never, of course, take what belongs to another, but do surf,
right click and view source, and study different websites.
Teach yourself by hands on manipulation of the numbers within
your own HTML editor or notepad file what works and what
won't.
And do consider using a main overall table in which to nestle
additional individual tables. Use percentages or combinations
of one overall fixed width and individual percentage settings
inside your main- and sub-tables.
You've worked hard! Ensure your website is viewed as you
envisioned it.
© Theresa Cahill - All Rights Reserved. Feel free to
distribute this article. Please keep it intact and with the
resource box included below.
ABOUT THE AUTHOR:
Theresa Cahill, a two decade veteran of marketing, is the
owner of
http://www.mywizardads.com and
invites you to take a look at the services of MWA and download
fr.ee helpful information and more at
http://www.mywizardads.com/sitemap.html
