Graphics
One of the main factors in creating a successful website is to keep the page load times to an absolute minimum. Broadband is becoming increasingly common but with it comes an expectation of quicker performance. It is a great mistake to rely on your users accessing your site via a fast link as it results in unoptimised images and code which will push load times up and potentially alienate customers. There are also legacy users who still browse via modems to consider, and the increasing number of people connecting to the web using wireless devices such as PDAs and phones.
For this reason, the best way to design for the web is to use images sparingly and rely instead on colours, lines and typefaces to demarcate different areas of the layout. Typically, a good looking website can be constructed using just a few graphics: logo, main image/header, background.
Headings & Navigation
It is a good idea to avoid using images for navigational elements and headings if possible. This reduces the download times and also makes these elements more accessible to search engines, wireless devices and disabled access devices such as screenreaders. If it is necessary to style headings and navigation then use of re-usable assets is recommended. For example, use a background that text can be overlaid upon instead of creating images for every heading.
The same applies for navigation - create a single graphic which text can be overlaid upon. This removes the need for individual graphics for each navigation link, which brings other advantages such as reducing the time required for adding pages later.
It is less important to use this technique with navigation than with headings because navigation is generally persistent across all pages of a site. Once it’s downloaded the user will have it in their cache and won’t need to download it again. If your navigation absolutely must consist of graphics then go for it. Bear in mind the impact this will have on the overall page weight when designing the rest of the page though.
For headings, every instance is likely to be different so it’s much more important to re-use assets.
Backgrounds
Attractive backgrounds can be created by using repeating images. Images can repeat in three ways:
- Horizontal: the image will repeat only in a horizontal direction
- Vertical: the image will repeat only in a vertical direction
- Both: the image will repeat in both horizontal and vertical directions
Use of repeatable images keeps the page down because only a small portion of the background needs to be downloaded. The type of repeat does the rest. Typically, slices between 10 and 20 pixels wide/tall are used for horizontal/vertical images. Why not use just 1 pixel width/height to further shave the download times? Because some older computers and browsers can end up choking when trying to repeat such a thin image.
Bear in mind that this technique does not need to be used purely for the background of the entire page. It can be applied to headers and footers, sidebars, boxouts, headings, etcetera...