Web Publishing for Genealogy

Designing Your Web Site

Home
LINKS to Web site mentioned in the text
REVIEWS
Where and how to ORDER
Finding Genealogy on the Internet The Genealogist's Internet
Valid HTML 4.01!
Valid CSS!

Using Graphics

An obvious way to add visual interest to your pages is to add some graphics. There are three distinct ways of using graphics on Web pages:

Illustrations:
images which are there for their pictorial content - a photograph of an ancestor, a map of a village, a scanned image of an original document.
Icons:
images whose sole function is graphical - to highlight certain points on the page, to provide navigational assistance, or just to add visual variety to the page.[1]
Background Images:
images which form a repeating "tiled" background to the whole page.

Before you fill your pages with graphics, however, you need to bear in mind three problems they bring:

  • they slow down the retrieval of the page for the reader
  • illustrations can use up relatively large amounts of your Web space
  • too many graphics can make a page look muddled.

If you have a reasonable amount of Web space and illustrations are essential, then one solution to the first problem is to have small versions of images (often called thumbnails), which can be clicked on to load a larger, higher resolution version of the same image. This means that only those readers who are interested in the full image need download it.

However, while illustrations may take up a lot of space and slow downloading, a set of icons which can be used to highlight certain information or provide navigational help for your readers, will be well worth the small amount of space they take (quite apart from helping to give your pages a consistent design). This is because each icon only needs to be stored once, no matter how often it is used on your pages, and downloaded once in any visit to your site. The look of pages can be significantly improved by using, for example, coloured bullets for lists, or an icon to take people back to your Home Page.

While you will probably have to create your own illustrations, by scanning photographs and documents, there are thousands of icons available on the Web which you can borrow for your own pages.

You can also save a copy of any image you find on another Web page (see your browser documentation if you do not know how to do this), though of course you may need permission from the copyright owner before using it. If you want to create your own icons, you'll need some sort of graphics package.

Another way of providing graphical variety is to use a background image for your pages. The background image is "tiled" to form a repeating backdrop to the whole page, but you only need one copy of the file. Also, if you use the same image on all your pages, the browser will only need to download the image from the server for the first page. A popular use for backgrounds is to have not a picture, but a texture providing a seamless backdrop to the whole page.

Background images have the disadvantage of increasing the download time of your page, and, if chosen carelessly, may make text difficult to read. But a well-chosen background can help to make your pages distinctive and visually more interesting. Again, there are plenty of background textures available for downloading; or, with suitable software and graphics skills, you can create your own.

--> NEXT: Image Formats

4. Designing Your Web Site