Website Design Tips

Why this is Important

Both images and text should fit on screen and within frames [if you use frames] without having to use the horizontal scroll. There are few things visitors will find more annoying than having to scroll back and forth to read every line! Scrolling vertically is taken for granted, of course - unless you text in columns. Visitors don't like having to scroll back up to the top again to read the second column.

Each page should be pleasing to the eye, inviting your visitors to linger and see what else you have. A splash of color here and there helps, but if you have too many graphics then the page becomes "busy".

How to Fix It

Normally three graphics per text-intensive page [other than buttons, bullets, bars and the background] is plenty, and even fewer if one is animated. For a page that has very little text on it, you can have more graphics. This last type of page is normally an index.html, awards page, rings page, or else a page whose sole purpose is to showcase graphics.

A page that has a lot of text on it is easier to read if there are blank lines between paragraphs. This is done by using a

tag. If you add graphics next to the text, it is often a good idea to alternate sides of the page - that is, the first graphic on the left with text on the right, then later another graphic on the right with text on the left. For more information on aligning graphics with text see Images.

If a page is very long, requiring lots of vertical scrolling to read everything, then it is normally best to break it into two or more pages - even if it loads quickly the way it is. If there is no logical place to break the page, or if the page is an archive that is much better left whole, then having a set of internal links helps. You can put a table of contents at the top of the page, with links to various places on the page. And right before each new heading, you can place a "Back to Top" link. For more information see the HTML Goodies Tutorial on Page Jumps.

Each html page should have a descriptive title in the HEAD section. This is what will show on the title bar of your browser, and on your bookmark for that page. The title on this page is "Website Design Tips". You want to choose something that will help people remember which website that bookmark belongs to. For more information see the HTML Goodies Tutorial on HEAD Commands.

Lastly, avoid having links at the far right of the screen - and most especially allow some blank space in the bottom right corner. This will minimize problems with the Geocities watermark. Even if you can't see it because your browser isn't the latest version, more than half of your visitors can. You don't have to keep the entire right side clean of text, though, as long as the bottom right corner is empty.

For more information see HTML Goodies Tutorials on Layout.

---

Next tip

Previous tip

Index of tips