Welcome to BATW.NET - Emphasing well organized, fast loading websites with high information content.

BATW Site design Tips, Design Mistakes and "Clever Things" that have a cost.

copyright 2003, Bonnie Dalzell
may be reproduced as long as credit and links are maintained.


LAYOUT:

I personally like the site design technique of using frames to provide an
invariant menu and a separate, replaceable, display field. However sites
with this layout as the primary page are not properly indexed by many of the
search engines. This leave you with two strategies. (1) Have an information
filled, non-frame, introductory index.html page which then directs your visitors
to you menu in a frame page or (2) Have a non-frame page named something like
about.html  which is the default page that you point the search engine to when
submitting the page to the search engine.

READABILITY:

Textured backgrounds can make text unreadable. If what you have to say is
important try printing out a hard copy version of your text over you background
and see if you can read it. Remember different browsers are going to display
things differently for your visitors. If you use a textured background - the
more subtle the better.

Always specify both the background color and the text color in the body tag. If
you specify one and not the other some browser's defaults will leave you with an
unreadable page.

GRAPHICS:

Although it is a great way to show off your graphical skills: avoid using the
site design in which the first page consists only of a spectacular graphic
presentation with a link for "enter here" or "click to enter" somewhere on
the page.

While this may get you some site design awards it is only entertaining to
your site visitors the first time they come to the site. Useful sites are
visited frequently and the visitor may become impatient if the site takes to
long to load. Similarly sites that are seeking to sell things to visitors may be
bypassed if nothing useful is displayed after a minute or two of loading.

Speaking of loading times. Most of your visitors will not have high speed
internet connections. Minimize the number of images on a site, this includes
avoiding use of multiple colored buttons as links. Every image loaded slows down
the opening of the page.

Dividing a large image into many smaller segments does not speed things up
generally, the important thing is the size of the files in bytes, not their size
in pixels. If images are saved with fewer colors (smaller bitplane) then they
will have a smaller file size.

Thumbnails are a good way to present a preview view of a large image quickly,
allowing the visitor to look at the expanded view of the image if they want to.

Although the HTML img tag has "width =" and "height =" arguements these should
reflect the actual size, in pixels, of the image. They should not be used to
"scale" a large image into a thumbnail to fit the page. When they are used to
describe the size of the image then all of the text on the page can load and
become readable while the images are still loading. If you try and use them to
scale a thumbnail presentation of the image two things happen.

(1) It takes just as long to load the image as it would if it was being shown
full sized on your page because it is the file size that is important.

(2) Many browsers will not scale it correctly anyway, so for some visitors the
page will not look the way you planned.

QUICK PAGES:

The <pre> and </pre> tags can be used to quickly set up text-only web
pages. Links work from within a block of text delineated by the <pre> and
</pre> tag pair. However some browsers do not properly parse the <pre> tag.


Have a question or a suggestion for this page? Email bdalzell at Q I S dot net
Home ] [ An Introduction to Web Page Construction Tutorial on constructing a simple web page.