Design: CSS Websites

This article may be published electronically or in print, free of charge, without alteration to any content and the resource box at the end of the article is included in it's entirety without alteration. A courtesy copy of your publication would be appreciated.

THE KEY TO EFFECTIVE WEB SITE DESIGN by Breal Web Design ************************************************************ The key to effective web site design is good planning. Without planning and organisation, you will end up with chaos. Once you have a design plan, content is the next consideration. This applies equally to new and existing web sites.

To create your plan for a new or existing site, sit down and consider what your site will achieve. Get out a piece of paper and a pen, draw a circle in the middle and mark it 'home'. Draw boxes connected by lines radiating out from the centre circle and mark them with each of the main areas your site will cover. Don't forget a site map if your site has more than 8 or 9 pages. Repeat this process for each secondary circle until you've planned your site. If you've already got a site, do this exercise and include every page on the web site.

Good navigation is vital and poor navigation leads to visitor frustration. Once you've created your plan, you can create logical navigational links. Make up to 8 main navigational links to use on all pages of your site. You don't want to confuse your site visitors with too many options. You can offer more choices later, as your customers drill down into your site.

If you have lots of links, then consider creating pages that list each group of links instead. For example, Click Art Gallery, (www.clickart-gallery.com) has hundreds of pages within the site, but only 8 main links. Two of the main links are to sub navigation pages. The first is an 'arts' page. This lists all the pages on the site only relating to the displayed artworks. The second is a 'services' page that lists all the extra services on the site.

Once your navigation is taken care of, it's time to focus on content. Common questions we hear are, how much information should I put on a page and how big is a web page?

The size of a web page, and therefore the content are dependent on the type of information being provided. However, many site visitors don't want to read a condensed version of 'War and Peace' on a single page. See if you can logically break the content down into easy to read chunks.

Unless your site is an art gallery, keep images to a minimum. Try using simple 16 colour GIF images as they're small and fast loading.

The following list gives you a few good design tips to consider when preparing your web site content.

-> Do make your text easy to read. -> Do use short sentences. -> Do break up your text into paragraphs. -> Do use bullets and lists to make your point. -> Create textual variation with heading size and colour but don't make your text too small to read easily. -> Be consistent - consistency creates a professional image. -> Don't use fancy fonts except as 16 colour GIFs as your masterpiece may not display correctly on every browser. -> Don't use weird text colour/background colour combinations. -> Stick to one colour for each font type (eg Headings - blue, sub headings - teal, main text - black) -> Don't be too adventurous with changing hyperlink colours. Many people, especially newbies, expect blue, underlined links. -> Leave white space to create a 'clean' looking design. -> Ask two or three friends (who's opinions you value) how they find your site navigation and layout.

You can also experiment with cascading style sheets (CSS) and bold, italics or even highlighted words and phrases. For example, this code inserted into your document will create a yellow highlight over the word 'Highlight'. Highlight

All the preparation may seem like a whole lot of hard work, but it will pay off. Over the lifetime of your web site, good layout design and navigation allow your site to grow without creating you massive headaches.

About the author: Breal provides cost effective web site design and hosting with a full 30 day money back guarantee. Web hosting even comes with six months free hosting on yearly accounts. To find out more visit http://www.brealweb.com For a complete list of current articles, send any e-mail to mailto:articlelist@brealweb.com