Cool

At one time or another we've all come across a Web site that seemed heavy on features but low on content. Once upon a time, someone read that Internet users have a short attention span and are attracted to shiny objects like really big photos, videos and animation. Others followed suit and started building sites that looked pretty cool, but really didn't have much to say.

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.