Web Design Mistakes - Graphics

This article may be published electronically or in print, free of charge, without alteration to any content and the resource box at the end of the article is included in it's entirety without alteration. A courtesy copy of your publication would be appreciated.

Web Design Mistakes - Graphics *********************************************************** Good design involves a good balance of text and graphic design. How many graphics you choose to use on your web page, if any, depends on what your site is about. A sales letter page about a virtual downloadable product doesn't need a lot of graphics. For example, an e-book page may contain graphics of a book cover (for example of a book cover graphic, see http://www.brealweb.com/writing/freebook.asp), bullets, a header and navigational links which are all small, fast loading graphics files. However, an art gallery will have a lot of graphics, and a visitor to that site will be expecting a lot of images.

The problem with graphics is that they really slow down page loading time. For users of 28.8 KB modems (Yes, they are still in use) the loading time of a page is of primary importance. For those with high speed connections, loading time is unimportant, but bandwidth may be an issue (send a blank e-mail to mailto:bandwidth@brealweb.com for an article explaining bandwidth). So the rule of thumb is, ---Only Use Optimised Graphics Infrequently---

There are a few common mistakes made when using graphics that can be easily avoided and will make your site visitor's experience much more enjoyable.

1. Large and Uncompressed Graphics. Large graphics are needed on the web, but they should be kept in their place. (E.g. high resolution maps, wallpaper images, etc). Where a site has these images, there should be a lower resolution thumbnail linking to the larger image. Then only the people who want the large image will have to wait for it to download.

Even smaller graphics can still have large file sizes if they're not compressed properly. Consider the following:

* JPG files can be easily compressed by increasing the loss percentage - just check that you are retaining enough image quality though. * Reduce the number of colours in a GIF image to make it smaller. * Save photographs as JPG files and clip art type graphics as GIFs. * Decrease the actual pixel size of your image. Although you may have high resolution on your computer monitor, your site visitor may not. Consider keeping your high quality image under 800 x 600 pixels.

2. What About Animated Graphics? With the popularity of Flash movies, animation file sizes can be huge and a person with a slow modem may never get to see your masterpiece.

Simple graphic animations can be optimised in a similar way that static GIF's can. Reduce the number of colours, remove redundant pixels and keep them simple! Look around at other sites for ideas for effective GIF animations if you have trouble keeping your own creative genius under control.

Flash graphics are a topic on their own, but they do require the user has a plug-in so they are able to see your creation. Some people will not get the plug-in, just so they can see your creation, so it may be wise to consider putting your most important content into another format.

3. Creating Backgrounds And Fonts

If you have a favourite, but obscure font you want to use on your web site, then you should use it in a graphic. However, it needs to be kept simple (there's that word again!). It really needs to be readable, so consider the font size and effects you will use on it.

Don't create garish font/background combinations. Dark purple font on a navy background cannot easily be seen, and red on blue is difficult for many to read too. For more information about font design errors, send a blank e-mail to mailto:wdm-fonts@brealweb.com

So when you're making your next graphic masterpieces for your web site, remember these suggestions, and your site will be pleasing to your visitors.