davesite.com / webstation / web site design tutorial


Dave's Web Site Design Tutorial

Chapter 3 . . .
. . . Layout Considerations


<
Back
to Chapter 2

While surfing the web, you've probably come upon many sites that have had a layout you've found interesting. Have you ever tried looking at their HTML sourcecode to see exactly how they did it? If you haven't, I suggest trying sometime. You can pick up lots of ideas by looking at the coding of other sites. Virtually all browsers have a "View Source" option somewhere in their menu.

Feel free to place comments between the <!-- opening and --> closing comment tag if it will make it easier for you to read and update your coding. But remember, these comments will be seen by anyone who decides to view the source code of your page, with no way to hide it. Also, if you comment too extensively, it will lengthen the download time of your site.

Proportions play a great role in how professional your site looks. For example, if you have a large sized graphic at the top of your page, but the text below it takes up even less room than the graphic does, it will look quite awkward to the visitor.

Another example is having a twenty word heading for a ten word paragraph. Sure, common sense will tell you not to do that, but I still see many pages coded like that in my daily surfing.

Blank lines placed repeatedly between objects on a page can cause visual discomfort and often even confusion to someone visiting your site. If you place a significant whitespace gap between sections on a page, a visitor may assume an upper section is the end of the page if they don't realize there is a scrollbar. Having a few screenlengths of blank space on a page tends to look obnoxious, and is heavily frowned upon.

Some people like to use capital letters instead of heading tags to emphasize a heading text. Generally, capital letters look very awkward on a page unless bolded or otherwise differentiated from the text around it. If you are trying to emphasize a word or a phrase in a paragraph, bolding, italicizing, or changing its texts color is often a wiser choice than placing it in capital letters.

- - - - -

Example:

Wrong Way: REPLY BEFORE APRIL 15TH TO BE ELIGIBLE!
. [Capital Letters]

Right Way: Reply before April 15th to be eligible!
. [Bolded Text]

- - - - -

Fonts and text attributes, as well as text coloring, can add a special touch to help please the eyes of your visitors, as long as their sizes are not greatly out of proportion, and if multiple colors are used, they aren't too disturbing or clashy. Excessively large or small text sizes may cause your page to seem less professional.

- - - - -

Example:

Wrong Way: Welcome to our Site!
Wrong Way: Welcome to our Site!
Right Way: Welcome to our Site!

- - - - -

The <p> tag plays an important role in displaying paragraphs. Each <p> will cause a blank line between it and the text preceeding it, useful in making a page read just like a book. Indentations are generally not used on the web, and an indent tag was never created. If you try to place a tab in your web page it will just be considered whitespace and ignored. So between two words, as long as there are one or more spaces, only the first of the spaces will be displayed, the rest ignored.Looking at the source code of this page will show you how a paragraph tag helps layout.

Separation of paragraphs - along with proper heading for each section - helps a page to be more easily read and navigated. Writing in complete sentences with proper grammar and spelling will aid in giving your page a more professional read.

[ TOP ]

>
Forward
to Chapter 4

Quick Index

Main Page

Preface
Glossary of Terms used in this Guide

Chapter 1
Getting Started

Chapter 2
General Design Considerations

Chapter 3
Layout Considerations

Chapter 4
Graphics, Backgrounds, and Colors

Chapter 5
Page Division, Legal Considerations, and Moving Your Site

Chapter 6
Using Tables for Layout

Chapter 7
Major Turnoffs in Web Design

Other
Related Site Links


Copyright © 1997 Dave Kristula. All rights reserved.
http://www.davesite.com/webstation/web-site-design/chap3.shtml
Dave's Web Site Design Tutorial - Chapter 3: Layout Considerations