Web Site Design Basics

(PRWEB) April 30, 2005

If a page doesn’t load in 8 seconds you lose 1/3 of your visitors. Limit your text and limit the length of your lines. Use around 65 characters per line. Long lines are hard to follow. Dashes and bullets increase readability while bold or italics can make key points stand out.

Black text on white background works well on Web sites. On some screens the black and white contrast is far too strong and tires the eyes so then the background should be off-white. If your text is white, for example, make your background image dark. Text on a background with patterns is difficult to read, the text color may blend in, making part of the text impossible to see and read. If an image must be used as background it should not disrupt reading. Make sure the text color contrasts so it is easily read.

San serif fonts work best, and are created to be very readable at small sizes and on most screens. Use different sizes and colors for headings, subheadings and paragraphs and give plenty of space in between, to avoid monotony. Use as few stop words as possible [e.g. and, to, when, etc]. A Web page should have a primary heading describing very briefly what the page is about. It should also have secondary headings for each important section. Use HTML tables to divide a long page into two or more columns.

Some Web sites don’t use up all of the available space. Building ‘liquid’ designs fixes this problem by making the layout fit the screen. They expand or shrink to the available, no matter what browser window size or resolution the user might be using. To do this, specify the width in percentages [e.g. 100%] – the copy inside the table will expand along with it.

Music, images, flash, splash, JavaScript will increase download time. Flash files are especially hard on bandwidth consumption. 25% of visitors leave instead of clicking on the splash page and entering the site.

Limit yourself to no more than 5 or 6 images per page, keep image files 12K or smaller in size, and convert to .gif format. Reduce the amount of colors in the image. Compare file sizes between the tweaked image and the original, in NetMechanic’s free Gif Optimizer. Image editors, such as PhotoShop, have an option to save an image for the Web.

Frames take up a lot screen space, are distracting and Search Engine robots do not read pages with frames! All they see are the outlines of the frames, the ‘frameset’. They don’t see any links, so assume it is a dead page.

Text color should contrast well with the background. Test your site in a variety of browsers for free at http://www.anybrowser.com/ScreenSizeTest.html.

It is common for something to cause the site to disappear, so make a copy and keep it current.

# # #

More JavaScript Press Releases

Web Site Design Basics