web design resources
Clean And Crisp!

Clean And Crisp!

Teacher: Thomas Benton

Sounds like fresh washed lettuce doesn't it? In this case, it isn't about vegetables.... it's about webpage layout!

I've heard my website designs referred to as *clean and crisp* more than once. It's interesting that, even though these adjectives never came to my mind, that others chose to use them. Evidently, that's an accurate description.

When Internet marketing guru, Jim Daniels recently used these words after visiting my http://www.webdesignwisdom.com site, I started thinking about what made the layout *clean and crisp* and decided that there are specific characteristics that evoke this reaction.

Here's how you can make your site *clean and crisp*.


Too often, there's simply too much stuff to see on a webpage. It's too *busy*. Many such pages have a center content column with left and right side columns full of small text, graphics, advertising and whatever else can be packed into the space. And it stretches from margin to margin.

The side columns distract from the center main content column. The visitor is likely to ignore most of what's in the side columns anyway.

If your page looks like this, clean it up, get rid of the clutter.


I don't mean cool as in he's a *really cool guy*, but colors that are part of the cooler spectrum such as blue and green hues. Use and mix the medium to dark shades of these colors.

But be careful to stay away from *overkill*. Too much of these colors make the page dark and ominous.

Your page should use a white background with colors for accent only.


Use lots of white space. White space on the left. White space on the right. White space above, below, and in between.

Use short paragraphs. Short paragraphs create white space. Use bulleted lists and bold headings. Adds more white space and makes the page easier to read. Invites *scan reading* which is the way most web surfers read anyway.

Stick with black text. Use colors for bold headings or to emphasize something within a paragraph.


Long pages tend to use smaller fonts and longer paragraphs. Long pages can be intimidating to your visitor. *I don't have time to read all of that.....CLICK!*

Break extremely long pages into shorter pages. At the bottom of each page add a prominent *read more.....* link so that your visitor can continue to the next page without *breaking their stride*.

HINT: Make the last sentence on the page a *leading* rather than a *concluding* sentence. Force me to click to the next page to find your concluding thought.


You can define areas of your webpage with thin horizontal lines or table column borders. Use subdued or very light background colors for these lines and borders. Very light colors *suggest* a border rather than shouting *BORDER!*. And goes well with the darker colors you use as an accent.

HINT: Set table borders to *0*. Create table outlines by setting cellspacing to 1 or 2. Make the table background a light color. Then make the cell background colors white. Viola! Instant color outlines for each cell in the table!


You can make your layout *fit* the resolution of your visitor's monitor by creating a header and footer that adjust to fit. Set your header and footer table width between 90% and 100%. Then, being a dynamic table, it will stretch or shrink to fit the screen area.

Make sure that the header and footer content also stretches and shrinks well. Check to see that it looks good when viewed at 640 and 1600 pixel widths. It will then look good everywhere in between.

The main content area of your page should be built to fit either 640 or 800 width (your preference) and to be horizontally centered on the screen. Use your accent colors in the header and footer. It can be a simple horizontal line or multiple lines. A multi-columntable that uses the accent colors as a background works well. Use the cellspacing to create a break in the colors betweeneach column. Very nice!


No. You may want clean and HOT! Or, clean and WARM. Just pick accent colors that say warm or hot. But, do try to keepyour layout clean and uncluttered. Your visitors may not realize why your page is welcoming and attractive. But, they will appreciate it!

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

Contact  |  Home  |  Privacy Policy
© ® Site Pro Central (siteprocentral.com). All Rights reserved.

Contact  |  Home  |  Privacy Policy  |  Advertise on this site  |  Reciprocal Link |  Site Map
© Site Pro Central (siteprocentral.com). All Rights reserved. All Reciprocal Links within
SiteProCentral.com are subject to the respective owners copyright.