I shot this video riding the Health Line up Euclid Avenue. The quality is a bit dodgy and it isn't necessary to tell my story, except as an example of unnecessary use of video. Audio by Jacinda Espinosa / CC BY-NC 3.0. While I didn't discuss audio in this post, if you do a Google search, you'll find plenty of sources for royalty-free or Creative Commons licensed audio.

While it is true that long sections of text can seem more daunting on a Web page than in a book, that doesn't mean visitors don't read. Nor does it mean we have to throw out our words and replace them with video and pictures.

Instead we can pay attention to our line-lengths, break text into small chunks, use bulleted lists and add images or other media selectively, to enhance—not replace—our main message. Carefully chosen media can help us communicate, while poorly chosen imagery and video only serve to distract. Finding appropriate media can sometimes be a challenge, so today I'm going to discuss some options for finding/creating media that is suitable for your pages.

Audio-visual media isn't a substitute for meaningful content.

Internet users aren't shallow illiterates who will buy your widgets just because your video went viral. That may draw them to your site, but they'll need more to stay there, interact and apply to your law school or download your social media e-book.

Internet users come to your site with the hope that it will help them meet some goal or expectation. They're searching for information that will help them bake a cake, come up with a name for their new puppy, decide which graduate program to apply to, learn how to repair their washing machine, etc.

If we want our content to serve their needs then we need to consider what media will best communicate our message.

I have many dog pictures, but my friend, Ann's dogs, Scout and Kaya, passed away this fall, so I thought it would be appropriate to honor them here in the cute canine example.

• We can share a cake recipe with plain text. But photos and video can help us demonstrate the techniques used in the process and give sighted readers an example of how the cake should look when compete.
• A list of cool dog names with some background on their history will serve our readers needs. But our new dog owners will probably dig pictures of cute canines so it wouldn't hurt to sprinkle a few throughout our pages.
• Information about courses, faculty, current research and campus facilities will help prospects determine if our astronomy program is right for them. If we also add photos of the cosmos—taken from our observatory—and videos of our faculty and students, they can get a better feel for the department and begin to imagine what it would be like to be here.
• Washing machines aren't as complicated as nuclear submarines, but they are three dimensional mechanical devices. It may be hard to walk someone through a repair through text alone. But still photos with captions explaining each step, or video demonstrating the repair may make the directions more clear.

Found Media: stock and royalty free imagery

If you've just populated your database of dog names but only have photos of your pug, then you may be wondering where to get the rest of the puppy pictures you need to illustrate your site. If you've got a big budget then you can hire a photographer or license photos from a stock photography site.

If your budget is smaller, many stock sites also have low-cost or even free images available. You can also do Google and Flickr searches for images that can be licensed under creative commons. If you find a photo that doesn't offer such licensing, contact the photographer and ask if you can use the image. The Internet is a great resource for pictures, just make sure to follow copyright laws and never copy and use an image without the proper permission. Government sites by NASA and the U.S. Library of Congress are also a great source of royalty-free photographs. Both provide very clear terms of service.

Plan ahead. Start building up your own photography archive today.

Turning Point, by Philip Johnson on the campus of Case Western Reserve University

If you're a blogger or site owner who can take a decent picture, carry a camera and use it often. When I worked at Case Western Reserve I took photos at various special events, and I would grab the camera when I walked across campus, just to shoot random images—such as this photo of Turning Point—as I happened upon them.

As time went by I developed a rather large collection of campus shots that I could share with our designers, campus Web maintainers and others looking for pictures to use in their projects. To make these easier to find, I archived them on my Flickr account. This way when a request came in, I could just share a link and the requester could download the appropriate picture.

This also made life easier for me as I had thousands of photos to choose from when I needed images for a new Web page. For a campus etiquette dinner event page, I used a picture of a meal I'd eaten. For the transportation page I used a picture of a campus shuttle bus. For the Year of Darwin I used pictures from my vacation in the Galapagos. There were of course rare cases that required stock photography, but in most cases the photos I needed were ones I had already taken.

Building up such an archive may seem daunting, but if you start now—by taking pictures of anything that might relate to your organization or site—you will begin to build up a nice little collection. My friend Josh is currently planning a food related blog. He's now taking pictures of food, from cooking process to plate, whenever we eat together. By the time he launches the site this winter he'll have a variety of images ready for use.

Rottweilers dig video. I found this on YouTube, but my late Rottie, Shiloh used to watch T. V. and bark at the bad guys when they came on screen. I was never quite sure how he did that, he'd often bark before the plot had indicated they were bad. Perhaps it was in the actors' body language.

Embedded Video

If you are reading this then you already know that you can embed videos—from popular services like YouTube and Vimeo— on your own site. Continuing on the dog theme, I found countless files to choose from when searching for cute puppies and canines. I chose this Rottie because I rather liked that he was watching video too.

These services are great places to find videos that support your message. But again, it behooves us to be aware of copyrights. While users submit many videos that we can freely use on our own sites, some upload videos from movies and television that may be unauthorized. To be on the safe side, check the source and read the terms of service before embedding. Also note that if you are just copying and pasting the embed code from the video site, it may not validate correctly. If you want to ensure your HTML is standards compliant, try embedding your videos with .swfobject 2.0.

Build a video archive

If you have a video camera, you can also begin to build a video archive on these services just as you would build a photo archive on Flickr. Uploading videos to your own YouTube or Vimeo channel is also a good marketing idea as your channels can provide additional pathways to your site. This works most effectively if you take better videos than I do. My YouTube channel doesn't have many videos and they are mostly rather feeble things like driving through Cleveland in the snow.

If you're a serious videographer you'll want a professional quality camcorder, but for more casual shooters, there are many inexpensive options available. The Flip Camcorder is very popular among bloggers or you can use the built in video features now available in many phones and digital cameras. I shot the bus video on this page with the Canon SD1000 that I keep in my backpack when I'm not carrying my Canon EOS 40D. The video was an experiment I made in which I held the lens against the window to try to keep it steady. Alas it turned out to be somewhat more boring than I'd hoped, but I'm more of a still photographer. I expect you can do better.

When real world imagery won't do: cartoons and animation

I made this cartoon to illustrate my What I've
Been Reading in the Blogosphere page.

Sometimes we just can't find an image or video that quite serves our needs. If you want to illustrate how much trouble you have keeping up with all the blogs you follow, what do you show? Neither a screen capture of Google Reader nor a photo of a person staring at a computer quite makes the point. But a cartoon showing your thoughts just might. If you can draw, you can create your cartoon from scratch on paper or using a program such as Illustrator or Photoshop.

If you can't draw, you still have options. I started using Bitstrips last year to illustrate a presentation I was making. Since then I've made several cartoons—to use here on the blog—when I needed something more specific than a photo. If I had more time I could draw these by hand, but Bitstrips makes it easy to build cartoons quickly and to maintain consistent character styles throughout. Bitstrips is but one of many cartoon creation sites online, I've listed more below.

From text to animation via Xtranormal. If you're active in social media you might also be amused by the one I made called "Robots in Meatspace".

Similarly if you wanted to show a conversation between, let's say, a Web developer and a client who wants bells and whistles, you might not find it on YouTube. You could hire actors and shoot a video, but that might be expensive.

If you can draw and know how to use Flash you can make a nice animation, but it will take even more time than drawing your own comic strip. (I think it took me about 40 hours to create this interactive dungeon animation awhile back.)

Flash may give you more control, but new tools like XtraNormal let you write a script, and create an animation— from your text and stock characters—in a fraction of the time. It took me less than an hour to write and create this video about the Behemoth Corporation's Web project.

There are many ways to illustrate your point

If your Web site is an online catalog for your diamond jewelry collection, you're not going to grab the point and shoot camera to take the pictures. You'll hire a photographer. If you're promoting a luxury cruise line, you'll hire an agency to produce a professional video.

But whether you're a large university, small business or independent blogger, there are many times when having an image archive, or the ability to create something on the fly, will best suit your needs. There are many tools available, all it takes is a bit of creativity. Also remember, when using non-text media to augment your message, be sure to include alternative content for those with visual, hearing or related impairments. Additional media only adds value if everyone gets the message.

How are you illustrating your sites? Are there other tools you've found that help you develop images and other media to better convey your message? If so, please share them in the comments below.

Online do-it-yourself media tools

• Bitstrips
• Pixton
• Strip Creator
• ToonDoo
• XtraNormal

heidicool.com is also on Facebook

Need more Web tips? Fan the heidicool.com Facebook page. I'm posting 1 tip/link there per day to offer ongoing advice on Web design, marketing and social media—without overwhelming your Facebook stream.

As the semester winds down, and the holiday season encroaches, it seems there are more and more events to publicize, greetings to send, end-of-year newsletters to distribute, holiday sales to promote, etc. T'is the season for HTML e-mails. Alas, as many of you know, creating and distributing an HTML e-mail message is far more complicated than building a regular Web site. As we struggled in the days of the browser wars, today we struggle with the myriad ways popular e-mail programs support HTML. Anyone who has had to create an HTML e-mail message, or has received one they couldn't read, knows what I mean. So today I'll present five tips that should help to make your e-mails readable by the masses.

Throughout this article I'll refer to the sample Gothfest 2009 e-mail pictured (in various renditions) on the right. This sample was created with certain features in mind to demonstrate how such an e-mail will render in different programs.

1. Use images to convey a mood or theme, not to present content.

In many popular e-mail programs, the default preference is to have images turned off in incoming messages. Thus many of us receive e-mails with little boxes and some indicator that says "click here to load images." If you are like me, you rely on the remaining text of the message to make you decide if you should bother or not. Recently I received a message from a well-known business magazine in which the only text provided stated only the name of the magazine and its address. The subject line was equally informative in that it said something like "Special News Update from Magazine X."

The rest of the content was contained in .jpg files linked in the message. This is problematic for two reasons:

1. Sighted readers, such as me, have no way to judge whether the message is worth reading (or not) unless we click on the image. If we're busy reading through a long list of e-mails we may just send it to the trash. If the sender didn't care enough to present the information clearly, then why should we care enough to read it?
2. Readers with vision problems who rely on screenreading software have no way to read a message that is part of an image. They are relying purely on the text of the message and any "alt text" provided for the image. This particular message didn't include any "alt text" so the message was lost to such recipients.

We all want our messages to be read. To ensure that they are readable by everyone in your audience, just be sure to include all the important points as actual text. This doesn't mean you can't use images to add visual interest, it just means that your message will be accessible to everyone whether they can see the pictures or not.

In the Gmail screenshot on the right we see a sample message without images. The original file contains two images, a picture of Death and a white background image with shaded edges. Because the content is text-based the main message is available and the alt text provides a description of the missing photo. This would also be readable in a text-only mail program with no colors or styles available.

2. Use Tables for Layout (WHAT????)

Most of us know that tables are meant for tabular data and CSS is meant for style and position. Alas many e-mail programs, including Gmail, don't support the positioning features of CSS. If you want to put text on the left and an image on the right—as I did in the sample— and you can't use the float property of CSS, you're stuck with tables.

To create this layout I made a table that has 3 rows of one column each.

• The top row has a dark background, a green bottom border and contains the title.
• The middle row has a white background and contains another table with one row and two columns.
  • The left column contains a background image, but no background color and features the main text. With images off the white background from the main table will show through so that the text is still easily read.
  • The right cell has a dark background and the Death picture. With images off the picture is replaced with alt text. In our sample this is showing up as black which indicates that the table cell should be restyled to feature a lighter color.
• The bottom row has a dark background, a green top border and the opt-out message. In some of our samples the e-mail is showing up as dark blue which is hard to read against the dark background. In the Macmail version it has been re-styled in a light green that is easier to read.

To get a better idea of how this was set up, view the source code.

3. Use HTML 4.0 Standards Compliant Code to the extent that you can.

Going back in time to use tables makes us feel like we're breaking the rules of HTML, but it is still possible to adhere to standards compliant HTML in e-mail if you use the HTML 4.01 transitional doctype. While adhering to Web standards is a good idea in general, I also find it helpful for testing and troubleshooting e-mail files. When I find a problem in my message, the first thing I'll do is validate the file. This helps me determine if the problem is a simple coding error or if it is due to a feature not supported in one of the e-mail programs I'm testing. By eliminating any coding errors I can then focus on the work-arounds I may need to implement to solve the e-mail specific problem.

4. Use inline styles

Most of us are used to using external or embedded stylesheets. Alas, some programs don't support those. To ensure that your styles aren't ignored, use inline styles to format everything in the document. This takes more time and adds to the code, but will be accepted by more programs. For example, to style the top table cell and the header within, I used the following code:

<th scope="col" width="700" style="background-color:#24333a; border-bottom: 1px solid #87d143; color:#c02c18; text-align:left; font-family: Georgia, serif;" ><h1 style="margin: 10px 30px 10px 30px; letter-spacing:2px;">GOTHFEST <span style="letter-spacing:0; font-weight:normal;">2009</span></h1></th>

To add an inline style to an html element just include style=" " and put your regular CSS information within the quotes.

In this case I styled the top row (which uses a <th> because it is a table header) to have a dark background, green bottom border, red type, left-aligned text and Georgia or other available serif font. The title was put in an <h1> header styled to have 10 px margin on the top and bottom and 30px on the left and right. I also added 2px of letter spacing. I surrounded 2009 with a span styled to use 0px of letterspacing and a normal font weight. I incorporated the letter spacing and the 2009 span changes mostly to see if they would be carried through in the e-mail programs I tested.

Note: When coding for the Web I find padding works better to ensure files work well in IE 6, &, Firefox etc. But I've found that padding seems to fail more often than margin in e-mails, so I use margin to ensure that I retain space between paragraphs in as many programs as possible.

People sometimes worry that they'll lose too much flexibility if they try to stick with Web standards, but this example shows that despite the limited support of CSS in e-mail there is still room for experimentation. These styles worked in most of the programs I tested.

5. Test your mail in several different e-mail programs.

The e-mail standards project provides information on what features are supported by the most often used e-mail programs. These offer helpful guidelines, but the only way to know what will work for your file is to test it in as many different programs as you can. You can do this by installing several programs on your own computer and by enlisting the aid of friends and colleagues. I can access my work e-mail in Outlook 2003, MacMail, Gmail and Case's Webmail, so I send myself messages then check them in each program. I haven't upgraded to Outlook 2007 (as I'd no longer be able to test 2003) so to test that I send messages to my colleague Kim—who patiently lets me look over her shoulder or makes screen captures for me to evaluate.

As my samples indicate, your e-mail will not look the same in every program. That's O. K. The important thing is to make sure that it renders cleanly in each and degrades nicely if images or styles are not available. If you can do that, you will ensure that your message doesn't get missed because of poor formatting.

I can't embed HTML code in Outlook. How do I send an HTML e-mail?

How you send an HTML e-mail depends on your mailing list and the programs you have available. If you're regularly sending mass e-mails to large lists, you may wish to use an e-mail service such as Target X or Constant Contact. There are many such services available. Check with your organization to see if they already have an arrangement with a preferred vendor.

For occasional mailings sent to smaller lists, or via listservs such as those available through https://lists.case.edu, you need an e-mail program that will allow you to insert HTML. Case's Webmail program, found at http://mail.case.edu let's you paste HTML into your message body, but only if you are accessing it through Internet Explorer.

An easier option for most users is Mozilla's Thunderbird, available for Linux, Macintosh and Windows. Thunderbird is free and very easy to install. To send an HTML e-mail just click the "Write" button to compose a new message, type in your recipients addresses and subject line then go to the "Insert" menu and choose "HTML." A box will pop up in which you can past the code from your HTML file.

Learn more about HTML e-mail

• E-mail Standards Project
• CSS and Email, Kissing in a Tree
• How to Code HTML Email Newsletters
• Outlook 2007 change sends HTML email back to the future, for better and worse
• E-mail Standards Project

On the Web it is preferable to place your
caption in the HTML. If that won't work and
your captions are long, you should also link
to a place providing a description of the image
and an alternative rendering of the text.

Colleagues of mine are involved in a project that involves adding captions to photographs. Like many of you, they aren't full-time designers and haven't spent a great deal of time using Photoshop. While they know how to crop and resize photos, they've not yet worked with type. For those of you who may someday face the same situation, here is a quick tutorial on adding text to images.

Establish your project parameters—size matters

Are your captioned images going to be used on the Web, on hand-outs produced by your office printer or in commercial print work such as a magazine? At what size will they be used? When editing your photos you will want to start with the largest image file available, crop it as necessary then resize it to your project specifications before adding your text.

As I mentioned when discussing image formats, your usage will impact your size specifications. Generally you will want an image that is 300 pixels per inch (ppi) for commercially printed pieces, one that is 125-250 for desktop printing (refer to your user manual to determine the maximum dots per inch (dpi) your printer will produce) and somewhere around 72 to 100 for the Web.

Note: measurements for print are exact; if your photo is 300 dpi and 1 inch square, it will be printed to be exactly 1 inch square. If you print it at 72 dpi and 1 inch square it will still be exactly 1 inch, but will have less detail. Measurements for the Web are relative because they are determined by your display. On my Dell there are 77 pixels in an inch, while on my Mac there are 98 pixels in an inch. Your display may be different. As a rule of thumb I just use 72 (which was common for most monitors back in the 1990's) and keep in mind the fact that a 3 inch wide photo at 72 ppi will appear smaller on the Mac than it will on the PC. Either way it is 216 pixels, but the pixels on my PC are bigger than those on my Mac.

Consider the amount of text you are supposed to add to the image. Try to make this as brief as possible, especially if your project will be viewed online. While you may be able to use tiny type on printed matter, that type will be harder to read online. Fewer pixels mean fewer details, so 6 point type online will be tiny and jagged.

Also ask yourself if the text needs to be on the picture itself or if it can be read as a caption underneath the image. If the project is for the Web you can include captions underneath a photo in the text rather than in the image. For situations where that won't work, such as HTML e-mail, just be sure to repeat your caption text in the alt tag of the image.

How to add text in Photoshop

For this example I'll walk you through the steps used to caption the image used in this entry. We'll add text on top of the image and below.

1. Open your image file in Photoshop. For practice you are welcome to use this sculpture photo.
2. Resize your photo by going to the image menu and choosing image size. Make sure that "constrain proportions" and "resample image" are checked. Set the resolution appropriate to your project. I'm using 72 for the Web. Choose the appropriate width for your image. I'm using 240 pixels.
3. Click on the foreground color and use the picker to select a color for your type.
4. Select the type tool, click and drag on the image to create your type box, and start typing your content.
5. If it is not already open, go to the window menu to open your layers window. Note that your type was created on a new layer.
6. Switch to the selection tool to reposition your type as desired.
7. If your background is too busy, you may find that your type is hard to read. Try adding a drop shadow or outline to it. To do this double click on the type layer in the layers menu (click to the right of the layer name). This will open up the layers style menu. Check drop shadow, then click on the words "drop shadow" to see your parameters. Drag the menu somewhere to the side—so you can still see your type—then adjust the angle, spread, size and distance until your type looks clear. You can experiment with drop shadow and other options to create different effects. You can also try changing the color. Just try to keep it simple. (Hot pink type with a lime drop shadow is usually a no-no—unless you're competition is "Hello Kitty.")
8. Sometimes a drop shadow isn't enough. In this case you may want to experiment with darkening the background behind the type. You can use the burn tool to just darken an area (paint over your background with this). Another option is to create a rectangular area behind your type that is darker than the rest. To do this, create a new layer above your background image, and create a rectangle with your selection tool. Using the paint can fill it with black. Now you can leave it as is to call greater attention to your caption, or you can adjust the opacity to the layer to make it semi-transparent. In the sculpture photo I've set the opacity of the black square to 50%.
9. If you've tried a few of these options and your type still doesn't look right, you may want to put the caption below, instead of on, the image. If your project is going on the Web you can do this in your HTML. If you are sending an HTML e-mail though you will want to include it in the image file. To do this, you will need to increase the size of the image. First set your background color to be the same as that of your document. In this example I'll use white. Next go to the image menu and select canvas size. Click on the center top square in the grid then increase your height measurement to an appropriate size. I've added .5 inches. Now just add your type to this area. If you've added too much space you can crop accordingly.
10. Save the file in Photoshop format (in case you want to make edits) then go to the file menu and choose "Save for Web." Select JPEG as your file format then click save. If you would prefer a .tif file (for print) you would instead flatten image (under the layers menu) and save as .tif.

Alternative Text for Captions

Captioning images can add value, but will also pose accessibility challenges. If your caption is short, you should copy it into the alt tag of your image. This will make it available to those who use screen readers or other user agents that don't show images. If your caption is too long, you may also want to link to an alternative copy of the text, either on the same page, as a footnote, or wherever you deem appropriate. Read Andy Clarke's article, Accessible alternatives, to learn more about these techniques. For this example I've linked to a description of the image and text and placed it here on the page:

Photograph of part of a sculpture featuring a man holding an umbrella next to a dog whose nose is pointed at the mans's knee. Captions built into the image read as follows:

• Spot, can't you find a squirrel to chase? You've been sitting here panting on my leg for years now.
• What, and you think this is my idea of the perfect view?
• This caption is part of the image file, but sits below the picture.

In Conclusion

As you've seen, it's pretty easy to add text to an image. The tricky part is making it look right and ensuring that the content is available to all. But with a bit of experimentation you can accomplish both tasks.

In the past I've discussed how the use of photos can enhance a Web site, but I've not discussed the code one uses to incorporate them. On campus, and elsewhere, Web designers use a variety of techniques to include their photos. Some will build complex tables to get their photos positioned just right while others will add something like hspace="5" vspace="5" align="right" into the img tag.

Neither of these is recommended by current standards (the latter is deprecated as of HTML 4.1 but is necessary in HTML e-mail) nor do these techniques give you the control you need. A better way to do this is with Cascading Style Sheets (CSS).

Create a CSS class to float your photos to the right or left of your text

An easy way to include photos is to use the CSS property "float" to float the image to the right or left of the content that follows. One can float either the image itself or a container, such as a paragraph enclosing the image. I prefer to do the latter in case I wish to include a caption with the image.

One begins by opening the page's existing stylesheet and defining a new class to contain the image. On this blog I typically use a class I call "photoright." The code in the stylesheet looks something like:

.photoright {float: right; padding:2px 0px 8px 10px; margin: 0; font-size:90%; color: #7F8E29; font-style:italic; width: 200px;}

Close-up of different pavilion in daylight.
This picture uses a class without the
width defined. I can add line breaks
(with varying results) or let some of the comment
push past the edge. Note how this moves the photo in.

• .photoright is the name of the class. Usually class names don't include things like location and color (in case one wants to change those attributes in the future) but I typically include a .photoright and a .photoleft in all of my stylesheets just to offer some flexibility, and in this case the literal naming convention seems practical.
• float: right; indicates that the paragraph (or other entity such as a div) will float to the right of whatever content follows.
• padding:2px 0px 8px 10px; sets the padding for the paragraph. Padding is listed in clockwise order from top to the left, thus this class would have 2 pixels of padding on top, 0 to the right, 8 below and 10 to the left. Given the existing line-height of my regular paragraphs the 2 pixels on top allow me to line up the top of my photo with the top of uppercase letters in the main text. 0 on the right lets me float the picture as far to the right as the text will allow, 8 on the bottom gives me some space for text that wraps below the photo and the 10 to the left gives me some space between the photo and the text.
• margin: 0; specifies that I have 0 pixels of margin on all sides. I'm using padding to set my spacing rather than margins so that my captions will begin at the same left edge as my photos and because Internet Explorer may interpret margins differently than other browsers.
• font-size:90% indicates that my caption text should be 90% the size of my normal text. Some users may prefer .9em. (I'll leave the merits of various font-sizing methods for a later discussion.)
• color: #7F8E29; indicates that the caption should be lime. In the Case stylesheets this would typically be the same color that one would use for h3's. Because the text is small I've made this slightly darker than the usual lime color.
• font-style:italic; specifies that the caption will be italic.
• width: 200px; is an optional measurement specifying the width of the floated content. This number should match the width of your image and will insure that long captions wrap, rather than extend past the picture. If you plan to always use the same size image, I would recommend setting this width. If you use different sized images, you could establish separate css classes for each image size. Some users may prefer to simply keep their captions shorter than the width of their images or to use <br />'s to break the caption to fit. Note: manual line breaks will look fine on your own computer, but not necessarily on everyone else's. Users who have adjusted the font size of their browser/user agent may still see captions jutting past the image, or line breaks that seem to occur in illogical places.

Apply the .photoright (or .photoleft) class to your page

Once the class has been added to your stylesheet you can begin to incorporate it into your pages. As the image will float to the right of any content that follows, you will want to start a paragraph, using the new style, immediately before the accompanying text. For example, in this blog entry I've put this at the very beginning of my entry:

<p class="photoright200"><img alt="Blue Pavilion" src="http://blog.case.edu/webdev/2007/10/01/bluepavilion.jpg" width="200" height="300" /><br />Night shot of one of three recently dedicated light pavilions on Superior Avenue.</p>

Close-up of first pavilion, floated left.

In this example I've used a class that defines a width of 200 pixels, the same width as the photograph. Note that I've included a line break immediately before the caption. This ensures that the caption starts below the image. Without a break (or a space), some browsers might ignore the width and have the caption begin to the right of the image. The other two pictures are placed farther down in the copy, again preceding the adjacent text. (View source to see exact placement.) The middle image uses a different class that doesn't define the width. I've left some of the caption hanging out so you can see how that works.

Using photoright and photoleft with Case templates

I've included the classes .photoleft and .photoright in the Case template files. These are in the current, and some past, versions. If you are using an older version that doesn't include the classes, simply copy them from the appropriate color stylesheet. Not knowing what size photos one might wish to include, the templates do not include the width measurement, but you may add it in based on the sample above.

That is pretty much all there is to it. If you have any questions, comments or other ideas, please submit them in the comments below.