Designing
Web
Usability
Written
by
the best-known guru
of usability.
Secrets
of
Successful
Web Sites
Siegel gives
a perfect blueprint of ways to
plan,
develop and design websites
that work.
Creating
Killer
Web Sites
Another
enlightening book by
Siegel, which (in my opinion) counts as the "creme de la creme" of
website development books.
Don't Make
Me Think
If you read
this book
along with Nielsen's books,
and follow their advice,
visitors will
love visiting your
websites.
Volume
I, Issue 6
November 2003
printable version
Chris
King, Editor
By
subscription only, this monthly e-newsletter will be loaded with short, "down
and dirty" tips
to help you with solving the everchanging and growing puzzle of
the Internet. This e-zine will also serve as a place to ask your questions
and find the answers.
We take it for granted that visual images will enhance our website. There are many factors that will make this statement untrue. Yes, many of the people who visit your website will be visually oriented and will react positively to your graphics – that is, if they are used properly. This month I will cover the basic types of graphics, suggested graphics programs, and how to avoid long download times. This is such a huge topic that I will be adding more graphic tips in the future.
TIP #1. There are three major types of images used on the Internet:
-
GIF (Graphical Interchange Format): advantages include the fact that GIFs don’t lose any detail when compressed or decompressed. They are perfect for hand-drawn art, icons, logos, and headlines, but are not optimal for pictures and photos with many color.
- JPEG (Joint Photographic Experts Group): more efficient than GIFs when compressing large photos with many colors. However, the “lossy” algorithm used results in some loss of detail when images are saved and viewed in this format. JPEG files are sometimes not as detailed as GIF images, but can offer as much as a 35% improvement in file size and compression (we will discuss the reasoning for smaller file size in a moment).
- PNG (Portable Network Graphics): offer a compromise between the GIF and JPEG formats. They offer enhanced compression among images and can handle multiple colors and larger pictures well, without using a “lossy” compression scheme. Even though they offer an excellent choice, PNGs are still not accepted by the earlier browsers, so I caution using them.
TIP #2. Graphics programs of choice:
-
Adobe Photoshop: This top-of-the-line program is the program of choice for most graphic designers and is excellent for both Internet images and print work. It offers a wide range of tools, takes some time to learn – but is worth the learning curve and the price.
-
Jasc Paint Shop Pro: Reasonably priced and a program I use often for my website images. It offers many choices, is straight-forward and works beautifully for website photo work (offering a wide range of effects to please any artist).
-
Macromedia Fireworks: I love using this program, because I do most of my website design and development work in Macromedia Dreamweaver, and the two programs work seamlessly together. I will admit it took me some time to get used to using Fireworks (another learning curve), but now I wouldn’t be without it.
TIP #3. We have to worry about the file sizes of our graphics because large files add to the download time of a web page, and this is the most common complaint voiced by those who surf the web. If a page is taking too long, your visitor will just go somewhere else in a hurry.
TIP #4. To avoid large graphic files and other factors that result in long download times:
-
Prepare images that are reasonably sized (I try to never go beyond 300 pixels in width or height). What if you have a group of stunning photographs from a recent trip, and know that friends and family would like to see the larger photo? Make thumbnails of each, and then post each large, separate photo on its own page, so that if someone wants to view it, they can click on the thumbnail.
-
Size and compress your graphics before placing them on the website. Many of the web authoring programs (and even HTML) will allow you to resize an image once it is placed on the web page. It will appear to be the smaller size, but when it is downloaded, it is still the original, large size and then is resized by the code (thus slowing down the download).
-
Specify the actual dimensions of the HEIGHT and WIDTH parameters. Do this for all graphics on the website (even if they are the navigation buttons).
-
Avoid background images. Adding a background image can also slow the downloading, and, in most cases (my opinion) detracts from the overall look of the site, making the type difficult to read.
-
Use the same graphics over again. Once a graphic is downloaded, it is stored in the visitor’s cache. The next time the image is used it will be pulled from the cache and therefore will load more quickly than the first time. Repeating images (for example, the logo, or the same banner) throughout the website, will add an element of consistency throughout the site.
I hope this has taken some of the mystery out of usig graphics. In the next issue, we will delve into more graphics information.
Remember, send your comments and questions to me at chris@creativekeys.biz. I love to receive feedback and will answer your questions in future e-zines.
If you would like to subscribe to this e-zine and receive five free Internet tips, send an e-mail to subscribe@creativekeys.biz with subscribe in the subject line. If you ever wish to be removed from the mailing list, just send an e-mail to unsubscribe@creativekeys.biz with unsubscribe in the subject line.
Chris King
P.O. Box 221255
Beachwood, Ohio 44122
(216) 991-8428
http://www.creativekeys.biz
