Creating Dynamic Web Sites / Chap. 1: Interacting with Graphics | WebReference

Creating Dynamic Web Sites / Chap. 1: Interacting with Graphics

CHAPTER 1: Interacting with Graphics

Say It in Pictures

[Note: Originally published in 1996, it appears as though the support site for this book is no longer available. We have therefore removed the live links to it - Ed.]

Pictures make Web sites exciting. They add visual interest, attract return viewers, convey emotional impact, communicate your message, and fundamentally they're just cool things to have in your page. And unlike some other media, pictures-whether scanned photographs or custom, computer-generated imagery-don't have to be executed, rewound, or restarted: they wait on the screen until someone selects another hyperlink or hits the Go Back button.

Like text, a good picture conveys its message automatically and continually, without requiring the user to do anything to it. In Chapter 7, we'll look at some additional reasons why, and cases when, pictures are really the right choice for the message you want to convey. But if you're not careful, the way you use pictures can make your Web site frustrating, difficult to use, and annoying-in short, an experience that people won't want to repeat. And the factors that determine the success or failure of your images start from the moment you begin laying out your image, continue through the process of capturing it, and finally come home to roost when you choose how you store it to transfer to your Web site.

This chapter explores the following important questions related to your interaction with graphics over the Web:

This chapter also includes an overview of the kinds of tools that you will need, for example,

Where Does Interaction Begin?

When most people working with computers hear the word "interactive," they think it means point and click: you see something on screen, move the mouse over it, and you click, then something happens. That's one kind of interaction, but your readers experience many others while browsing your Web site.

One of the best pieces of information to remember while designing your Web page is the concept of the moment of truth. I've adopted this key idea from Karl Albrecht and Ron Zemke's book Service America! Containing several useful lessons, their book is valuable for anyone in the "information business" because it really suggests that we, purveyors of knowledge, are less in the business of providing a product-namely, information-than we are in the business of providing a service-namely, education. Throughout this book, but especially in Chapter 7, we'll work on distinguishing the product, information, from the service, education.

For now, though, let's begin by looking at "moments of truth." These, as Albrecht and Zemke define them, are the countless small, defining actions (or interactions) in a business that help the customer decide whether or not he or she is satisfied with the interaction so far. They talk about "50,000 moments of truth" as being the scope of opportunities to interact with a customer in this kind of make-or-break way. In the following exercise, consider an interaction where you were the customer-at a dry cleaner, buying a car, ordering a bowl of noodle soup, waiting in line at the hardware store, or calling in an order from a catalog.

In a traditional business setting, the moments of truth often begin with what's called "ring time"-how long it takes someone to answer the phone when you call to order a pizza to be delivered, for example. They may begin when you walk up to the information counter at a book store and find the staff engaged in a highly entertaining conversation about their annoying roommates. Later moments of truth involve the attitude of the person behind the counter, the length of time it takes to fill your order, any mistakes you find in your order when it arrives, and others.

Exercise 1: Your Own Moments of Truth

This exercise will be fun-and although it may not seem to have anything to do with Web sites, image file formats, or hypertext, it may well be the most important piece of information you get from this book. If you send me email to complain that this exercise doesn't have anything to do with Web sites, I'm going to ask you one question: did you do it? If your answer is no, you have nothing to complain about.

Do this exercise-do it as though you were getting graded on it. Believe me, your Web site readers will grade you on what you get out of it.

For this exercise, take this book with you so the questions are handy and take paper and a pen so you can make notes. On your next lunch break, visit an unfamiliar restaurant. It can be a chain, a local mom & pop operation, a fancy restaurant or a fast-food dive, as long as it's not your usual place. You want fresh insights and no background (good or bad) to color your impressions.

For each of the following steps, note both the characteristic that the step asks you to note and the emotional impression that this characteristic makes on you.

  1. When you arrive, jot down how you're struck by the following characteristics:
    • Access-was it easy to find, easy to get to, easy to see from the street?
    • Parking (if you drive) or access to public transportation (if you take a bus, subway, or commuter train)-did you have difficulty getting there?
    • Appearance-is it clean, neat, cluttered, quaint, dirty, or something else?
  2. Note the kind of service provided. Is it a sit-down restaurant where you're given a menu and allowed time to make a choice, or is it a fast-food format where you study an overhead marquee while you stand in line to place your order from a counter person?
  3. Note the kind of seating you are provided. Is it comfortable? Was the table clean when you arrived, or did you have to bus it yourself before sitting down?
  4. Once you've placed your order, note the time you order it and the time it takes to arrive.
  5. When your order arrives, did it meet your expectations? Was it freshly made, nicely presented, and correctly assembled?
  6. When you pay (which will probably be before step 4 if you are in a fast-food chain), was the total amount what you expected? Were you charged for any items you did not order?
  7. While you have lunch, observe at least ten additional interactions between yourself and the restaurant-the staff, the building, the food, the presentation, the decor, the other patrons, everything that you interact with-and note what insights this gives you into moments of truth between you and this establishment.
  8. Here's the fun part: Distill everything into a single grade, pass or fail, based on the simple criterion of whether you would go back to this restaurant again. If you would, it passes; if you would not, it fails.

Several generalizations can be made from studying the moments of truth involved in such a simple, everyday act as having lunch. Perhaps most important is something that you may not see in a single visit: expectations are constantly on the rise. Albrecht and Zemke cite an airline that began by measuring on-time departure as its key moment of truth. The only problem was, passengers began to expect on-time departure as a matter of course; the importance of departing on time rapidly faded into the background once it became the expected norm. If you chose to visit a fast-food joint, you might soon develop the same attitude about the length of time it takes your burger or fish sandwich to be handed across the counter to you. In fact, you may consider (for "extra credit") answering the same questions for your regular hangout, and see where, as Shakespeare said, familiarity breeds contempt.

Even more telling is step 7. How hard was it for you to find additional interactions between you and the lunch spot? Did you struggle to get all ten, or did you end up jotting down everything that happened-the noisy couple at the table across the way, the kids running up and down the aisle playing with the toys from their Super Smile Kiddie-Pak Lunch Value Deal, the homeless person asking for change outside the door?

The point of this exercise is to understand what a moment of truth might consist of in a context you're familiar with, but one that is outside the Web. Once you can distinguish these moments of truth, it's time to take on the second exercise, in which you'll actually identify potential moments of truth in your Web page.

Exercise 2: Who Cares What They Think, Anyway?

For this exercise, you'll be talking (or communicating electronically) with a number of people in your target audience: Web users, readers, and surfers. This is a simple exercise, but one that builds on the previous one.

  1. Identify at least five people you know-friends, family, co-workers, students-who use the Web somewhat frequently. (As an added bonus exercise, you might try asking everyone you meet-people at the store, the guy at the gas station, the family next to you when you're getting lunch in Exercise 1-whether or not they use the Web, and then keep track of how many actually do.)
  2. Let these people know that you are designing a Web site and you want their feedback as part of your market research. Be sure to let them know that you are working on a site that doesn't yet exist, and you are looking for their honest responses. Make it clear that you won't take anything personally because you're working on a new Web site, so they can be as critical as they need to be in this exercise.
  3. Ask each person to come up with a "top ten" list of things they find annoying about Web sites. If they can come up with specific examples (with URLs), so much the better. If they can't quite come up with ten things, three or four will be sufficient. Some of the ways you can do this include:
    • Set up a mailing list or make the request on a Usenet newsgroup.
    • Set up a reader-response form on your own Web site with categories specified as pull-down form replies.
    • Call a meeting at work (Tip: Order in lunch and you'll get a much better response) and have someone take minutes.
    • Ask everyone you see, everywhere you go, keep a notebook with you at all times, and get a complete cross-section of your community.
  4. When you have interviewed your five people, collate their responses. You'll have potentially 50 opinions to work with; some of them will probably be duplicates. ("It takes too long to see pictures" is probably the number one complaint about the Web.) Eliminate the doubles, sort them (if you're feeling particularly detail-oriented) by frequency, but mainly look at them as a portrait of your user base, your customers, your community.
  5. Here's the hard part: Look at each complaint from the perspective that there is something you can do about it. Even if the complaint is "My modem is too slow," imagine that there is some way you can have an impact on that-that you can control the way your Web site is designed, with the result being faster performance.

The result of this exercise is that you will have a new understanding of what your user base expects, what they dislike, and what constitute their moments of truth as they use the Web. From this, you can develop a way of creating your own Web site to have the maximum impact, the clearest communication, and the most effective sense of community with the people who read it.

How Performance Affects Perception

Now that we've distinguished some of the factors that determine how people are going to perceive your Web site, it's time to look at some of the more specific elements involved in satisfying your audience. In particular, remind yourself that you do have some control over how people perceive your Web site, regardless of the circumstances surrounding their platform's performance.

The issue of Web site performance is universal: It does not respect age, education, or cultural background. When the Disney movie Toy Story had just been released, my daughters-then aged eight and four-ran excitedly into my office. "Dad!" shouted the eight year old. "I saw an ad for Toy Story, and it had one of those WWW things on it! Can we look at it?"

Since she hadn't yet learned to remember all the parts of "those WWW things," I tried the company's main path, https://www.disney.com, and followed the hyperlinks to the Toy Story Page. We looked at about three pictures, each one taking a minute or so to crawl down the screen over my 14.4 modem (and from what must have been a busy site). The eight year old migrated out of the room, followed a few seconds later by her younger sister.

"Hey, wait!" I called. "Don't you want to see more pictures from Toy Story?"

"Naaah," said the four year old. "It takes too long."

So your audience may be more sophisticated, polite, patient, or maybe even captive than my daughters were willing to be that Saturday morning, but when two little girls can't wait for pictures from a brand-new Disney movie to fill the screen, you have to pay attention.

In this chapter, we'll talk about how you can capture your audience's attention and not lose it in the first three pictures. Some of these concerns are design-oriented; some are technical. But if you view all of them from the results of the exercises you did in the beginning of this chapter, you'll begin to shape a different kind of Web site from many of those in use today.

What Kinds of Images Can I Use?

Images on the Web consist of two basic types: images captured from nature and stored in digital format, and images created entirely on the computer. This chapter talks about ways you can make both types work best on the Web.

Although this chapter ends with hands-on tutorials showing you how to achieve specific effects in a couple of popular programs (and provides URLs to some pictures that you're welcome to download for practice and comparison), its primary focus is on program-independent techniques and strategies for creating good-looking graphics with any software. This means that the issues you're learning about here will still be valid when cable modems and T1 lines are commonplace (and when user expectations about speed and performance-as in the on-time departure example-have been modified accordingly).

Getting Started

While you're reading this section, start your Web browser and take a look at the Web site designed to accompany this book: https://www.living-history.org/media

The examples used in this chapter are all stored there; you can download them for practice and for your own use in learning how these images actually work in your Web environment. Once you have your own copies, you can crop them, convert them, and otherwise play with them, either by following the examples in this book or by trying your own creative ideas.

Image Types

Most filenames used here conform to the Microsoft DOS file-naming convention of eight characters in the filename, a period, and three characters (sometimes referred to as the 8.3 standard); the exception is that text files all end in .HTML. This means you can download the image files to practice some of the techniques demonstrated in this book, whether you are using a Windows 3.1, Windows 95, Windows NT, or Macintosh as your graphics platform.

As with all the images posted directly on the Web page used for this book, you are welcome to use the images, manipulate them, and practice with them for your own Web development work. (Note, however, that many pictures stored at other locations on this book's Web page are the property of their respective authors and should be treated as proprietary and copyrighted unless explicitly indicated otherwise.)

The Basics of Good Design

Chances are good that you weren't a Webmaster a year ago-in fact, the job title probably didn't exist more than about a year before this book was written. This means that, most likely, you did something else for a living. If you're like the Webmasters I know and work with, this could mean anything-one Webmaster I work with was writing advertising copy until he taught himself HTML and got a job designing a major Web site. Another was a high-level Unix systems programmer. Another was a teacher, a fourth was a technical writer, and the list goes on.

Because of this breadth, it's dangerous to assume too much about you, the audience for this book, and your experience. So I'll begin with a short course in design. If you're a highly trained graphic artist, you probably know more about this than I do, but you may not have considered design from a performance standpoint. If you're primarily a writer, a programmer, or an administrator, you have probably never considered performance from a design standpoint. On the Web, the two come together powerfully.

Principles for Design

These basic principles will help anyone who is not primarily trained as a graphic designer to make decent-looking images-photographs and illustrations that convey their message, look good, and attract attention. In the next section, we'll talk about some specific techniques you can use to tweak the performance of your site's graphics. Note also that these design principles assume that your Web site is meant to convey information, such as background for your company's product or services, the contents of an electronic magazine, or a list of subjects in a Web-based education site. If you visit experimental Web sites, or sites that have been designed by trained graphic artists, you will almost certainly see these basic principles violated to get a particular look or visual effect. In fact, as you develop a sense of visual style, you will probably stray from these basic principles. But if you don't have training in art or design, following these principles will give you decent-looking Web sites that get your message across to the reader.

Know your message. Each image in an informational Web site should be meant to convey a message. It may be the layout of the site, showing the relationship between different files and pages. It may be information about your company's product or service, showing your readers where to go to get more detailed information about ordering from you, using your product or service, or otherwise providing them with value. But make sure that each image has a message, even if it's simple. For a purely artistic site, the images will not have a message so much as an intended emotional reaction. In either case, you might say that you need to know the meaning you intend your image to convey.

Decide on your "visual topic sentence." Basic English composition classes teach that every paragraph needs a topic sentence, followed by several additional sentences that give supporting details. When you design graphics, design them in much the same way. Come up with one central design element that, in the kinds of Web sites we've discussed, is intended to transfer information to your readers. Then, having determined the visual theme or topic sentence, support that idea with additional details (if appropriate) to transfer information more effectively. (The Tutorial section gives some examples of this.)

Draw the viewer's eyes to a particular place in the image first. This ties in with the topic sentence idea, by giving your illustration a logical center. Color, relative size, and composition are some of the ways to place something at the focus of an image. You can also use other elements of the image to draw attention; converging lines, alterations of color intensity, and other elements in the background can be used to make something stand out.

Note that if you are photographing these images, you may be able to move the subjects; if you're taking pictures of people, cars, furniture, flowers, wall hangings, books, or computers, you can move them to make the picture more effective. Don't take a picture of your office the way it looks now; move things so that they work better in the illustration. You can always move them back later so that they function in your workflow. In other circumstances-for instance, the Manhattan skyline, the Golden Gate Bridge, Yosemite's Half Dome-the objects in the image are immovable. But you may be able to take a better angle, one that allows you to line up elements in the background (the horizon, for example, or the way the roads converge into the distance) to attract attention to your visual center.

Keep your images simple-avoid clutter. Cluttered images make it difficult for your users to see the individual components of your illustration. Too many buttons, details, patterns, and shapes distract from the overall meaning you're trying to get across. This principle applies both to illustrations and to photographs, and it ties in with the principle of composition, discussed shortly. And knowing your visual topic sentence often helps reduce clutter because it lets you use a fairly simple test on each element of your image: Does this element support your topic sentence? If not, consider putting it in another image.

Strive for balance but not necessarily symmetry. This is a difficult line to straddle for many beginning designers and layout artists. Layouts and designs that are completely symmetrical don't "move"-that is, there's no sense that the eye is meant to go to any particular place on the screen (discussed previously).

My personal style is to put the visual center about 60% of the way across the image, (Note: as shown in the book- not Web version) beginning from the left, and about 60% of the way down from the top. This gives illustrations a certain dynamic appearance; it's just off-center enough not to look like an accident, yet it's not so far off-center that it wastes a lot of space.

Note, for example, that this page is laid out with the center of visual interest-let's call it the middle of the text column-about 60% of the way across from the left. I've kept the left column available, though, for illustrations and headings, but the overall effect is to draw your eye to the right. (If you are designing for a culture that reads from right to left, you may wish to reverse these directions to take advantage of your culture's automatic reading skills.)

Pay attention to your image's composition. In some ways, everything I've said up to this point is building to the concept of composition. Composition in images means having a strong visual or thematic center (your topic sentence), drawing the eye to that center, reducing clutter, having a dynamic balance, and conveying the intended emotional or intellectual message clearly. The composition, however, describes the way that all these pieces work together in the final product.

One way I like to diagram basic composition for my multimedia design students is with a simple nine-patch grid, such as you might use to play tic-tac-toe: In terms of this simple diagram, (not available) the key locations for crucial elements of your image are A and B. There is also a slight sense of order or sequence in this composition: elements placed at location A will typically be perceived as coming before other elements in the scene, while images placed at location B will be perceived as coming later. You can use this implied sequence to add to the sense of relative importance of elements in your scene, or to heighten a sense of process among elements in the scene.

How does it look when it's all in one piece? Whether it's a drawing or a photograph, a still frame from a video or a scanned painting, how it looks is still going to be important-at least as important as whether it does everything I've mentioned here. From time to time, step back and look at the entire illustration as well as its component parts.

For Further Study

In general, the type of design I've described here is called instructional design-that is, design at several levels that is meant to convey information, or more specifically to give people access to knowledge in such a way that they can use it effectively in their own lives. Instructional design for multimedia in particular requires that you look at the micro level as well as the macro level-that you consider what goes into each screen as well as where and how the screens connect to one another.

I've written about this extensively in two previous books, the first of which (Multimedia Authoring: Building and Developing Documents, AP Professional, 1994) is used in a number of college courses on instructional design-even though the words "instructional design" never appear in the text. (And if I were Oscar Wilde or Will Rogers, I'd quip that this proves that as long as you know what you're talking about, you don't have to worry about knowing what you're saying.)

For full details on these and other worthwhile references for the multimedia or Web designer, see Appendix B.

The Basics of Web Performance

Web performance is really simple-small files load quickly, big files load slowly, no matter what the connection or browser or computer. If you're looking to get the maximum performance from the media on your Web site, you'll hear over and over that file size is the dominant characteristic. Bandwidth-that is, the speed of the connection between your site and your customer's or reader's computer-is an important issue, true, but that's really a conversation between your network architect and the accounting department. If you can improve your site's connectivity to the outside world, that's great, and in many smaller organizations the Webmaster can recommend enhancements to the system's overall hardware or software performance.

But first of all, for many people raising their bandwidth or their computing performance isn't an option; they've got a 28.8 modem and a 486-66 PC and that's all they're going to get, especially if they're a school, a small business, or a community resource. And second, bandwidth is not really something that you can affect with the design and construction of the information on your Web site. How you construct your Web site, what kinds of media you use, and how you link them together are the subject of this book.

Less (Size) Is More (Speed)

Architect Ludwig Mies van der Rohe, one of the founders of the design movement generally termed the Bauhaus, coined the by-now famous aphorism that I've amended in the heading. He was speaking of commercial building design, in which less ornamentation led to more freedom and usability. Although this led to some spectacularly ugly buildings as interpreted by less talented architects, the basic principle applies to your Web site: less file size leads to more rapid access, and eventually to more hits, more utility, and more satisfaction by your readers.

In the last section, we talked about how design can influence the pictures you publish on the Web, how to focus on the composition and content of your images to get your message through to your reader more quickly and effectively. There, you could say that less (visual clutter) is more (effective communication). In this section, we'll see how less (data in the files) is more (reader satisfaction and interactivity).

Principles for Performance

The following principles can help you maximize the performance of your Web site by generating pictures that load quickly and look good.

Keep it simple. (This is my more polite version of the well-known KISS rule: "Keep it simple, stupid.") The average monitor out there on the Web probably has only 256 colors and manages an image size of 640 x 480 pixels, so using fewer colors and smaller images can help ensure an image that displays quickly-and coupled with the next principle, it can also mean a better looking image.

Use 8-bit files for computer-generated images. An 8-bit image takes one third the time to cross the wires as a 24-bit image does, so perceived performance goes up dramatically. One key to the successful use of 8-bit images is that humans are still better than computers at certain things, particularly where human perception and style are concerned. Why this matters to you is that a graphic artist or designer can almost invariably do a better job of designing an 8-bit image from scratch than a program-even a sophisticated one-can do by converting from 24-bit to 8-bit. This is because the artist knows, during the creation process, which colors work well together. The automated converter only knows which colors in the map are closest to the original RGB values.

Use JPEG compression to store scanned-in photographs and still frames taken from video clips. In Adobe Photoshop, you can control the file size and the image quality with a slider when you save an image; this chapter takes you through several examples of doing this later on. But JPEG compression lets you find the compromise that makes you happiest between download performance and image detail. And all graphical browsers support the display of JPEG images. To give you a feeling for the relationship between image quality and access time, you'll have the chance to play with several different levels of compression in JPEG files later in this chapter.

Crop your image to reduce extra pixels. Look for places where you can reduce your image by cropping the image in Photoshop (or whatever image tool you use). Reducing a 320 x 240 image by as little as 5 pixels on each axis saves you 2775 pixels. On a busy connection running at 500 bytes per second, that saves nearly 6 seconds of load time-and that's if this is an 8-bit image. If you're using 24-bit color, the time saving is tripled.

Assume the slowest performance from your readers' equipment. Although it's encouraging to think of a world made up of ISDN lines, fiber to the desktop, and multi-gigabit links to the Internet backbone, most home browsers are still using 14.4 modems, some 28.8, and it'll be years before the "Internet computer" actually reaches a significant number of homes. When high bandwidth is a given, the sites you design today will perform even better. In the interim, you can help minimize your readers' frustration by designing for hardware that supports the minimum performance, not the maximum.

Use thumbnails set into solid color for opening screens. Large areas of solid color load quickly when compressed with the JPEG standard, because of the way it compresses pixels. If you want to have a full-screen image but don't want the overhead associated with it, use a solid color (typically one of the colors from your logo) as the background, then paste in clipped, reduced-size images (often called thumbnails) for the detail. Better yet, set the background color of your Web page with the BGCOLOR statement in the BODY section of your HTML file. Later on you can make image maps (discussed later in this chapter) that use these thumbnail regions as the links to other parts of your Web site, or to other Web sites.

Digital Sources

Digital cameras come in two basic flavors: those in the under-$1000 range and high-end professional units. The low-price units are great for putting snapshots into your Web site. Kodak, Apple, and Casio all make reasonably priced digital cameras that do an adequate job of personalizing your Web page.

My experience with the lower-cost cameras is that they really require good lighting of your subjects. Although you can adjust the brightness and color balance of images after capture, there's only so much you can do, and it's better simply to make sure that the subject is well lighted in the first place. If possible, a camera with an adjustable zoom (such as some of Kodak's offerings) makes it easy to frame and position each shot precisely without moving yourself or the objects in the scene.

The other advantage to a digital camera is that it's possible to take pictures and download them instantly through the cable supplied with the camera. This avoids the time and cost involved in developing and printing film photographs.

The lower-cost digital cameras, however, are limited in their resolution. While this is not a problem for images that will only be displayed on screen (where resolution is never more than 96 dots per inch), it can be frustrating to photographers looking to use the same image for the Web and the printing press.

What Direct-to-Digital Source Is Good For

The obvious example, of course, is a Web site devoted to the display and potentially the sale of high-quality images. If you're planning to operate a stock photographic image library, either as a vendor or as an Intranet site within your own company, you'll want high-quality digital images made available-but you probably won't want them to be the first thing that people get when they click on your Web site.

Such a Web site should use screen-resolution, thumbnail-sized images as a kind of visual index to the high-quality content. This thumbnail might be as small as 160 x 120 pixels, or even 80 x 60 if that conveys enough of a sense of the image's content. The best way to do this is to shoot the image full-size, scan it at a reasonable pixel resolution, and then reduce it electronically, typically in Photoshop. This process is described later in this chapter.

The next stage would be to link from the thumbnail index to another HTML file containing individual larger size, full-screen images. This way customers can see the entire image in more detail and decide whether or not they want to buy it. This would still be digitized at screen resolution, so your presumed audience-high-end printers, publishers, journalists, etc.-would not find this image useful, and would therefore not bother downloading this image without paying (because this imaginary Web business is designed to make a living for someone, rather than just to provide cool pictures for people to look at for free).

Finally, your imaginary Web customers have found a photograph they want to purchase. They click on a hyperlink that you've placed on the page containing the full-size, screen-resolution image, and your Web software makes the appropriate entries in their virtual cash account and then lets them download a high-resolution image file, one that may be more than 1 megabyte in size.

For examples, look at the Web site. I've stored three versions of the same scanned image: one at 72 dpi, one at 96, and one at 1200. The files in question are located at: https://www.living-history.org/media/threepix.html

This is a good chance to look at the difference as it shows up on your Web page, and also to time the difference. Note that the 1200-dpi image is approximately 1.2 megabytes when fully uncompressed. (You may want to go make a fresh pot of coffee if you choose to download that one.)

On the other hand, whenever anyone asks me to recommend a cheap digital camera these days, I suggest using a camcorder and a video capture card instead. With Macintosh and PC capture cards alike costing only a couple of hundred dollars, it's difficult to justify buying a still camera for $400 to $600. This is especially so for schools, where chances are the campus already has a camcorder of some kind. A video capture card lets you capture single-frame images from the camcorder or from video tape, just as a digital camera does. However, you'll also be able to make digital movies, record sound effects, make tracks (maybe even in stereo, depending on the equipment you use), and digitize existing material from videotape.

In short, a camcorder and video capture card do everything a low-end digital camera can do, with the added value of being able to capture motion and sound. And if you already have a camcorder, you'll probably spend less on a video capture card than you would on a digital camera. A digital camera just doesn't make sense if you already have a video camera. In fact, in the past few years I've done more with video capture equipment than I have with a scanner. However, if you're planning to sell (or otherwise make available) high-quality image files intended for printing on a dye-sublimation printer or photographic process, the extra cost for a really first-rate digital camera is probably worth it.

The other thing that direct-to-digital image capture is good for, of course, is time. You don't have to wait for your prints to be developed, whether you're having them printed directly to Photo CD or whether you're going to scan them in with a flatbed scanner or some other digitization technique. If you go directly to digital image form, the pictures are already "in the box," ready to be manipulated and uploaded to your Web site.

This, of course, is also possible if you choose to go with a camcorder and a digitizing card. On all video capture cards and systems that I'm aware of, you can go directly to a digital file from your camcorder. Bypassing the analog step of putting the image on tape saves you a full generation of analog-to-digital conversion and results in slightly clearer images. It does, however, tend to limit itself to studio use; I don't know of any notebook computers that run digital capture cards, but I suppose it's possible.

Note, however, that digital video eats file space like nothing else; one of my students digitized a 3-minute video clip with no compression, using a 160 x 120 pixel image at 15 frames per second, and ended up with an 87-megabyte clip. I don't even want to begin to calculate how long that would take to download at 14.4 kilobaud; the answer is probably best expressed in days, not hours. And finally, digital video has its own special requirements and characteristics, especially for the Web; these are discussed in more detail in Chapter 3.

High-Performance Photography

Whether you use a 35mm film camera, an Apple QuickTake, a high-end Kodak digital imaging system, or a video camera with an Apple Video System capture card, photographing images for the Web presents several special technical issues, and one or two design issues as well. The most crucial performance consideration is in controlling-or perhaps more precisely, limiting-the image's size. However, just as important in the long run is the quality and clarity of the image-meaning how distinct each of the components of the picture will be when scanned, digitized, and downloaded, and simply how good it looks on-line. Here are some of the points in the photographic process at which you can make choices that affect an image's size, quality, and clarity.

Setting Up the Shot

Here, composition is the key: look for where your subject fits in the frame of the camera. How much can you get in the picture, and how can you place yourself (or other subjects in the scene) to make the scene compact, but also make it look good? Remember the design concepts: strive for balance but not symmetry, draw the eye toward your visual topic sentence, and keep it simple.

You can impart a feeling of motion by having your subject coming into the picture (or moving out of it), with part of it still outside the edge of the image. This also draws attention to the end of the subject that's fully in the frame. And although some of this can be done by cropping the image later (either by cutting the photograph or by using cut and paste within Photoshop), remembering this while you're framing the initial action shot can help you turn a fair picture into a powerful one.

Selecting the Lighting

The process of digitizing an image is very susceptible to lighting, or rather to the lack of light. Dark colors often don't look good when digitized because of the way images are converted from analog to digital format. If you are using 24-bit color, this won't be an issue, but because most Web browsers use dithered 8-bit images (depending on the user's system), darker images look muddier and less effective than light ones. In particular, look out for large expanses of dark color; they often get patchy and "noisy" when digitized.

Selecting Film

If you're using 35mm film, look at the ASA number on the box. The ASA numbers (two popular ASA ratings are 200 and 400) determine how long the film must be exposed (that is, the shutter speed) in order to imprint an image on it. For a given lighting setup, there's a linear inverse relationship between shutter speed and ASA ratings: as the ASA doubles in number, the length of time the shutter remains open can drop by half.

But there's a catch. Film with a higher ASA rating typically has a coarser grain, resulting in lower image quality. Kodak has an ASA 1000 film that is spectacular at taking pictures literally by candlelight-but the prints look as though they've already been pixelized, almost like a Monet painting. It can be a beautiful effect if you use it well, but if you're after image clarity and sharp definition, it's exactly the wrong choice.

For photography that is meant to be scanned, a general rule is to use a comparatively low rating ASA-200 is a good all-purpose choice, with crisp images but reasonable lighting flexibility. Then make sure you've got enough light on the set or at the location so that the dark places will show up clearly.

Making Prints

If you have the choice, print your photographs a size larger than you would normally choose for snapshots. Larger images give you a little more flexibility when you scan them in. More specifically, scaling down in size results in a better looking image than scaling up.

If you reduce an image's size electronically, curves and diagonal lines typically get sharper (up to a point); if you enlarge an image beyond its native pixel resolution, the program that enlarges it typically resorts to pixel duplication. This means that, to make an image twice its original size, the program simply doubles every pixel in the original-making blocks of four pixels out of every pixel in the original image. The result is blocky, jagged images, with four-pixel "stair steps" at every curve or diagonal line. Oh, and don't forget that doubling an image's size also ends up quadrupling the number of bytes in the file because you double its width and its height. A 100 x 100 pixel image takes up 10K pixels; a 200 x 200 pixel image takes up 40K pixels (and takes four times as long to load).

Photographic Scanning and Manipulation

Chances are good that at least some of the images you use on your Web site will come from prints. Even if you invest in a high-end digital camera, a top of the line Media 100 digital video system, and a multi-gigabyte array of high-speed disk drives to store all these images, you will almost certainly have existing prints, drawings, and art work that someone-maybe even you-will want to put on the Web page. These existing illustrations are known in general as "legacy documents." In a fully electronic world, legacy documents also include printed letters, manuals, books, specifications, parts lists, and anything else that existed in paper before the shift to electronic publishing (either via the Web or via some proprietary system, such as a bill-of-materials tracking program or a CD-ROM documentation delivery system).

Although the general issues involved in handling legacy documents are challenging, to say the least, the only ones that really pertain to the subject of this book are those involved in getting images out of the filing cabinet and the portfolio and into your computer. For that, the issues are the same as they are for getting in brand-new photographs, prints, and other traditional-media artwork.

After you've taken the picture or you have the image that you want to scan, there are two points in the process at which you can control the image size:

  1. When scanning, you can determine the resolution (in dots per inch, or dpi) of the scanned image; this should be as high as possible.
  2. When you save the file, you can choose the relationship between image quality and image compression; this should be optimized toward your choice of performance or image quality, depending on the speed of Internet connection for which you're developing your Web site.

Most scanners let you set the resolution of the image that you're scanning in. This way you can tailor the image to Macintosh or PC formats-72 dpi or 96 dpi, respectively. Of course, on the Web, you'll have Mac, PC, and a whole array of Unix systems to deal with. In practice, I've found it's much simpler and more effective to scan at a higher resolution than you intend to publish, and then simply to save copies of your images at 72 dpi regardless of the platform issues; it's always better to capture more information than you intend to use, because you can never regain it.

Saving and Compressing Files

The more crucial point in scanning is how the file is saved once you capture it. Typically scanners today are bundled with an image processing program such as Adobe Photoshop. By loading a software plug-in that interfaces Photoshop to the scanner software, you can scan an image directly into Photoshop. Once there, you can retouch it, crop it, cut bits out of it, color it, and otherwise manipulate it to get it the way you want it to look.

At this point, though, you need to understand a couple of facts about file compression. Here's a print that is stored on my Web site in several formats, with filenames all involving the word "Foom" (self-explanatory from the image!):

This image is a 320 x 240 scan from videotape, made with the Apple Video System. I saved it as JPEG with Photoshop; the JPEG file takes up 33K on disk (or over the wires). The Apple PICT file on which it's based uses 160K. The Encapsulated PostScript file that I imported into the source for this book is 380K. But 320 times 240 is 76,800. What's the difference? It's all in how you save the file, something that the JPEG format permits you to do within Photoshop. When you click Save As from the File menu in Photoshop, you get the following dialog box: (not available)

Pulling down the Format box gives you a list of available image formats, such as TIFF, JPEG, PICT, and various other formats. Later on, I've included a tutorial on using Photoshop that takes you step by step through the process of saving this file in several different formats.

For now, note the following slider bar that comes up in Photoshop (version 2.5; later versions look different) when you save in JPEG format: (unavailable)

If Photoshop were a Web tool instead of a print tool, the slider would be labeled with "Download Speed" instead of "Image Quality" and "Compression." If it were, the leftmost edge of the bar would be labeled "Fast" and the rightmost edge (the one near the Save button) would be labeled "Slow."

However, your best bet when saving a scanned picture is to save it at a high image quality. Remember, you can always save a copy of it with more compression later on, reducing the file size and therefore improving the page's performance.

And that's the main thing to remember: moving the slider to your left improves the performance of your Web site, whereas moving it to the right slows down your users' load time. (In the Tutorial section, however, you'll get a chance to see how this affects image quality, if that is really what's most important about your particular Web site.)

Creating Pictures for Use in Image Maps

The traditional method for letting people interact with graphics on a Web site is the image map. If you've ever moved the mouse over a picture and seen the pointer turn to the "moving finger," you've used an image map.

To create an image map, essentially you assign a given URL to a specified region of the image. The Web browser reads the pixel location within the image when your reader calls it up, and when the reader clicks within a certain pixel range, the Web browser program jumps to that URL. You may or may not have a background, or default, URL associated with the image-that is, a URL to jump to when the user clicks on the background, outside of any of the specific buttons in the image.

One of the images I scanned to use as an image map for the Web sites I used while developing this book is the following group photograph of all the teachers at Cherry Chase Elementary School.

In at least one way, this image is the ideal visual index to a Web site because each part of the image is clear, self-contained, and easily identified. When you see a teacher's face, you recognize him or her and it's natural to click there to find information about that teacher's class.

What this image does not do, however, is indicate any structural relationship between the teachers (apart from the fact that the school's principal, Alice Pounds, is listed first). You might develop a new version of this picture that listed all the teachers in each grade in their own groups, or all the teachers who have special skills or interests in common. For example, although this is an elementary school, a good grouping for a middle school or high school might be to list all the English teachers together, all the history teachers, all the art teachers, and so on. (One benefit to hypertext is that if one teacher has classes in both English and journalism, for example, you can use the same picture, have it in different locations, but have it mapped to the same URL for that teacher's Web page.) You might also lay out the pictures of the teachers over a map of the school, so that your users could see where the individual teachers' classrooms are located.

Creating an image map is a two-stage process:

  1. Creating the image itself-the graphical part.
  2. Creating the map of interactivity-the technical part.

The technical part is covered in detail in Chapter 4, where we discuss various ways of adding buttons to your Web site. For now, let's focus on the graphical part: creating images that work well as image maps. For that, let's look at the basics of image map design.

Basics of Image Map Design

An image map is more than just a picture you can click on. In a very real way, it can be a "road map" to your site, or to a portion of the information in your site. The image map is the graphical user interface to your Web page's content-it's the menu, the opening screen, the way people perceive what you have in your page. When designing the graphical part of your image maps, you need to address two primary issues: clarity and structure.

Clarity. Image maps need to be visually clear so that your readers can distinguish the components from one another. They also need to convey their intended information clearly, which is different from simply being well scanned. The previous example is good in both of these types of clarity: the teachers' faces are easily recognized from the scanned image, and they easily convey the information that was intended (who the teacher is).

Structure. Often the more difficult component, the structure in an image map needs to convey relationships between the information being represented on the screen. There are several ways to do this, depending on the structure inherent in the information. Although the psychological implications of instructional design are covered thoroughly in Chapter 7, they are mentioned here because you need to understand them to some extent before developing your image maps.

By the way, if you're new to designing Web pages or other hypertext structures, you should pay close attention to this section because it's a clear example of one of the places where hypertext would provide a functionality clearly superior to a paper book. Although I can include brief notes about the technical side of image map development, and I can refer you to Chapter 7 for more information about the human issues in instructional design, if this book were on the Web, I could easily put in a URL that would take you directly to the appropriate information. Now consider how you would represent such a structure visually.

Basics of Information Structure

Although this information is covered in more detail elsewhere in this book, it's worth taking a few moments here as you're about to go into the Tutorials to cover the basic kinds of structure that information may take, and to introduce the concept of information partitioning that is key to hypertext and multimedia design.

Information partitioning is the skill of identifying discrete, stand-alone pieces of information, such as those you would put into a single Web page, screen, or image. Information partitioning lets you see the fundamental building blocks of the information you want to convey to your audience.

Depending on your audience, your subject, and the degree of interactivity you want to provide them, information partitioning may proceed to any of several levels of detail: to the level of sentences, paragraphs, subsections, sections, or chapters, using the book model. I prefer to partition information down to the level of subheadings and headings within a chapter; the chapter level is too coarse, the paragraph level too fine, for meaningful partitioning of information-but that's for a book.

For a Web page, you probably want to use smaller chunks of information, for several reasons: they load faster, and they let your reader focus on smaller chunks of information at one time. The rapid-fire nature of interactive, computer-based reading tends to work well with smaller chunks.

When you have a sense of how large or small the information chunks will be, you can begin laying them out in some kind of structure. The structure automatically takes into account the relationship between the individual chunks of information: some partitions will contain smaller chunks, whereas others will contain multiple levels of partitioned information.

Some instructors and authors of training materials on interactive or on-line information refer to information partitioning as "chunking," and information structure as "grouping." These terms may help give you a sense of what you're doing with the information on your Web site: dividing it into chunks, then sorting the chunks in turn into groups.

For now, begin considering that information within a particular subject is naturally related to other information, both in that subject and outside of it. As you consider the pieces of information that stand alone-for example, the individual teachers at a school as used in the example-start to think of other pieces of information that are connected to this.

Although the exercises in Chapter 7 will give you a much more powerful relationship to this concept, the following exercise will help you gain a basic understanding of some of the ways you can "chunk" and "group" information, particularly when you are considering visuals to support a Web page.

Exercise 3: Grouping the Teachers

For this exercise, you'll need to start your Web browser (if it isn't already running) and have two blank sheets of paper for drawing on. This can also be a whiteboard or a graphics program, such as Paintbrush on the Windows PC or a Paint program on the Macintosh, but you will be drawing shapes and relationships, not just typing words.

  1. Locate the picture containing photographs of all the teachers at the following URL: https://www.living-history.org/cherry-chase/teachers.html
  2. On the top of one sheet of blank paper (or empty document), write the title Skills; on the other sheet, write Grade Level.
  3. On the Grade Level sheet, draw rectangles (or ovals) entitled Kindergarten, First, Second, Third, Fourth, and Fifth.
  4. On the Skills sheet, write Multimedia Specialists, ELD, and Resource.
  5. On the Web page, find the first-grade teachers and draw boxes (or ovals) for them in the right place in the Grade Level sheet.
  6. On the Web page, find the teachers who are multimedia specialists and draw boxes for them in the right place in the Skills sheet.

This is a very simple exercise designed to get you thinking about how grouping, labeling, and structuring information can let you show how elements of your Web site are related to one another. You'll notice something else, though: one teacher occurs in both the first-grade box and the multimedia specialist box. This is why the third part of the information partitioning and information structuring routine is information linking-and again, this is covered in more detail in Chapter 7.

For now, however, you've had the chance to see how the different pieces of information-in this case, the teacher, the grade level, and the skills they have-help you partition the information about all teachers at a school into manageable pieces. In addition, you've seen how you can use these partitions to help represent and identify the structure of the subject-in this case, the school and its teachers. Finally, you've seen how you can use different visual maps to provide access-out of a wholly separate context-to the same information.

Now consider that your readers will have a different background context when they arrive at Donna Haswell's page, depending on whether they selected her from the first-grade teachers or from the multimedia specialists. It is exactly this background context that is the true nature of interactivity. Your readers will have a different experience-if only slightly-depending on which screen they were reading when they selected her. That context is carried through to Mrs. Haswell's home page.

And you, as the Web site designer, have everything to say about what that background context can be. This is part of the reason the title of this book includes the word "dynamic"-it's more than just multimedia, or high interactivity from using Java applets and Shockwave titles (both covered later). The real reason your Web site is dynamic is that people will access different pieces from different background contexts, and that will change the way they read, comprehend, and act on the rest of your Web site.

Hands-on Tutorials

The rest of this chapter takes you step by step through samples that teach you:

The examples used here may or may not be the best thing you can do with each program used in the tutorial. Experienced users of, say, Photoshop almost certainly have additional, more effective, or more powerful ways of using this tremendous program. This section is designed to get you up and running with a few of the leading tools in the graphical side of multimedia design, with samples you can look at on the Web to see how they come across on your computer (as well as on paper).

Using the Scanner

The following tutorial takes you through the steps involved in scanning an image with Adobe Photoshop, highlighting the points where you can make choices that affect your file's size and therefore your Web site's performance. All screen snapshots for this Photoshop tutorial were taken on the Apple Macintosh; other hands-on tutorials use Windows 95 applications, and some will include Unix commands.

The Web is a completely heterogeneous place, and the more platforms you can learn to use, the more effective your Web page development will be. (I often, for example, scan and save a file on the Macintosh, send it to my ISP on my Windows 95 workstation, then log in to one of the Unix servers at the ISP and use the vi editor to tweak the HTML till it looks right-or sometimes just till it works.)

Scanning a File

To scan a piece of media, follow these steps.

  1. Place the media (photograph, drawing, or other flat piece of artwork) on the scanner bed and close the cover.
  2. Start Photoshop, if it is not already running.
  3. From the File menu, select the Acquire pull-right option. This displays a selection of capture options.
  4. Select the capture option for your scanner. The scanner plug-in displays a dialog box similar to this one (the options may vary depending on the capabilities of your scanner):
  5. For the first exercise, set the dpi (the second row of the box at the upper right) to 150 and set the scaling to 100%.
  6. Grab the corner of the rectangle at the left of the screen and move it to represent the corner of the media you want to capture. Refer to the media as it sits on the scanner bed to make sure that you are scanning the image in the right orientation.

    Note: If you scan the image upside-down or rotated 90 degrees out of vertical when it displays in Photoshop, you can use the Rotate option to turn it back to the correct orientation.

  7. When you have selected the region you want to capture, click Scan. For the next several minutes, the scanner captures data. When finished, Photoshop displays the image you just scanned. At this point, you can rotate the image (if necessary), crop it, and otherwise manipulate it.

Note these points:

In the next tutorial, you'll save this image in several different compression levels, then compare the file sizes and the way each compression level looks.

Saving a File at Low Compression

  1. When you have scanned the image you want, click Save. Photoshop displays the Save As dialog box:
  2. Pull down the file format box and choose JPEG (as shown in the previous snapshot). Photoshop displays this box:
  3. Move the triangular slider to the rightmost point of the scale-that is, to "Excellent" image quality and "Fair" compression.
  4. Click Save. Photoshop displays a progress bar as it writes the file.
  5. Minimize (or on the Macintosh, hide) Photoshop.
  6. From the Desktop, navigate to and open the folder containing the file you just saved.
  7. Click once on the file, then choose the action depending on the kind of system you are using:
    • On the Macintosh, pull down the File menu and select Get Info.
    • On Windows systems, click on the File menu and select Properties.

This indicates the size of the file at minimum compression. In the next tutorial, you'll save the same file at maximum compression.

Saving a File at High Compression

  1. Return to Photoshop, this time clicking Save As. Photoshop displays this box:
  2. Type a new file name in the "Save this document as" box. Photoshop displays this box:
  3. This time, move the triangular slider to the leftmost point of the scale-that is, to "Fair" image quality and "Excellent" compression.
  4. Click Save. Photoshop displays a progress bar as it writes the file.
  5. Minimize (or on the Macintosh, hide) Photoshop.
  6. From the Desktop, navigate to and open the folder containing the file you just saved.
  7. Click once on the file, then choose the action depending on the kind of system you are using:
    • On the Macintosh, pull down the File menu and select Get Info.
    • On Windows systems, click on the File menu and select Properties.

This indicates the size of the file at maximum compression.

The point to this exercise is to see the range of file sizes available to you if you pay attention while saving your documents from within Photoshop. For examples of the different image quality levels you get by following the procedures shown here, look under: https://www.living-history.org/dynaweb/chap1/

Converting Images

For use on the Web, you will want to save your images in either JPEG of GIF formats. These, at present, are the only two still-image file formats widely supported by Web browsers. This means that if a graphic artist or design service provides you with images in another format, you will need to convert them.

Some of the other image formats you may encounter are:

Photoshop will convert among these files, with the exception that it sometimes will not directly support Save As into GIF format. Under most circumstances, you can achieve better appearance and equal performance by using JPEG files in place of GIF files.

There are three places where GIF files give you something that JPEG doesn't:

  1. Transparency. The GIF89a standard supports making pixels of a selected color (typically white or black) transparent when they are displayed on a Web page. This means that background colors or background images display through the transparent portions of the GIF file. This option is not currently supported by JPEG files.
  2. Progressive display. GIF files normally display in successive iterations of greater and greater detail, meaning that first large blocks appear, then those blocks resolve into more detail, and finally each individual pixel displays. This kind of progressive display gives the user the appearance that something is going on-a JPEG file simply displays line by line, leaving empty space where it hasn't yet downloaded. On slow connections, this can make a difference in how your Web site is perceived.
  3. Animation. The GIF89a standard also supports animation within single GIF images. The good news is that unlike Shockwave or Java, which require specific versions or plug-ins to support their motion, any browser that supports the GIF89a standard displays animated GIFs. You need additional tools to create GIF animations, however; Chapter 4 includes tutorials and examples of how to create animated GIFs.

If you are using Photoshop, you already have a tool for converting files between the various graphical formats used on and off the Web. However, Photoshop can be relatively labor-intensive as a conversion tool; you need to open each file, then select Save As and choose the file type, in order to complete the conversion.

There are other tools available which simplify the conversion, particularly if you have multiple files to convert. For example, if you have been using scanned images in a Shockwave movie, they'll need to be PICTs, but for them to show up as static images on your Web site, you'll need to convert them to JPEGs. That's no big deal if you have two or three, but if you have 40 or 50-or even 10 or 12-it gets tedious.

The solution is something like Thorsten Lemke's GraphicConverter, which lets you convert an entire directory of files to an alternative graphical format in a single operation. It's available on the Web; look for it through your favorite search engine, or check the Web site associated with this book for pointers to some of the mirror sites that make it available.

Comments are welcome

Copyright © 1996 Addison Wesley and
Revised: Dec. 26, 1996