Web Design Information

This section has web design information – how to design websites and web pages. It applies to any website including ecommerce and small business websites.

By web site design I mean designing the actual look and feel of the site, designing the navigation system, and deciding the way your content will be laid out.

By the time you come to the design stage you need to have your site concept nailed down, a good idea of your ideal customer, and have planned out your content, because your site design has to relate to all these things.

Go here if you wanted to learn how to build a web page

Design Isn't Everything

Some web design books I've seen would have you believe that design is the major part of building a website.

Design is important, but content is more important. A superb design still won't make your visitors buy.

Visitors are looking for information. (For this page, it's web design information.) Even for e-commerce sites, if you provide useful and helpful information you'll be miles ahead of your competitors, with happy, willing-to-buy visitors.

Don't get me wrong. You do need a functional design that is tidy, easy to use, easy to read and that doesn't put people off. Visitors need to be able to find what they're looking for, and your site does need to reflect the values of your target market. Making it attractive is a definite plus.

But you don't need to spend a fortune on graphic designers and interface experts to have a respectable design, and you don't need to be a talented designer yourself.

Content Rules

One of my favorite sites, www.mysuperpc.com/ has a really basic design. Even the links to other pages are just text links at the bottom of each page. It's nothing fancy but it is easy to use. It has a Google page rank of 4/10 which is respectable, and its Alexa score puts in in the top 0.2% of sites for traffic which is excellent.

It's not the design that has made the difference, but the content. The site has superb information written by someone who obviously knows what he is talking about, and it is really helpful.

I have other favorite sites with poor design simply because they have superb information that helps me, that I can't get anywhere else. Of course if I found the same info on a better designed site I would go there.

The bottom line is, superb info with poor design will outgun poor info with superb design. Superb info with good design will outgun superb info with poor design.

What You Need In Your Web Design

• Your web site needs to be tidy and easy to use.
  
• Navigation needs to be obvious.
  
• Text has to be easy to read, even for people without 20/20 vision.
  
• Every page should be within two clicks of the home page.
  
• The design needs to suit your target market.
  
• Pages need to load quickly.
  
• Visitors need to be able to view pages without scrolling sideways. I design for an 800 pixel wide monitor.
  

What Your Web Design Shouldn't Have

Your design absolutely cannot afford to turn people off so:

• Don't use a flash page. Thats a really nice-looking home page that is nothing but an enormous graphic that takes forever to load. I normally hit the back button before they are loaded.
  
• Don't have flashing icons, they distract from your message.
  
• If you have animated gifs, only have them cycle three times. They're distracting too.
  
• Don't have too many colors. You should be able to count all the colors on the fingers of one hand.
  
• Preferably don't have a background like a watermark that shows through the text. It makes text harder to read.
  

Web Design Software

Nvu is free and quite adequate for most web sites. I've used its predecessors, Mozilla Composer and Netscape Composer a lot. My first website was made with Netscape Composer, and Nvu is more advanced. The help could be better though.

Frontpage is very popular. I haven't used it at all, but my non-geek sister is building her very first website with it.

Dreamweaver is excellent but it is expensive and I've found that I haven't used anywhere near its full capabilities. It's more for professional or semi-professional designers rather than someone out to build one website.

Site Build It! (SBI) has a built in block by block web page builder that is a bit clunky but does the job quite adequately. It's far easier to learn to use than any other web page editor I've used, and it also teaches the fundamentals of good page design.

Importantly, SBI has all the other tools you need for a successful web site, plus it automates the tedious time consuming tasks.

If you do a search you'll find lots more web design software.

My opinion? Go for Site Build It. It has everything you need, it will simplify your site building, it'll save you time, and it's cheaper than buying everything you need individually.

Deciding On Your Site's Look And Feel

You need to design your web site to suit your target market. A site for four-wheel-drivers would have a different and more casual approach to a site for chartered accountants.

You can use your common sense and come up with a successful look and feel. Probably a better way is to check out other sites in your niche, particularly ones that are ranked highly. Browse a few of them and get a feel for how they are designed.

If you find one that is representative and that appeals to you, use it as a starting point for your design. Don't copy the design, that just isn't right. Particularly don't copy the source code. Use the design as inspiration.

Working Out Your Site's Navigation

If you're building your own page template you'll probably want to use a simple navbar because it's a lot easier to make. Before you start building a navbar though, you have to know how you'll be organizing your content.

You really need all your pages accessible within two clicks of the home page because it's easier for visitors to find what they're looking for and because it's easier for the search engines to find and index your pages.

That means organizing your content into three levels with your home page as level one, which links to level two pages through the navbar. Level two pages then easily and naturally link to level three pages through links in the content itself.

For example, if your site concept was “Simple Meals For Time Challenged Moms” level two may be soups, chicken dishes, rice dishes, etc and level three might be quick vegetable soup, tomato soup, stir-fry chicken etc.

Simple Navbars Can Do The Job

A much more simple left-hand navbar like the one on this site is all that is needed. It does the job fine and it is quite acceptable to visitors.

You'd probably get away with text links on the navbar for a lot of sites, but buttons do look better, particularly buttons that change when you move the mouse over them. Of course, that takes more work.

If I build my own template, I put the navbar in a virtual include. That's a separate page that only contains the navbar, and that is called up and used by all the other pages. That way when I add something to the navbar I only have to change one page, not fifty or a hundred.

How To Make Text Readable

People read differently online, and it is also harder to read online.

People tend to skim to find what they're looking for, so use lots of headings and make sure they tell what you're talking about. Don't use cryptic headings that make people guess what they mean, because your visitors will head off to another site that's easier to use.

Your headings don't have to be boring. Make them generate interest and get your targeted visitors to read on.

Use lots of white space because it makes for easier reading on a computer screen. That means short paragraphs with space between them.

The best fonts to use for online readability are sans serif fonts like Verdana and Arial.

You should use dark text on a light colored background. Black on white is easiest to read, but a light colored background is okay.

Personally, I don't like page backgrounds with a washed out watermark-like image behind the text. It can make the text hard to read, and just because it looks fine on your monitor doesn't mean it will look like that on everyone else's monitor.

How To Make Changes Easy

What happens if you've just built 50 pages and then decide that your all your page headings should be red instead of purple, and that they should be in a Times New Roman font instead of Arial? It can take a long time to change 50 pages.

The best idea is to use cascading style sheets which thankfully is a lot easier than it sounds. All the styles are on one page that is then called up and used by every other page. If you want to change the text font,or a heading color, you just have to change that one page.

Virtual includes let you change an item on a number of pages at once. They're excellent for navbars.

You can use them for footers as well if you want the same footer on every page. Or if you want an advertisement on a lot of pages you can do that as well. Then if you want to change the ad it's dead easy. Change the virtual include and every page that uses it will change.

Building The Page

Some software will let you save the page as a template, or you can save it with a name such as mytemplate.html and use that to build all your other pages. All you have to do is plug in the text, title, images, meta-description, meta-keywords etc. and save it under its proper file name e.g. quick-vege-soup.html.

Test Your Website Or You May Lose Visitors

Different browsers can render the same page differently. Make sure you test your website at least in Internet Explorer and Mozilla Firefox. If you have access to a Mac, check on that too. Also, you should run your page through an html validator which will highlight any errors.

One big problem I found was that IE and Mozilla were not case sensitive with hyperlinks, but Mozilla Firefox was. I built my pages with Mozilla Composer, checked them in Mozilla and IE and they were fine. Months later I started using Firefox, and it would not find some of my pages because I had capitals in my filename but not in the hyperlink. Big problem! So check in as many browsers as you can, particularly IE and Firefox.

Check For Usability

So get family or friends to use the site and see how they go with it. If they have problems with the navigation or any other aspect of the site, change the design to make it more user friendly.

The Easiest Way To Design Your Web Site

1, Check the other websites in your niche, particularly high ranking sites, and get a feel for what suits your target market.

2, Then use a template that suits your market. www.templatemonster.com has templates from about $60 up. Site Build It has templates as part of its complete suite of web tools. Or, do a search on the search engines.