Camera to Browser: Making a Web Video Xmas Card in 5 Days

Simon explains how he produced a video Christmas card for a client in 5 days. The article covers conceptualisation, shooting, sound, music, editing, and encoding video for the web.

Camera to Browser: Making a Web Video Xmas Card in 5 Days

In December last year — with about ten days to go before Christmas — a client asked me how they could deliver some kind of online Christmas card. The client in question — and I'll name them here, because I'll spoil the surprise and tell you it turned out pretty well — is one Estates Today, a provider of web-based commercial property software, who is a personal client of mine.

This one definitely comes under the heading of "it shouldn't happen to a web designer", but may go some way to illustrate the kind of thing we're supposed to be able to deliver these days, as the web becomes more varied as a delivery mechanism. The project I'm about to describe threw up some interesting new challenges for me, so I thought it might be interesting to share my experiences with the Elated audience too.

The Everlasting Twinkly Light

The concept for the card came quite by chance. I had been at a client meeting (read "lunch with drinks") in Bankside in London, and on the way back to the train had snapped a few images of the lights that are strung around the buildings and riverside there. Reviewing these images the next morning, the notion of property looking good, or more importantly "feeling" good, sung out. A few notebook scribbles later and the basic strapline — "We make buildings feel this good all year round" — tied the seasonal message to the corporate property offer of Estates Today. The client changed "buildings" to "property" in the final analysis, which in the context of the business, made a lot of sense.

Photo of pretty lights
One of my initial photographs

At this stage, I called friend and long-time collaborator Scott Billings, and put the idea to him of taking some proper shots, writing some music and collaboratively creating the card desired by my client. Scott and I were in the process of setting up a bespoke sound design and music composition agency, and were looking for a project to showcase a few of the ideas we had, so this idea seemed a good fit.

Images + music + strapline = nice card. Super. But in our infinite wisdom we decided that video would be more effective than stills, so we elected to return to the same location to shoot some twinkly footage. This raised a few more technical bumps to overcome, but it made us realise just how much of the preparation had already been achieved — however unwittingly — in those initial photos that I'd taken.

Lesson 1: Always carry a camera, shoot as you go and then consider whether the material or location might be developed and refined later.

So, the basic challenge: In under five days, we had to shoot the footage, edit it, write a suitably festive-but-modern tune to go with it, and work out a delivery mechanism for the web. While we were doing our normal jobs too! Let's start with...

The shoot

Aside from the fact that shooting film in winter, at night, is very cold (and in this case also wet), there are a few other technical pointers which came out of the shoot.

Firstly, unless you're absolutely familiar with your gear and how it is going to operate, take some means of assessing your footage as you go. In other words, take a laptop.

Photo of Scott
Scott on the shoot on London's South Bank. In the cold.

We used a Nikon D7000 to shoot the film, and after an initial burst of footage we retired to the pub to see what we'd got. This pub stop was invaluable, not only for beer and warmth, but also because it immediately showed us that shooting at high ISO settings creates a fair amount of digital noise in the video. Exactly how much noise you're prepared to tolerate probably depends on the final application of the film (and perhaps on personal preference), but we quickly worked out that any sensitivity greater than ISO 800 was just too noisy.

In low light this is an issue: underexposed video would be a real problem in the edit. So we had to ensure that ISO 800 would produce acceptable exposure at night, even if the scenes did become a little more "low key". In practice, this meant we had to manually override the camera's exposure settings (in video mode the D7000 automatically adjusts everything to expose the scene "correctly") and then get outside into the drizzle to shoot (or re-shoot) additional footage.

Lesson 2: Set your ISO manually to keep the noise down.

The second extremely important thing that the laptop review revealed was the camera wobble being generated as we turned the focus rings. Even though the camera was mounted on a tripod, it was still not stable enough to remain stationary during refocusing. We tried extremely hard to be as delicate as possible when turning the focusing rings, but in some cases — especially when using longer focal length lenses — it was impossible to eliminate all jitter in the video.

Lesson 3: Because your final film is only as good as your best footage, every tiny wobble is a problem. Pick your shots carefully and within the limits of what your gear is capable of.

So if you are shooting footage where focus transitions will be involved — which covers pretty much everything bar static talking heads — we would recommended using a stabilizing accessory for focusing. Furthermore, using the camera's LCD screen, it is very difficult to see exactly where in the scene your point of focus is. Even the larger screens are too small to be sure, especially if you are squinting at them from an awkward angle — lying on the ground to capture a low shot, for example. Accessories also cater for this, with magnifying pieces that fit over the screen to enlarge the image.

The upshot is that film-making is more delicate and requires more specialist equipment than most photography. No great surprise, but worth bearing in mind if you are planning to shoot a high-quality piece of video.

The sound and music

There are actually 2 aspects to the sound in the finished piece:

  1. The musical soundtrack
  2. Ambient sounds taken from the filming locations

Some of the ambient sounds were recorded using the camera's internal microphone, and so sync with the footage, but we also used a Zoom H2 portable mic to capture different environmental recordings.

Lesson 4: We think it is worth getting into a habit of making ambient recordings as you travel around. They can often be used as evocative textures in other pieces of sound design and music later on.

Ableton Live screenshot
Ableton Live was used to compose the music.

The music itself was recorded using Ableton Live 8 and is built around a simple descending phrase, played on a synthetic brass sound and overlaid with a partial major-scale arpeggio played on tinkling bells. Movement is created by an organ sound which cycles through an ascending four-chord sequence, repeating until the final strapline scene, when the music resolves into a "happier" closing major chord. The bells then fade on a small portion of The First Noel over the end-card.

The overall final effect is of a cool and electronic evocation of Christmas carols, sitting with the nightscape footage and the corporate nature of the card.

The edit

While Scott was writing the music, I was trying to get to grips with editing video. In the end I just used iMovie '09 on the Mac, but any video editing software that allows for control over crossfades should do the job. I genuinely had no real idea how to use this before I started, so it was a case of learning as I went along. I had seen the process before, though, in the infinitely more talented hands of others, so I had some idea about the basic principles. I knew that the trick was to keep it simple, and trust our judgement as to pacing.

Once we had a basic edit, we spent hours tweaking it along with the music. Both were being constantly edited and combined again and again, which was fiddly but doable. Finally, the main strapline was added using iMovie's titling system and I created the end screen as one big graphic using Photoshop.

iMovie screenshot
iMovie in mid-edit

Once we'd finished, we had a pretty reasonable "card", but our troubles were just beginning...

Putting the video on the web

I knew I needed this movie to work on iOS devices, which means — and I'm sure you're ahead of me here — no Flash. After much faffing I settled on Vimeo, and got the client to spring for the paid option, which creates versions of the video that work on iOS. Money well spent, you'd have thought.

But it didn't work on Scott's version of IE. Neither did anything on Vimeo. Weird. Asking around, a few people were having problems with IE. Obviously this wasn't good news. The deadline was looming and we didn't have time to muck around with the vagaries of web browsers. It had to be a weird Vimeo bug, right?

I needed a full-on HTML5 solution with Flash fallback for the usual suspects (IE, I'm looking at you again), so I decided on Sublime, which is a lovely HTML5 video player that is just about to emerge from beta. I made a Firefox-friendly Ogg video file using the Firefogg plugin for Firefox, and then uploaded the .mov file (for Safari, and at the time, Chrome) and the .ogg file (for Firefox) to Amazon S3 storage. Sublime handles the Flash end of things, so there's no conversion to .flv files to worry about.

Sublime screenshot
The Sublime video interface. It looks like this whether it's Flash, Ogg or H.264 video, ensuring a seamless experience.

Lesson 5: We hosted the video files with Amazon because this takes the strain of serving video off the client's server. Sublime plays very nicely with this.

Guess what, it still didn't work in Scott's browser.

In the end, we worked it out, and in the process discovered a dirty little secret about Flash. It doesn't work in 64-bit Windows browsers. I kid you not, here's the page on the Adobe site!

If you run the 32-bit version of IE, it all works fine. The great news about this though, was that there was absolutely nothing we could do about it. Time to move on.

In the event, we stuck with Sublime, because the interface was so lovely. I crafted a simple page on the client's site, and lo, were were done.

The end result

You can see the movie below, and the page on the client's site here.


This project tested just about every one of the skills I've developed over the last 10 years or so. To name a few:

  • Design
  • Music composition
  • Project management
  • Photography, and
  • Conceptual creative thinking

It was a real technical stretch, and under a tight deadline too. Also, the fact that it was assumed the job could be done, and that I could deliver it, says a lot about my client — and the way that "web design" as a discipline is evolving.

In the end, I was very happy with the results, and we all learned a great deal about shooting and editing video. Scott and I got a timely project with which to launch our new music composition service Glitch & Drone Associates, and the client was very happy.

The card was sent to thousands of people over the Christmas holidays from the client's bulging contacts book, and the reaction from recipients was universally good.

One more thing I learned, and the final lesson: Getting the video working nicely online across as many browsers and platforms as possible took as long as the edit, and this was before Google decided that they were no longer going to support H.264 video. Heaven alone knows what will happen now to the burgeoning world of the HTML5 <video> tag!

Follow Elated

Related articles

Responses to this article

There are no responses yet.

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page