There are four basic rules to follow for good website design:

1. Easy to Read
2. Simple Navigation
3. Consistent Design
4. Light Page Weight

1. Easy to Read

First and foremost, your website should be easy to read. People should understand right away what the website is all about. When you write your content, remember that most web page readers do not read every word of a page. In fact, they only scan quickly to find what they want.

Break up Your Pages

Since people scan websites for quick information, break up your pages and use headers between major ideas. If possible, use headers between each paragraph. But always us good writing practice - sometimes a single concept may span over two or more paragraphs. Additionally, avoid long paragraphs that run on and on. You should break up any long paragraphs into smaller paragraphs.

Color and Font Matters in Easy Readable Website Design

Using high contrast colors between font and background helps website readability. White background against black text may seem stark, but it is very readable. If you want to make a web page easy on the eyes, try an off-white background and a dark gray (almost black) text color. Another easy to read combination is black background with white text color.

Things to avoid with content color:

• Avoid using vibrant background colors like green, purple or yellow. Such backgrounds make any color text difficult to read.
• Avoid using a large graphic image behind your page text.
• Avoid using vibrant text colors as they cause eye strain for the reader.

Fonts Matter

Rather than give a million examples of different fonts, I will boil it down to one simple statement:

Simple fonts are the best; the more fancy the font, the harder it is to read.

Use standard fonts. Many browsers only have the standard font set (there really is no “standard”, but there are fonts that are included on most browsers). These include Arial, Verdana, Tahoma and Times New Roman. Use one of these fonts. If you use other fonts, your readers may not have them – so they will see something different than you see.

Keep in mind keywords that users may type into a search engine to find the information your website provides. Use these keywords frequently in your content, however, do not over use them. The percentage of keywords compared to the rest of your text is called “keyword density”. Use a keyword density checker to be sure your keyword density is between 5% and 7%.

Use a Standards Compliant Browser

Special Note: When developing and testing your site, use a Standards compliant browser like FireFox. If you make your site standards compliant, it will work in almost any browser, including MicroSoft's Internet Explorer (IE). Also test your site using the latest and last browser versions of IE (IE6 and IE7).  TredoSoft has a free installer that will install multiple versions of IE and allow them to run separately from IE7 and on the same machine - at the same time.  It works great!

2. Use Simple Navigation

Website navigation is the menus and links that take the reader to other places on the site. When designing your website, keep in mind how people will get around. Keep in mind what they will be looking for. A visitor to your site should be able to get to what they want within three clicks of their mouse.

Have multiple navigation points. Use a top menu and repeat that menu at the bottom. Use a left or right navigation menu. Use links within your text.

Side note: Using links within your text to other areas on your site is also a very good search engine optimization (SEO) technique. When you use links within your text, there are two ways to do it:

1. The wrong way: "To find out why search engine optimization is important, click here."
2. The right way: "Search engine optimization is very important."

The right way uses link text that describes what the link is about. When search engine spiders (programs that automatically browse websites and index the contents) visit your site, they “read” links. If the link is descriptive, the spider can index it into a subject or keyword category. If the link is a “click here” link, the spider has nothing to work with until it reaches that page.

The links within your text is called cross linking. Cross link as much as possible when it makes sense to do so when writing your content.

3. Consistent Design

Visitors to your site should not be constantly presented with different layouts. At most, one or two layouts should be used. As a reader browses your site, they should be able to get used to looking in the same place for your content, the same place for your navigation and the same place for your sub-navigation. You get the point.

4. Page Weight Should be “Light”

There is a thing called page weight. That is the total size of your site in bytes – code, text and images. Your site’s page weight makes a huge difference to your viewers. The lighter your site, the better it will be for your readers because it will download faster. The faster it downloads, the faster they will get to the content.

What is Means to be Light

• No large elaborate images.
• Fewer images are better.
• Image files should be optimized for the web at no more than 72 dpi
• Image files should have as small a dimension as possible for the given design.
• When solid color backgrounds are used, use a table td bgcolor attribute or a background style attribute.
• When your design requires a gradient background, make it horizontal or vertical (not diagonal) so that you can use a small image “strip” and repeat it.

How Big Should a Web Page be?

Some say 64K is a good maximum size for a website page. 64K is a good maximum, however it is still, in my opinion, huge!  A smaller page is better. 25K is good, 15K is even better. There is a balance between design and function. It is a good idea to focus more on function.

As you develop your site, you may want to put pages on your web host server so you can test it as you go.  Once you get your website up online you should take a moment to test the page weight of various pages to be sure you are on track.

• Use linked style sheets
• Use <div>s instead of <table>s where possible
• Use simple repeating backgrounds for effect

Summary

Websites should be easy to read, easy to navigate and find information, have consistent page design and have pages light enough to transfer quickly to any reader regardless of their connection speed. Follow these four basic principals and you will be on the way to building a successful website.