Website Design: Your Website Must Look Good, Read Well, Have Useful Information, Relevant Graphics, And Must Download Quickly!

Backgrounds

A big mistake that is all too easy to make is to use technology simply because it is there, and to use many colours, fonts, and graphics because you have them on your computer!

The technology wizards tell us that it is easier to read text on a computer screen with the format of dark background and light text. Indeed, the original word processors in the days before Windows™ used blue backgrounds with white text.

Microsoft Word still makes this option available, and I have only used it about twice in the past 15 years!

This Website uses a white background with black text, because that is what most of us are used to reading. Many graphic designers will use colourful sidebars and boxes with weird background colours and peculiar mixtures of colour with the fonts, and these are so difficult to read—unless you are under 30 with 20/20 vision, and most of us are not.

If you are designing a Website for a mature market, make sure you use colours that they will appreciate.

 

Printing

Many people like to print a Webpage, because they want to keep a hard copy for reading at leisure or for storing in their archives. If you have used a dark green background with red and yellow text, you can lose these visitors.

You will find that these Websites now provide printer-friendly versions of a Webpage, and if your Website is going to use colourful backgrounds, I advise this method. You may have noticed that this Website provides a printer-friendly version from the link in the top-right corner of every page.

 

Screen Size

The 800 x 600 screen resolution was the most popular for the past 15 years or more; before that it was the 640 x 480 resolution, and there are still a few old computers operating with that resolution today.

Increasingly popular, especially with high-tech modern computers and laptops, is the 1024 x 768 resolution and higher. Many Web designers use a high resolution because of the increase in space on the screen. Try it yourself for one week, and you'll never go back to a smaller resolution.

Some 60% of visitors to this Website use this higher resolution.

The natural inclination when designing a Web page, is to set the property to 800 x 600 so that it will show on nearly all computers. Unfortunately, the vertical scroll bar will take up width, and this means the horizontal scroll bar will show on all your Website pages. You can easily prevent this with the correct design of your pages.

The common monitor resolutions for a personal computer are 640x480, 800x600, 1024x870, 1280x1024, and 1600x1200 pixels.

They are slightly different for the Macintosh: 512x384, 640x480, 832x624, 1024x768, 1152x960, 1280x1024, and 1600x1200 pixels.

 

Use CSS

Many amateur Websites are created by using a series of nested tables, and while you can adjust these to view correctly on your computer, they may well look odd when downloaded off the Internet. A table is best used for dynamic data that is downloaded from a database.

This Website uses CSS (Cascading Style Sheet) for the design and layout of each page and feature, including fonts, colours, forms, and other objects. It will ensure that your pages appear similar throughout the Website, and this makes your visitor feel more comfortable.

A CSS document is basically a text file and is written in plain English to a specific format:

/* CSS Document */
.HeadingNarrow {
PADDING-BOTTOM: 5px;
FONT: bold 24px Georgia, Times, serif;
TEXT-TRANSFORM: capitalize;
COLOR: #000000;
PADDING-TOP: 5px;
TEXT-ALIGN: center;
padding-right: 50px;
padding-left: 50px;
}
.CommentCentre {
PADDING-RIGHT: 150px;
PADDING-LEFT: 150px;
FONT-WEIGHT: normal;
FONT-SIZE: 12px;
FONT-STYLE: italic;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
EXT-ALIGN: center
}
.CopyNormal {
PADDING-RIGHT: 15px;
PADDING-LEFT: 15px;
FONT: 12px Verdana, Arial, Helvetica, sans-serif;
TEXT-INDENT: 15px;
TEXT-ALIGN: left
}.

 

Page Length

When asked how long should a Web page be, the guru answered "as long as necessary". The emphasis is on the word necessary, and the comment does not give free license to develop extraordinarily long pages that never seem to end.

Web designers, and the Internet millionaires peddling their latest software that's going to make us all rich, keep all relevant information about the main topic on the one page for a very good reason:

The visitor is more likely to click "close" than "next".

We are all in a hurry, and if we cannot find it fast, we do not bother to look on a new page that might take 10 or 20 valuable surfing seconds to download. Unless you give them a valid and compelling reason to stay on your Website and open the next page.

 

Using Images

Images and Graphics are excellent for using on a Website to illustrate a particular item, service, or issue—one picture is worth a thousand words!

Unfortunately, that is not strictly true on the Internet for a number of reasons:

1. The suitability of the image. Does it add power to the copy, or is it merely decoration. Every image you use must have a purpose.
2. The size of the image; it's physical size or appearance, and it's file size, which affect the download time—the time it takes to appear on the visitor's browser window.
3. The position of the image on the page. Is it with the copy that it illustrates, or is it 'floating'? Where pertinent copy is wrapped around a small image, you provide effectiveness.
4. The image may not have been optimized for use on the Internet with a Web browser. This subject can be read in our Website Guide.
5. It is advisable in most instances to put a small, optimized image on the page, with a link to a larger or full-size image. You can see this feature in action on many Websites where you can click the thumbnail picture to see a full size image.

 

Templates

One of the great features for ensuring continuity and a regular appearance to your Web pages, is to design your first page and then save it as a Template.

You can then use this page as the format for all future pages, but there is one other great feature of using Template design that makes them imperative. Let's imagine that you have 25, 100, or even 350 or more pages on your Website, and you decide to make a small but significant change to the design.

With a Template, you simply amend the Template page, say change the background from white, to cream, and immediately this change is reflected in every page on your Website. Imagine how long it would take to make the change manually!

You can also download free Webpage templates, or purchase them from Web design companies online. This ensures a professional appearance to your Website and you might like to check this feature.

Click Here for Free Website Templates

 

Frames

The use of frames is an excellent method for designing your Web pages, especially when the content of the top frame, or the left frame is to stay constant, and only your main frame is to change.

However, the downside is that many browsers don't like frames and will not display them correctly. Also, many Web surfers do not like them, and say they make the Website look as if it's built by an amateur!

You have to decide who is your target audience, and is your information best displayed in frames to your market...if the answer is yes, then use frames.

They are best used when you are going to turn a Website into an eBook!

 

Layers

You may not be familiar with layers, and the best way to think of them is to imagine they are sheets of acetate laid one on top of the other. Each sheet has different information, colours, graphics, images, or data for the visitor.

You can give layers attributes, and decide which will load in a browser first, and which will remain on top of all the others.

Once again, the problem is that layers will appear differently according to the various browsers, and the settings of each browser. If the text is set to large, then the frame size will change and hide others, or if it's a fixed size, some of the text can disappear.

You can make a layer appear or disappear, according to the controls you apply. Click on the show and hide links below to see an example of this process:

Show | Hide

 

You can also close it very easily with the link above, or by using the HIDE link inside the layer. The designer also put a hyperlink that opens another Web page inside the layer.

You can put in graphics, different colours and many other features using this facility, but always remember that older browsers may not display them.

Subscribe to our free Newsletter for more tips and information

 

Home Page > Website Publishing —Design > Next

 

---

© Copyright 2001-2007. Power Business Publishing. All Rights Reserved.