Build a Website: Design Tips

In the interest of better Web design, we offer some tricks to improve graphic load time and presentation:

1.Be careful you don't have images (such as a banner or a masthead) that run across the top of your screen and off the right side of the monitor. This can happen if you are designing your web graphics using a high-resolution monitor. Many people still set their monitors to a resolution of 800 x 600 pixels. If you're working on a higher resolution monitor, the best way to avoid this problem is to keep graphics at a width of 750 pixels or less.

2.Save images as "interlaced." This allows a .gif file to load in the browser as a fuzzy, pixilated picture that slowly comes into focus. Whether this is a pleasing effect is a matter of taste. Test your graphics both with and without interlacing to see for yourself how it looks.

3.If you want to display large images, such as photos, give your visitors an opportunity to preview them. The best way to do this is to make a "thumbnail" or miniature version of the graphic, which links to a larger version of that image. If they want to view the larger version, they can click the thumbnail.

4.Typically, a border is displayed around each linked graphic, which may not be visually pleasing. If you don't like the way it looks, eliminate it by adding "border=0" to the <img> tag. You can also add additional tags to align the graphic to the right or left of text or to the top, middle, or bottom of a graphic. These extensions may look different in different browsers, so test your pages in several browsers to see how they look, then make adjustments as necessary.

5.Finally, as a courtesy to people who may be reading your pages in text-only mode and for those who are visually impaired, include an "alt" tag inside the image tag with a brief description of the graphic.

Last update: Jan 13, 2010