How to Layout
Your Web Pages
2002 Herman Drost
Searching for the right
information on a web page can be a very frustrating
experience. Have you ever encountered web pages that are so
cluttered with information and graphics, that you leave,
The same situation applies if you have a web site designed
with animated graphics, pop ups, revolving text etc. It may
dazzle your visitors, but if it takes more than 10 secs to
load, you will lose them. See: How
to Calculate and Speed-Up the Download Time of Your Web Site
Start With a Simple Plan – to design a good web
site you must start with a good plan. Create a list of all
the information and graphics you want to include on the
site. To see how to sketch out your site, see my previous
to Build A Web Site That Sells
Factors That Effect Web Page Layout.
1. Screen Resolution – Most Internet users these
days use a 15-17 inch monitor. Therefore, use a screen
resolution of 800x600 pixels when designing your web page.
Some still use 13-inch monitors and many have large monitors
over 17 inches.
The way around this is to use percentages when designing
your web page. The web page will then resize to the
particular resolution the visitor is using. For the
designer, this takes more work than using a fixed width for
your pages. If you want to design your pages with a fixed
length, then it’s best to use a resolution of 800x600
2. Contrast – strike a good balance between
graphics and text.
It is easy to have too much text on your site (unless it is
book or an article). Visitors usually scan web pages so make
sure you use short sentences, small paragraphs and it
small headings. See: How to Avoid Sloppy
Web Site Copy
Plans from $30/Year
many graphics on your web page may create too much
It also slows the loading time of your site. Only use
to emphasize the points you are trying to make. Remember,
graphic can also distract people from the message you are
3. Color – Have you ever gone to a site where
there is a dark
background and dark text? You can hardly read it. Try to
to a light background with dark colored text. For example,
white background with black text is still the easiest to
Beware of using a dark textured background. The text will
unreadable. The color should not distract your reader from
main points of your site.
4. White Space – this is the space between the
elements on a web
page. If there is none or too little white space, your web
will appear disorganized. Try to make the page look clean,
simple, easy to read and navigate.
5. Navigation – the key to good navigation of
your site, is for
your visitor to find the information quickly and easily.
be clear and simple. If the presentation and organization
content is vague, the visitor will get lost, frustrated
on to another site.
The home page is usually the web page that contains all
initial navigation to your web site. However, planning
homepage is only a small fraction of your job when
your navigation. The deeper you can plan your site’s
and navigation, the more successful your site’s
With clear, clean, simple and attractive layout of your
pages, information is easily retrievable. Your visitor
an enjoyable experience and wish to return.
Herman Drost is a Certified Internet Webmaster (CIW)
owner and author of iSiteBuild.com
Web Site Design and Low Cost Hosting
Subscribe to the “Marketing Tips” newsletter for more
] [ Hosting ] [ Promotion
] [ Articles ] [ Portfolio