Depending on what your audio-visual sales concept is, you may or may not use the information in this chapter. But many of the best audio-visual concepts do involve web video recording, even if it’s just a quick product demonstration or a testimonial clip tucked into the midsection of your sales page. So even if you don’t think you’ll use this information with your current page, it’s not a bad idea to quickly browse this information anyway. If nothing else, you may get a few good ideas for a more elaborate direct sales site in the future.
In order to really translate your idea into a Web video presentation that you can work with, you’ll need to make sure your camera is equipped with a few vital functions, and you’ll need to make sure and avoid a few common errors for first-time camera buyers.
Above all: make sure that your camera has a jack for an external microphone. We talked about the reasons for this in the last chapter–you need to avoid capturing humming feedback from the camera itself, you need to make sure you can record strong directional audio–but it’s important enough to repeat here. Having an external mic jack frees you from dependence on whatever equipment you start with and lets you record audio in a variety of situations. It also–and maybe more importantly–ensures that you don’t have to record and synchronize your audio separately, in the editing room. Anyone with painful experience editing web video and audio together will appreciate the ability to avoid this extra step.
You can make sure that your camera is picking up both web video and audio in a single chunk of data, you can avoid extra time and technical problems later, and you can ensure that your audio is of the highest quality possible. An external microphone jack: do not try to do without it!
A tripod seems as if it’d be equally as important, but in practice you can often get away without using one. Any indoor shooting you do will probably give you some opportunity to place your camera in a secure location, even if sometime it takes a little bit of imagination to do so. Outdoor shooting will invariably be more complicated and it’s worth investing in a tripod if your sales concept requires a lot of outdoor shooting or testimonials that you plan to film on site. (Whatever you choose to do, make sure that you don’t just fall back on holding the camcorder in your hands: it’s shaky and irritating to watch and it just looks unprofessional.)
How your camcorder records film is another important issue. The choice of which recording method you want to use is going to depend on what software you plan to use to edit your footage into something you can put on the web. Ideally, you’ll want to start with the highest resolution, frame rate, and picture quality that you possibly can–streaming or downloading Web video on the web always requires some loss of quality, and the more high-resolution your raw footage is, the better you’ll do after compression.
There are plenty of different options for actually saving your Web video data. But in reality, there are two workable options: mini-DV tapes, or an on-board hard drive and a direct USB connection.
(Don’t even think about trying to use non-DV formats for filming audio-visual material: you’ll have to invest in expensive “capture cards”, you’ll suffer a major loss of web video quality, and you’ll simply add endless amounts of hassle to your development cycle with no clear reward.)
Mini-DV tapes have the distinct drawback of being expensive, unless of course you keep erasing and reusing old tapes. Doing that, though, eliminates one of the best advantages of the mini-DV tape format: archiving your footage. One man’s trash is another man’s treasure, and if you can’t use that nice exterior footage you filmed for this project, you can certainly use it for a future audiovisual project without spending extra time on filming things twice. You also have a permanent backup of any critical footage (an interview with a difficult-to-contact but well-known actor who uses your product, maybe), in case the worst happens, you lose your edited movie files, and you have to start over from scratch. Over time, you’ll likely find that the added peace of mind and convenience of having your footage backed up far outweighs the hassle and cost of buying tapes.
A direct USB connection is the other viable option. You lose the ability to store all of your footage, since you’d have to store it on a computer rather than on tapes, and your footage will quickly eat up too much of your hard drive space if you’re filming at high quality. But you do save on the cost of tapes, and you do have the ability to quickly grab the day’s footage from your camera and shoot it directly into your editing software without any hassle. Mini-DV tapes sometimes require complicated interfaces in order to get your footage into your computer, and transferring your footage from peripheral to peripheral can lead in a worst-case scenario to losing significant amounts of quality. If you don’t want to mess around with this problem and you don’t think you’ll need to retain much of the footage you’ve been shooting for future projects, just make sure your camcorder has a USB connection (honestly, you’d have to work pretty hard to find a new camcorder that doesn’t.)
The only other thing to remember when choosing a camcorder is, of course, to test it out before you buy it. Make sure you like the control options–zooms, resolutions, effects. Make sure you like how the camera captures and displays light: if everything looks overexposed and difficult to make out just in your test footage, you’re not going to want to wrestle with the thing for your entire project. And again: make sure that the camera’s resolution and file format works with your editing software, and that it’s reasonable as far as how much memory it takes up. There’s no point in getting perfect footage if doing so will inevitably crash your editing software.
No one expects you to hire John Gielgud to be in your software commercial. That said, though, you don’t want to go as cheaply as possible where actors are concerned. It just takes one halting delivery, problematic accent, or other flaw to turn your site into the laughing stock of the Internet. Either use people in-house who you can rely on to represent your product, or consider investing a little bit of time in finding an actor or actress.
This isn’t as expensive as it sounds, especially if you’re near a major city. Any college town or large urban center will have a population of actors, many with impressive technical training, but few actual production credits as yet. If you find a sufficiently young and resume-poor actor or actress through online creative services sites (Craigslist being a classic option) or through other channels, you can often convince them to do a day or two of shooting with you for nothing but the experience of being on camera and a good letter of recommendation to future potential employers. There’s plenty of talent out there waiting to be discovered, and there’s no reason to let it lie fallow when you could put it to work for you or your project for almost nothing.
If you live in a rural area or just don’t have a good local talent pool, you’ll have to use someone in house. There are endless books written about the difficulty of casting, but as a general rule, pick someone with a pleasant, friendly face and pick someone who’s easy to understand. It’ll make your content seem more professional and it’ll provide a more positive emotional branding for your product.
And if you simply don’t have other options, don’t overlook the power of testimonials. Get some friends of yours who’ve used your product and who like it to let you record them talking about how much they enjoy the product. In this case, their lack of technical acting training is an asset: it’ll give your production an air of authenticity and make the testimonials that much more convincing. Plus working with friends is an all-time good deal, since they’ll most likely be excited enough by the prospect of appearing in your “commercials” that they’ll work for friendship, or for free.
Professional lighting probably isn’t in your budget, but it’s not usually a good idea to rely on natural lighting alone. Natural lighting on web video tends to make an image look flatter than it would otherwise be, washes out colors, and just makes your image look drab and home-made. It doesn’t really separate your content out from anyone else’s.
You can get a professional lighting effect without paying professional fees, though. If you’re shooting indoors, all you’ll need is two light sources–three, if you happen to have a spare lamp lying around.
One light is your primary lighting source, responsible for creating strong areas of light and strong shadows. Another light, placed directly opposite the first but further away, is responsible for filling in and softening some of the shadows created by the first light, but still preserving the greater contrast and definition. The third light, if you’ve got one, is small and placed behind the image you’re shooting in order to provide a little bit of separation from your background.
That’s really all it takes: three light bulbs and some creative ideas for placement. Jack Black (of all people) provides a good tutorial for creating this lighting setup at acceptable.tv (full URL:
http://acceptable.tv/tutorial/18 ) The presentation is a little bit absurd and the tutorial is more geared for creative/dramatic work than for commercial purposes, but the information about how to design a lighting setup and place individual lights is simple, solid, and usable. (The integration of the Web video player into the design of the site itself is also something you’ll want to pay attention to, since the custom coding and visual distinctiveness of the video player is what gives the acceptable.tv site a great deal of its charm.)
Depending on what your basic concept is, you may need to plan your Web video recording sessions to take into account the process of chroma-keying. Chroma-keying can be an incredibly powerful, cost-effective, and exciting tool to make your Web video projects more dynamic and visually interesting. But it also gives you a host of new challenges to deal with in your shooting and can lead to some serious technical problems along the way if you’re not careful.
Chroma-keying, often called “bluescreening” or “greenscreening”, is the process of filming actors, set pieces, and other foreground elements in front of a large solid green or blue-colored screen. The raw footage is then taken into editing software and the solid color is removed entirely, allowing the editor to place an entirely different image in the background. Most TV weather reports use chromakeying to superimpose the image of the weatherman on top of a map, for example. Chroma-keying is also a commonly used technique in modern CGI-fueled motion pictures–the recent Star Wars prequels, for example, used green screens almost exclusively to create elaborate digital backdrops.
The word “professional” here does not have to mean “expensive.” There are plenty of online tutorials, notable for its focus on sensible budgeting and easily-found materials) that teach you how to make your own chroma-key screen that’ll give you professional performance on a modest budget. If you want to do something interesting in the background of your Web video–placing a spokesman talking about GPS functions on top of stock footage of cars racing through deserts, for example–you’ll want to invest some money and time into chroma-keying.
There are two critical points to remember when preparing to shoot chroma-keyed footage.
One: make sure that you light the scene deliberately in order to limit the number of shadows and highlights that show up on your chroma-keyed backdrop. Strong shadows or lights change the apparent color of the chroma-key backdrop in your raw footage, and you won’t be able to remove the area of shadow from your footage without a lot of messy frame-by-frame hand editing. If you light everything to eliminate shadows you can save yourself an infinity of headaches down the line.
Two: make sure that your editing software can deal with chromakey footage adequately! Badly-done chroma-keying leaves your image with large, weird areas of color in some frames, which looks much worse than no chroma-keying at all and will definitely break your emotional connection with your potential customers. In the next chapter, we’ll discuss some of the most common editing suites in detail, with some specific focus on this issue.
Actually filming your audio-visual project is extremely complex, the subject of entire film school courses, and well outside the scope of this book. There are a few key principles to remember, though, in order to save yourself some hassle later on: shoot multiple takes, make sure your key images are large and interestingly framed, and shoot enough footage to give yourself some leeway in editing.
Shooting multiple takes is just common sense. You might shoot what you think is a perfect take of a testimonial, leave your shooting location to plug your footage into your Web video editing software, and find out that your microphone wasn’t plugged in correctly and didn’t pick up any sound whatsoever. Or you might find that your sound levels are fine, but you’ve inadvertently cut off one of your performer’s heads or even your product’s logo. Or you might find any number of things that would have been easy to fix while you were actually shooting–but you’re not shooting any more, and to go back and reshoot will cost you money and time. So shoot multiple takes, even if you don’t think you’ll need them:
better to be safe than sorry.
Framing your images is a huge film-school subject, but here are a few guidelines: make sure that whatever the subject of the scene is fills up most of the camera frame, and try not to center your images too closely. If you frame your subjects too loosely and leave too much of a blank border around your image, you’re wasting space and you’re making your footage look much less interesting. Why would you want to film the walls of your garage when you could be devoting that space to a bigger close-up of the new power tool you’ve invented? The rule about centering is less vital, but it’s still a good trick to remember: placing your primary subject slightly away from the absolute center of the camera’s focus adds visual interest to your footage, engages your viewer’s attention, and makes your audio-visual presentation much more interesting.
But some of these issues are just icing on the cake. Your basic concerns with Web video recording are simple: make sure your images are clear, make sure you can easily transfer your footage to editing software, and make sure you leave yourself plenty of leeway when it comes to editing.
(And again: get an external microphone jack! If you follow that advice and you also buy a good external microphone, you shouldn’t have any problems with recording and synchronizing good audio. If you don’t follow our advice or buy a good external microphone, at least you’ll be getting a lot of good, tedious practice at synchronizing audio and Web video in there, and you’ll be making sure that your hearing and your potential customers’ hearing gets a good workout.)
Finding a good Web video editing software package is only half of the battle. No matter how easy it is to transfer footage from your camera to your editing program, no matter how easy it is to get the chroma-key effects you want, and no matter how intuitive your drag-and-drop interface is, you’re just not going to end up with a good audio-visual project without a grasp on how to professionally edit video. This sounds a lot more frightening than it is. Editing isn’t actually hard, and once you learn the basics it can be one of the most rewarding parts of building an audio-visually enhanced direct sales site. But you’ve got to learn the basics first.
These rules for editing apply across all Web video projects, whether it’s a three-film epic fantasy or a ten-second product demonstration on a website. There are some special conditions for the latter type of project, which probably resembles most closely what you want to do with your direct sales site. But it’s still important to know the general rules first.
An editor, believe it or not, is the most important person in the production and assembly of any footage. A writer, director, or cameraman can decide what needs to be shot, decide how to shoot it, and make the actual raw footage look good, respectively. But an editor determines how you’ll experience that footage. Should you see the product for two seconds, or ten? How tightly does the flow of shots need to be tied to the music you’ve chosen? The editor looks at this footage, determines how one shot flows into the next, and controls exactly what the viewer sees and when he or she sees it.
Anyone with marketing experience knows that small changes have huge subliminal effects. It only takes one shot running long, one strange transition between shots, or one botched sound effect synchronization to knock your viewer out of experiencing your tight, professional project.
So learn these rules and make sure you use them:
Don’t leave gaps of silence at the beginning or end of any individual scene. These gaps are invariably going to be in your raw footage, just because it takes a moment for the camera operator to start recording, to let the performers know that the recording is happening, and for the performers to start performing. Snip those little silences off, every time, or you’ll break up the experience and seriously bore your customer.
In fact, don’t use silence at all unless there’s a very good reason for it. An example of a very good reason: you’re promoting a soundproofing product and you want to demonstrate how it completely cancels all sound. If your reason for using silence is any less critical than that, don’t leave any silent moments. You could be using that time and bandwidth to talk about your product instead.
Don’t overuse wipes, fades, or other fancy screen transitions to get from one shot or scene to another. If you’ve sat through a lot of amateur PowerPoint presentations in the past, you understand exactly why this rule is here. Transitions are extremely obtrusive, break your viewer’s experience, and above all take the focus away from your product and put it onto your fancy transition.
Do, on the other hand, use unobtrusive transitions. If you’re switching from a clip of a spokesman talking about product features to a clip of the product itself, have the spokesman end by mentioning the product, or just have him point off screen toward where the product presumably is. Using no transitions at all makes your presentation look too choppy and pieced-together. If you can’t think of anything else, at least announce the next scene in the previous scene, as unobtrusively as possible.
Don’t try to cram too much material into too short a time. If you think of your project as a TV commercial where everything you say needs to bring up a new idea or product feature, you’ll end up coming on too strongly and you won’t give your viewer any time to think about your product or build any emotional interest in it. For every line of hard factual information, give at least one or two lines of commentary, emphasis, or illustration. If you space out your ideas a little bit (without leaving silences, of course), they’ll not only register more deeply in your viewer’s mind, but they’ll seem more convincing and his interest will be much more piqued.
Be careful about how you use sound effects and audio. If you’re using sound effects to emphasize a point (for example, having a chime sound play when your presenter points to the product), you need to make sure that the effect is very precisely timed to play exactly when it feels natural to play it. In our example, if the chime plays even a second before your presenter’s finger is pointing, it’ll seem very jarring. Audio tracks playing in the background are a little bit more forgiving, but you should still try to match the pace of your music to the pace of your scene–don’t play a slow ballad over footage of a car speeding through a series of breakneck turns, for example. Don’t overuse audio and sound effects either, unless your design concept is wordless. If someone is speaking about your product (as will be the case in probably 95% of presentation concepts), let the focus remain on what they’re saying, not on your cool background music.
As a rule, don’t let your presentation run on for more than a minute. If your product has a lot of features that need very precise explanation, this rule can be relaxed. But for the majority of products, letting your Web video go on for more than a minute–or even half a minute–won’t add much information to help your viewer make a decision, needlessly distracts him or her from looking at your actual sales letter and ordering page, and just leaves a bad impression all around. Even if you’ve got a ton of footage, don’t be compelled to use all of it: use only what makes the strongest impression, and try to fit everything into the space of a minute. If you can’t fit a shot or a scene into that space of time, consider cutting the shot or frame.
Don’t move directly from the editing room to posting your Web video on your site. Once you think you have a good final cut, leave the editing room and give yourself at least a day. After a long time spent editing Web video and paying attention to every tiny cut, you lose some of your critical ability and you lose your sense of “seeing things for the first time.” If you take a day between making your final cut and checking out your completed Web video, you’ll notice technical problems or slow patches more easily than you could before. It’s also a good idea to let friends or family members look at your work and give you feedback on it–if they’re bored or confused by your editing choices at any point, it’s certain that your customers will be too.
Bottom line: don’t waste your viewer’s time, and don’t confuse him. Make your points without leaving any silences, make sure there’s a clear progression of thought from one scene to the next, and make sure you don’t overwhelm your viewer with information.
Editing is a subject far too complex to cover here in as much detail as the subject deserves. For some specific, free information on how to achieve certain effects in certain software packages, try this Google: Web video+editing+articles. You’ll find the articles are professionally done, they cover a wide variety of editing software solutions and a wide variety of situations, and there are plenty of Web video tutorials to give you a really good grasp on exactly what you’ll need to do in order to achieve the effects you want to achieve. It’s not film school, but in a quick development cycle and on a tight budget, it’s hard to do better than comprehensive and free.
Advanced editing effects–menus, bullet points, scene titles, and elaborate backgrounds–are an excellent way to spice up your presentation, to make it give off an air of professionalism, and to let it stand out from the rest of the direct sales sites out there. Advanced effects are also cheap to produce (depending on the editing software you’re using, of course) and don’t take much of your time either. They also don’t take up much of your viewer’s time, since an effect, once it’s placed into a sequence of footage, can just stay on the screen, letting your viewer look at it at his or her own pace. It’s a nice way to get the best of both worlds: the time-independent advantages of text, plus the drama and impact of Web video.
Because of all of their advantages, there’s a tendency on the part of first-time editors to use too many effects in a single presentation. Avoid this temptation, for the reasons we addressed earlier in the chapter. Too many effects start to get confusing for your viewer and make your presentation seem either crass or incomprehensible.
When should you use advanced effects? One rule: never use advanced effects for their own sake.
What does this mean in practice? Say your product is a new piece of graphics software with an innovative GUI. Your presentation shows a screen shot of the GUI in use. It’s easy to make overlay menus and effects, so you fill up the entire screen with them, labeling every interesting new button and feature all at once. Then you let this complicated overlay play in the background while your presenter is talking about all of the great features in this new program.
The problem here has to do with the advantages of advanced effects that we just talked about. Advanced effects, especially overlay graphics, give your viewer something information-dense to look at and to read while your presenter is talking. That’s all well and good. But if your viewer is spending too much time reading and deciphering your overlay graphics–figuring out exactly what each label on each button in our GUI says, in the example–then that viewer isn’t paying attention to what your audio track is saying. You spent a lot of time on that audio track; it’s key to your design concept, and you want them to pay attention to it. So don’t give your viewer other things to pay attention to!
Here’s a good way to use overlay graphics. Take the same GUI example. Your presenter is talking about the advanced features it gives you. As he talks about each feature, add the overlay graphic for that feature and that feature alone to the footage. The viewer’s attention will go to the feature; he’ll read the information in the graphic, and his mind will be back on what the presenter is saying before you know it. It’s elegant and it actually heightens what the presenter is saying, visually emphasizing his points. And once the information is on the screen anyway, you can leave it there for the rest of the speech or take it off, depending on what your concept is.
Overlay special effects can be fun, but should also be used carefully. Say your presenter is talking about a new hypnotherapy CD that you’re trying to sell. The presenter throws up his hands when talking about the “power of hypnosis”, and you use your editing software to add a quick animated lightning flash. It’s definitely funny, cheesy (in an endearing way), and dramatic, but it can also get distracting if used too much. If you plan to do this kind of thing, try to avoid doing it more than once or twice per Web video.
Chroma-key effects are a different story, since in order to include them you have to be planning to film chroma-key footage from the concept stage onward. In other words, it doesn’t make sense to say “use chroma-key effects sparingly” if all of your footage is filmed against a green screen. What you can do, however, is make sure that your chroma-key effects look as seamless as possible. When possible, try to use existing photographic backgrounds, large, crisp images of your product, or anything that doesn’t look blurry, stretched or visually distracting. And above all, make sure that you can make out your presenter or your product against a chroma-key background. There’s little worse than having your presenter’s red shirt disappear against a sunset background, or similar color mishaps.
How you create your advanced effects is going to depend on how complicated your software package is and how much time you have to learn how to use it to its fullest potential. If you’ve spent money on an elaborate package, you probably have some nice options for adding overlays and titles, as well as some options for chroma-key effects. If you’re using a freeware editing package, you may need to download some additional programs in order to get the effects you want. Fortunately, some of the best advanced effects editing programs are freeware–so in some cases, two wrongs do make a right.
ZS4 is a newer, freeware Web video editing package designed specifically for letting you add interesting effects to your footage. It can be downloaded at http://www.zs4.net/. The site features plenty of video tutorials on how to use the software to get certain effects, all of them thoughtfully arranged in ascending order of difficulty–you can either go straight through from the easiest projects to the hardest in order to learn everything about the software, or you can pick and choose from tutorials for specific effects that you want to include in your project. It’s a very nice package, will let you do plenty of effects from chroma-keying to audio synchronizing and overlay effects, and it’s very difficult to beat the price.
A good tutorial on how to achieve good transparent Web video effects can be found here:
http://www.totalwebvideo.com/hacktrap/effect/index.html There’s an excellent Web video tutorial that takes you step by step through the process of achieving transparent effects, from filming to software to implementation on the page. The tutorial focuses on some specific software packages that you may not have, but the same basic principles for getting the effect should apply in whatever software you use.
Using transparent Web video effects is another story. Transparent effects are usually used to create “pop-in” advertisements that hover over the text of a page, requiring you to finish viewing the advertisement before you can go on reading your content. There’s no reason you’d want to use this on your own page: why do you want to prevent your viewers from reading your text content, which is, after all, your sales letter? In addition, pop-in ads have a very bad reputation online, irritate users, and are more often than not automatically blocked by modern browsers. So unless you have a very good, conceptual reason for using transparent pop-in video effects, it’s best to leave well enough alone. Apply the same principles to chroma-keying or place your transparent video someplace unobtrusive on your page and let yourself have the technically impressive solution without irritating your customers.
Even the best-edited, most technically impressive Web video in the world isn’t much good if your site doesn’t display it to its best advantage. It’s important to design your site in order to show off your audio-visual content without distracting viewers from important textual information about your product–and above all, without preventing viewers from converting their interest in your presentation into an actual sale of your product.
The key principle when it comes to placing your AV content on a page is this: never allow your AV content to distract from your sales letter–or, God forbid, your download/ordering page. These page elements are the core of any direct sales strategy, after all; your audio-visual content is just there to help the sales strategy work more smoothly. If the audio-visual content overshadows the basic sales information and procedures, you’ll not only irritate your viewers but you’ll find it much harder to convert a casual web browser into a paying customer.
Here’s a situation you want to avoid. You’re advertising for a new kind of nonallergenic house paint that you’ve developed. Your potential customer runs a Google search on “nonallergenic house paint”, finds your page, and loads it in his browser. All of your sales text and your logo shows up and he eagerly begins reading. Just then a gigantic swath of brightly colored paint streaks across the screen, obscuring the text.
Your viewer watches as more swaths of paint go by, slowly covering the entire page. There’s no way to skip your content or to go to a different page on the site. He’s forced to sit there and slowly watch the paint fill up the screen, to watch your logo appear, and to watch a list of features for your product spill out while exciting music plays.
This is a fairly dramatic presentation, and it no doubt took you a long time to shoot, edit, animate, and optimize using chroma-key and transparent Web video pop-in techniques. But none of that work matters, because now your viewer is angry that his viewing experience was interrupted. He presses the back button, checks out other products by rival businesses with less flashy websites, and you never see him again. You put the presentation ahead of the content and you paid the price in lost business.
This doesn’t mean that you should be ashamed of your AV content and stuff it into some faraway corner of your site. You spent a great deal of time on it, after all, and you’re counting on it to build emotional identification with your product, to impress your customers with your professionalism and creativity, and above all to convert viewers into customers. So it’s vital to make sure that your AV content gets noticed as soon as your potential customer lands on your page, that it does its work quickly, and that your customer can appreciate it without becoming irritated.
One ideal solution is to use a “front page” for your site. The front page works as a landing page and should always be the index page for your site. When users arrive there, they’re shown your primary audio-visual content: a sales Web video, an advertising presentation, or something similarly elaborate, flashy, and informative. If your video does its job, it should grab the viewer’s attention, inspire him to know more about your product, and help with the process of converting him into a customer.
Here’s the vital rule with using a front page on your site: if the viewer isn’t immediately impressed by your AV content, you should always give him an option to skip it and go directly to your sales letter. Even if your viewer does watch your Web video all the way through, you should set up code to redirect him automatically to your sales letter at the end of the presentation. This wastes less time, inspires him to start reading your textual content immediately, and helps make the journey from front page to order page much smoother.
Even our paint swath negative example from earlier can become something interesting if we use a front page. Say the splash page brings up a parody site, representing a nonallergenic paint product by a fictional competitor. The viewer begins reading the fake text content on the parody page, frowning as he sees absurd or humorous claims represented in the sales letter. Then your paint swath demonstration begins. At first, the viewer will be irritated, but once he sees your logo, he’ll realize that the first page he saw was an elaborate practical joke and he’ll be impressed by your creativity and interested to see information about your product.
You can have fun inventing ludicrous claims for your fictional rival (claims that contrast positively and interestingly with your own product information), can show off your technical know-how and editing experience to good advantage, and most importantly, can present yourself as a fun, creative company with a good and equally creative product to sell. As long as your front page doesn’t wear out its welcome or pull your viewer away from your actual sales text, you can do any number of similar tricks without having to worry about page layout or being overly distracting.
(One major caveat with using a front page approach: it’s important to make sure that Google search results that mention your page direct viewers to your front page rather than to your actual sales letter. Since all of your actual text content is in your sales letter, there’s a danger that search engine “spiders” will just link directly to that letter–which isn’t a terrible fate, except for the fact that you’ve spent all of this time creating great audio-visual content that no one will see!
A quick fix for this problem: code your page to include an auto redirect to your front page for first-time visitors, before your sales page even loads. This has two advantages: you’ll make sure that everyone who comes to your page for the first time sees your excellent AV content, and you’ll also make sure that repeat visitors don’t have to sit through content that they’ve seen plenty of times before. Think about your favorite movie in the world: would you want to have to sit through it every time you walked in the Web video store?)
If you don’t want to deal with some of the extra technical hassles of setting up a front page, or if you’re concerned with preserving the “three click” rule of direct sales (the three click rule: upon landing on your site, customers should be no more than three clicks away from making a sale), you should try using an embedded Web video approach to placing your audio-visual content on your site.
The key to an embedded Web video solution is to place your video content somewhere unobtrusive on the page, while still making it prominent enough to do its job. There are two good places to do this: in your menu bar, or in the second column of a two-column layout.
If you’re pursuing a direct sales strategy, your menu bar is probably not a prominent part of your site design. (Since direct sales sites by design are linear, leading customers from the landing page to the ordering page with a minimum of deviations and side links, it doesn’t make much sense to include non-linear menus.) Still, you probably have at least a link or two leading to your download page or to a contact page near the top of your page design. You can use this space to embed a small Web video player or other piece of audio-visual content.
Why does this work? For one, creating a menu bar is such a standard practice in web design that viewers instinctively expect to find one at the top of a site. If your viewer’s eyes are going to that spot anyway, they might as well find your Web video content there. For another, menu bars invariably appear “above the break” in page design. The term, a holdover from newspaper layout, refers to the part of the page that’s visible before the viewer scrolls down. If you keep your embedded Web video in the menu bar you ensure that it’s always above the break. (If your menu bar is enabled by DHTML or Java code that keeps it always visible on the page, no matter how far down your viewer scrolls, that’s even better.)
There are disadvantages to this strategy as well. Most crucial is the fact that a menu bar player can’t really be large enough to display your Web video effectively without breaking the page design and pushing your actual sales letter below the break–not the ideal solution by any means. Since a menu bar player has to be small by definition, your video won’t appear very impressive on the page and you won’t get nearly the conversion mileage out of it that you could by displaying the video at full size.
This works, despite being a pop-up, because you’re not forcing it on your viewer, but inviting them to click in order to see more. Chances are that they will if your Web video is visually arresting, even at a small size, just to see more clearly what’s going on. The only reason you want to avoid pop-ups and obtrusive players in the first place is to prevent your content from irritating, interfering with, or driving away your viewer. If you invite them to make the decision for themselves, you won’t do any of these things, and you can sidestep some of the worst disadvantages of the embedded video solution.
A better solution in many cases is to place your Web video in the second column of a two column layout. (This is the approach taken by plenty of major sites, including nytimes.com and salon.com.) This doesn’t distract from your text, since the text is still in the left column and can be read easily by the eye. But your video will still be noticed, since viewer attention quickly jumps to images before it settles on text. Space issues can also be resolved by using the “resize” trick we talked about in the last paragraph.
The only drawback to this approach is the potential technical issue of implementing a two-column layout in HTML and CSS just for the purpose of displaying Web video content. If you’re thinking about adding advanced audio-visual functionality to your site, you probably have at least some grasp on HTML and CSS layout practices (or at least you know or employ someone who does), and two-column layouts aren’t difficult to implement for someone who knows what he or she is doing. If you don’t know much HTML and you just want to quickly put up a sales page with some interesting videos, though, this may not be the best option for you. A menu bar player is much easier to set up, despite its disadvantages, and often the video playing code you use will include resize capabilities as part of its features list.
Both of these approaches display your sales content well without distracting from your sales text or your download links. One issue that you need to think about with either approach, however, is the question of whether or not to autoplay your Web videos. If you decide to make your videos autoplay, you ensure that your viewers will pay attention to the videos, but you’ll also potentially distract or irritate them. If you decide not to make your videos autoplay, you save your viewers from irritation, but you run the risk of them not noticing or exploring your content altogether.
Follow this rule of thumb when making your decision: if you’re using a menu bar layout with a small-size player, go ahead and let the Web video autoplay. If you’re using a two-column layout, it’s better to let your viewer decide when or if to watch your video content. Because the menu bar is smaller, the content is much less obtrusive and it’s easy to focus on the text. Because the two column layout can display your video at something close to its full size, autoplaying can get distracting much more easily and you start to run a few too many risks as far as keeping viewer attention goes. (If you’re using a front page solution, of course, there’s no reason whatsoever not to autoplay, since the whole purpose of a front page is to show off your content but nothing else.)
Side pages are normally a taboo when it comes to direct sales web design since by definition they violate the “three click” rule. If your viewers are jumping away from the linear flow of your page to look at extra information, they’re not proceeding to the download page and your conversion rate tends to drop. Some forms of Web video content, however, are best displayed on side pages and provide a justification for violating this usually ironclad rule.
Throughout this book we’ve been assuming that your audio-visual sales concept focuses on one major demonstration Web video, with a few additional product demonstrations, tutorials, or testimonial reels along the side. If you put all of that extra content on your front page, you’re almost certainly going to overwhelm your viewer. More importantly, you’ll distract your viewer from your major video, which you’re counting on to do most of the work of highlighting your project’s features and providing your viewer with the strong emotional identification that influences sales.
One solution that you might consider, if you’re already planning to use a Web video player that “pops up” on being clicked, is to include text links to your supplementary Web videos. You can place these either in your menu bar or in your second layout column, depending on the solution you’ve implemented. Each of these links will pop up a window showing the appropriate Web video. This works because you’re still relying on the visual presence of your major Web video to provide the dazzle, so you can under-emphasize your supplementary links to some extent by leaving them as text: “Click Here to see Testimonials”, for example. (This also helps to make a two-column layout or a menu bar look more well-balanced compared to your sales letter while still preserving the flow of a direct sales page.) Since you’d be using a pop up window, the viewers won’t ever actually leave your main sales page, maintaining the three click
rule and allowing your sales strategy to work while still giving viewers access to the Web video content you’ve spent so long on.
If you don’t have a major demonstration Web video for your main content page, you can sometimes get away with putting all of your product demonstration Web videos, testimonials, or other short Web video clips in the second column of a two-column layout. (A menu bar solution is simply impractical for this.) In this case, your audiovisual content is functioning more or less as a series of illustrations of ideas in your sales letter that your viewer can choose or not choose to view at will.
You can heighten this effect by actually including directions to view certain Web videos at different places in the sales letter. Every feature in your features list, for example, might contain an instruction like (“View Video #2 to see this in action.”) Your viewer can then look at Web Video #2, be impressed, and return to the same place in the sales letter. This lets you preserve the linear flow that makes direct sales design work, while still letting you put up plenty of interesting audio-visual content.
If you’re using the front page approach, deciding where in your code to place your audio-visual content is easy: the code can be the page code itself. If you’re using an embedded video approach or even a side page approach, deciding this can be trickier.
The question matters because of search engine optimization and cross-browser support. Although HTML coding is standard, different browsers interpret code differently. The major browsers (currently, Firefox, Internet Explorer, and the Mac-centric Safari) all work in similar ways for layout purposes, but some older or specialty browsers (the Lynx browser, Opera, or text-exclusive browsers) could cause you some problems when it comes to crossbrowser support.
In general, it’s a good idea to place all of your embedded video content in a single, separate <div> tag in your page. (If you’re not coding-savvy, think of the <div> tag as a kind of outlining shorthand for web layout. A page might be divided into <div> tags representing title/header information, content, menus, advertising resources, and credits, among others.) This ensures that crawlers will look at your page appropriately and that your video content won’t ever interfere with your text content when the page is viewed in a non-standard browser.
This isn’t an ideal solution, but when it comes to non-standard browsers, there’s no really good solution for displaying video content. At the very least you can keep the two types of content distinct and let your viewers sort it out–if they’re using a nonstandard browser, they’re probably used to doing that anyway.
You’ve got a great audio-visual presentation for your direct sales site: now how do you get it into your customers’ hands (or more appropriately, hearts?) As Betamax users the world over learned, the best video in the world is useless without a stable, usable technology to play it.
In the past, when video technology online was at a slightly younger stage than it is currently, picking the right technology to play your videos was a lot like making the critical VHS/Betamax choice. If you invested in Media Player X from company Y and made all of your videos compatible with and deliverable by that media player X, you ran the risk of having to redo all of your work once the
“install base” for Media Player X dried up and migrated to New Technology Z. At present, the “file format war” has settled down to some extent, and there are only three core technologies you’ll want to decide between: Flash, streaming video (albeit in a variety of forms), and direct download.
Whatever solution you pick is going to involve three issues:
In other words:
You have to worry about the development costs of integrating your media player software with your existing page code and server architecture.
You have to worry about the cost of your delivery technology on your server–specifically in terms of performance and bandwidth. You have to worry about how easy it is for your end users to see your technology.
If you look at each of our three major strategies in the light of these three core values, you’ll be able to make a decision that makes sense for your particular hosting situation.
Adobe (formerly Macromedia) Flash is one of the premiere technologies for delivering animation, games, music, and other audio-visual content for the web. The technology is so stable, simple to develop for, and all-pervasive (in terms of install base) that an entirely new school of web design has sprung up using Flash as its core technology (Flash menus, buttons, and other dynamic tricks.) Websites that feature nothing but simple Flash games and animations are still some of the most highly-trafficked and critically-regarded sites on the Internet.
What’s more, according to a study performed by Macromedia (found here:
http://www.macromedia.com/software/player_census/npd/), an estimated 98-99% of Internet users worldwide have the Flash plugin installed in their browser. In short: you could do far, far worse than to rely on Flash technology to deliver your AV content.
Looking at Flash from the point of view of the three core principles: coding in Flash can be a double-edged sword. On the one hand, existing Flash code–third-party media players, for example–is extremely easy to integrate with standard HTML and CSS, far easier than compatible streaming video solutions like QuickTime or Windows Media Player.
On the other hand, actually coding your own Flash interface requires you to learn a new programming language and set of techniques, and may complicate your development cycle if you need to set up your videos to play in a certain way as a part of your overall design concept (autoplaying videos, DHTML-enhanced “scrolling videos”, or other bells and whistles.) There are a number of good, easily-implemented third party interfaces to offset this factor to some extent, but it’s something to keep in mind when choosing your delivery technology.
(N.b.: For a good–if technically dense–tutorial on how to integrate Flash code into your site, check this forum thread:
http://www.webmasterworld.com/forum104/649.htm. This not only covers the step-by-step procedure for pulling footage from a camera and plugging it into Flash, but it also goes into some detail about dealing with page design issues like relative size in pixels, thumbnailing, and other potential issues. Despite the relative age of the thread (2005) and its forum-ese presentation, it’s a helpful reference to have.)
In terms of bandwidth cost, Flash has a clear advantage over its rival technologies. Flash video can compress down much further than other streaming solutions, due to its reliance on vectorized graphics and code-based solutions. Most streaming video treats video files as essentially a succession of images playing in sequence, functionally equivalent to a filmstrip or comic book. Flash video still works like a filmstrip, but it simplifies each frame through vector-based compression algorithms and relies on code to do much of its work. The result is that your videos tend to look crisper and load more quickly.
In terms of compatibility, there’s no contest: as we said, something like 99% of the Internet has Flash software installed on their machines already. Flash loads quickly, works on a variety of machines, and comes with plenty of pre-made third party video player interfaces with intuitive CD-player like controls for playback.
The bottom line: for most concepts, Flash is the clear winner, with the only major potential issues being image quality and security. (For reasons why you might encounter problems with security when using Flash technology, take a look at our chapter on different issues you may encounter once you’re finished building your site.) If either of these are important to you, you might want to experiment with different solutions.
Streaming media refers to players like Quicktime, Windows Media, and RealPlayer. The difference between these players and Flash is that these players don’t deliver video content by relying on a codebased interface. Flash compresses all content, pre-loads it on your page, and then delivers it to users all at once. Streaming media players only load a small part of a video file before they start to play it back. The result is sometimes a faster user experience, since users can see your video before it entirely finishes loading.
You can also rely on higher image and audio quality as a rule, since the technology doesn’t have to worry as much about bandwidth or transmission speed: since the technology only has to load a few seconds’ worth of data before it starts playing, those few seconds can be considerably larger in terms of raw file size, which means considerably more complex in terms of image quality.
Bandwidth cost is also more of an issue with streaming media. Flash files are highly compressed, meaning that individual users won’t be downloading large amounts of data from your site at one time. Streaming media files are usually much larger and take up much more of your bandwidth.
If you expect a large user base for your direct sales site–and what salesman doesn’t expect a large audience for their product?–you may end up losing more money than you’d like in bandwidth costs with a streaming media solution. This doesn’t mean that you should never use streaming media, but it does mean that you’ll need to take a close look at your budget and that you’ll need to make sure you can accurately predict how many users you’ll get and how much bandwidth they’ll tend to use up.
The biggest issue, however, is compatibility. Different operating systems tend to rely on different streaming media technologies: Windows systems tend to focus on Media Player, for example, while Apple systems tend to rely on QuickTime.
It’s certainly possible for any operating system to use any popular streaming media technology, but it’s by no means guaranteed that Apple users will already have Media Player installed. Possible workarounds for this could involve using a more operating systemindependent technology like RealPlayer (which has its own issues, most prominently the fact that it requires users to pay in order to get some of the best features), or offering your users a choice of formats and providing support for both technologies.
This last solution is ultimately the best as far as compatibility goes, although it may require you to revise your page design a little bit, removes the possibility of auto-playing your video content (without some careful coding workarounds, at least), and essentially doubles your workload. The question you’ll have to ask yourself is whether or not the added video and audio quality is worth it.
If you’re using a front page solution for placing your content on the page, you should avoid using streaming media. Since streaming media often requires your users to download additional plugins or updated software, you’ll more often than not tend to leave a bad impression if the first thing your user sees is a “Plugin missing” notification.
If you’re putting streaming media on your actual sales letter page-in other words, if the user can already read some of your sales letter and decide whether or not he or she’s interested in seeing more of your video content–this is less of a hurdle and makes you ultimately look more professional. You’ll give your user a seamless experience, and as we’ve stressed, that’s really the key for making any audio-visual solution work on your site.
For a good step-by-step introduction to integrating streaming video into your site, take a look at this tutorial from Microsoft:
versions//bb676136(v=technet.10). This tutorial covers a lot of issues, from encoding your video to work with Media Player in the first place to actually managing the connection between your page and your server in order to resolve bandwidth issues–one of the most critical issues for your budget with any streaming media solution. Although this tutorial focuses specifically on Media Player, some of the same concepts will apply to QuickTime, RealPlayer, or any other technology you choose. If you’re using one of these platforms, it’s a good idea to take a hard look at the documentation for the software for any issues about implementing your code on your page, or about ensuring cross-platform usability.
Web Video Direct Download
If you absolutely can’t use either of the above solutions for whatever reason, direct download is always a last-ditch option.
Direct download has its own major problems, particularly when it comes to page design, but it side-steps most of the issues with Flash and other streaming technologies.
As far as coding goes, direct download is the winner. It requires no more knowledge of coding than the ability to drop a link into your HTML code that gives your viewers access to your video files. If you’re involved in direct sales web marketing at all, you or your coders should know how to do that.
As far as bandwidth cost goes, direct download may not be the winner, but it’s certainly no more bandwidth-intensive than nonFlash streaming media solutions. It may even save you a little bit in bandwidth, since integrated streaming video requires your end users to not only download your media file, but also your player’s code and graphics. It’s not a crucial difference, but if you’re expecting a large amount of site traffic every little kilobyte can add up when multiplied across thousands of users.
And as far as compatibility goes, direct download is second only to Flash–as long as you provide your users with a variety of file formats (depending on the video editing solution you’ve chosen, this shouldn’t be an issue.) Nearly any computer can play either .avi or .mov files, depending on the operating system, and if you give your users a choice of both you’ll be able to reach your entire potential audience. Direct download site-steps the whole problem of cross-browser compatibility, which is one of the biggest obstacles to any effective web design project.
Even though direct download stacks up in all of the three C’s, there’s one big problem with it: it misses the point! The reason to use audio-visual techniques in your site, after all, is to provide your viewers with an emotional experience to help convert clicks into sales. Direct download seriously diminishes that experience by treating your video content as something separate from your site, a resource that users can download and view, but not an integrated part of your overall design.
So when, if ever, should you use direct download? There are two situations.
One: your video files aren’t critical to your overall site concept. As we talked about earlier, things like testimonial reels, product demonstrations, and other topic-specific content doesn’t necessarily need to be emphasized over your sales letter, and mostly serves the purpose of illustrating ideas that you develop more fully in your actual text. Because of this, it’s not a major burden on your viewers to download files before viewing them: if they want the extra content, they can get it. If they don’t, your sales strategy isn’t seriously compromised.
Two: you really can’t implement any other solution. But before you decide that you’re in situation number two, be sure that you try everything to implement a streaming video solution. You’ve put a lot of work into your video content, and it would be a shame not to let it fully do its job.
Now Web Video Going Live!
It wouldn’t be much good to design an excellent, audio-visually enhanced direct sales site and not to publish it. Once you have your content and you’ve implemented it, it’s time to launch–but first it’s time to test what you’ve done.
Before you launch your site, test it. Then test it again. Then test it again.
Audio-visual techniques are impressive for a reason: they’re not easy to do. They involve cutting-edge technology, and they place a lot of demands on your servers and on your end user machines. If you don’t test your site on as many types of computers as possible and on as many machines as possible, you’re going to invite bugs and you’re going to alienate some of your customers.
You don’t need to hire some kind of professional QA service to do this. You might implement all of your site code, put the front page behind a password lock, and then invite trusted past customers or anyone you personally know who’s willing to look at the code in practice and tell you whether or not it works. There’s a fine line to walk here. If you know and trust your testers, you don’t have to worry as much about site security–but you also can’t rely on them to provide you with a huge mix of user machines and software combinations.
Prior to your launch, you need to make sure that you’ve tested your site and audio-video code on at least the following. Test every piece of software in every browser, and at every screen resolution from 800 x 600 up to the limits of your available hardware. It seems like a lot, yes. But you’re going to be expecting a lot of customers.
- Microsoft IE, at least as early as version 5
- Mozilla, at least as early as version 1
- Netscape Navigator, final version
- Windows (2000 through Vista)
- Mac OS X and later
- Linux Variants
- Windows Mobile/CE
- Other hand-held computers
You don’t want to just test for bugs, although the more bugs you find and squash now, the fewer you’ll have to deal with once your site’s open to the entire world. It’s also important to make sure that your testers give you good, honest feedback on how well your audio-visual enhancements work with your page. The most critical thing is to ask your testers to visit your site on multiple occasions, spaced out by at least a day or two.
Depending on what you’re selling, you may want to expect repeat business–or you may expect customers to visit your site multiple times before they make the decision to buy. What seems unobtrusive on a first visit might become a major irritant on a third or four visit. It’s important to make sure that your audio-visual content doesn’t ever become alienating or boring–maybe it won’t be quite as riveting on a third visit, but it at least shouldn’t leave a bad impression.
The site launch, when it finally happens, isn’t the end of your problems–it’s the beginning! Think of your launch as an extended form of testing–only instead of your usual small pool of technicallyproficient testers, you’re putting your content up against the world.
The most important thing you can do to ease the stress of a launch is to provide your users with an easy method of contacting you or your webmasters directly, and being extra-vigilant about monitoring that in the first month or two after launch. (Chances are you’ll be doing this anyway, since this is the first moment when all the painstaking work you’ve been doing has a chance to connect with real people, and that’s always exciting.) If any issues come up with cross-platform support, bugs, or other problems crop up, resolve them as quickly as possible to preserve the seamlessness of your user experience and to allow your content to do its job and convert users to customers.
Even if technical issues don’t come up shortly after launch, it’s a good idea to invite viewer feedback about your content. Master film directors usually say that they can only function by ignoring the critics altogether, but chances are that if you’re a master film director, you save your artistic impulses for nights and weekends. If a viewer says that part of your content is confusing, irritating, or even outright disruptive to their experience, don’t automatically assume that they’re wrong–take them seriously and ask them what you could do to improve their experience.
Audio-visual web components, as we’ve talked about, are a difficult line to walk: unless they’re noticeable, they do you no good, but if they’re noticeable, they run the risk of irritating and alienating your audience. If you get a lot of complaints about a specific audiovisual trick–even if it’s one that you love and that you spent a lot of time on–you need to consider cutting it. The point, after all, is to improve your conversion rate, not simply to make a bunch of neat videos of your product. If your videos stop doing their job, treat them like employees who don’t do their job–get rid of them!
Inviting user input isn’t hard by any means. At worst, you could put a link up in a prominent place to email you with any feedback about your “new design” or other audio-visual enhancements. At best, you might integrate your feedback requests into the site design itself through polls, comments, or other user-driven features. The key principle to remember when doing this, of course, is to preserve the three click rule as best as possible–which means not directing your users to leave comments until after they’ve bought the product. (You’ll also want to screen comments to prevent any external links or malicious pieces of code, of course.)
Enjoy yourself. We’ve possibly under-stressed this throughout this book. There are lots of issues to remember when integrating audio-video solutions into your sales page, yes, and this book covers as many of them as possible. But the bottom line is this: you have a job that allows you to make videos and publish them yourself. There are plenty of aspiring screenwriters out there who’d kill to do what you’re doing for the benefit of increased sales.