Tuesday, 22 December 2015

How to make an email Christmas card?

In a moment of madness I decided to make an email Christmas card...  Sounded like an easy task, but wasn't.

First thing I need to do was come up with a design and I decided to go for a simple image and message, but then there was the question of the image...  Ideally I wanted something unique (hence all the stock images of dancing Christmas trees were out), and something that looked modern and worked on desktop, tablets and smart phones. What I needed was a homemade animated gif that was in a reactive design ('reactive design' means that the design adapts to the screen size.  Easy huh? Well, no...


Basically there were X parts to the problem:
  1. Getting the moving image
  2. Editing the movie
  3. Coverting to an animated gif
  4. Constructing the 'card'
  5. Sending the emails

1. Getting the image

Getting the image was relatively easy.  I just shot a video of part of the family Christmas tree... Easy...

For this I just use a camera mounted on a tripod.  The tripod was needed as the final moving image was going to be a looping animated gif so the image frame needed to be steady.

I decided to record a 10 second clip of the flashing lights so as to at least catch one complete cycle.

(Originally I was going to use the live photo option in the iPhone and convert that to an animated gif (which is relatively easy to do), but I discovered that without a tripod the frame sides moved too much and so produced a very shaky final movie.).

2. Editing the movie

This was another relatively easy thing to do as I am very familiar with Camtasia 2, which I think is a great movie editing program.


Using the program I was able to trim the original 10 second down to a 1 second cycle of the flashing lights.

3. Converting to an animated gif

Conversion of the movie to a looping animated gif (I needed it looping so the lights were continuously flashing) was, like editing the movie, very straight forward as used GIFBrewer, which allowed further editing of the image, and the addition of text.


Once I had the gif corrected, and had adjusted the size, I then exported the animated gif.



4. Constructing the 'card'

The challenge here was to make it 'reactive'.

I knew that to make the card I would have to write it in HTML (which I know), but I had to make the email 'reactive' so that it was readable on desktops, tablets and smart phones.

Reactive design is not new, and it is something I have done in the past, but it can be tricky, especially when dealing with email, as opposed to browser, clients. Basically the way a reactive design works is that the layout and sizes of elements on the page are adjusted for the best look on the available screen space. That is, the design 'reacts' to fit the device.

When producing a reactive design there are two approaches that you can take. You can either hand-code the design, which can be hard-work and very difficult, or you can use a program. For the card I opted for Responsive Email Designer, which whilst it did the job did have a rather steep learning curve. (I also looked at Mail Designer Pro 2, which was easier to use but lacked in fine control, that is, you couldn't directly tweak the underlying css.)


From Responsive Email Designer it was possible to set up the various breakpoint in the design for different screen sizes, and to produce the email that I wanted. However, there was a problem... Responsive Email Designer does not support the bulk sending of emails.

Of the two programs I looked at Mail Designer Pro 2 was the easiest to use (most Mac like), and was particularly good for entering the text, but weak on layout control, whereas Responsive Email Designer was excellent for layout, but truly terrible for entering text, and had some really annoying interface quirks.

5. Sending the emails

The final stage of the process I thought was going to be the easiest... How wrong I was!

From the Responsive Email Designer program I had the final card. I had the HTML code, and all the css, but I couldn't send the card to my lists.  I could send it to myself, but when I tried to forward the card to my lists the responsive design broke.

I tried viewing the card as a webpage and then using the built in feature on the Mac to email a webpage, but that also broke the responsive design.

There is no way to add HTML code to a message in Apple Mail (there might be a way in which this can be done using the signatures but that looked like a really tedious hack that I didn't want to attempt).

Microsoft Outlook used to have an 'Insert HTML' feature, but it has either been removed, or is now so well hidden I can't find it. And I also couldn't find a way to do it using the web interface.

In the end I went for MailChimp, which is a tool I have used before, but was one I was hoping to avoid using just to send out some quick and simple Christmas email messages....