I gave a talk at Frontstack this year and it was an amazing experience. I’m sharing the essence of my talk here ICYMI and also because I write better than I speak sometimes, so you might enjoy this more.

---

I’ll start off with a quick introduction. I’m Etin Obaseki, Software Engineer whose current life motto is Life, Learn, Loop.

Multimedia across the web has come in leaps and bounds. We can now easily use various forms of media all across the web almost ubiquitously. Videos, audio, animation. All sorts of wonderful things.

What about emails? Emails are notoriously hard to make look good for a number of reasons. Multimedia is a definite no. Or is it?

This talk explores the use of media content in HTML emails.

What can we do right now? What will the email of the future look like? Let’s find out.

---

The Introduction

We’ve all sent emails. Whether it’s to let friends and family know how you’re doing or to express your ‘slight confusion’ to a colleague at work or to rail at the customer service unit of your bank for yet another unexplained debit.

The emails we’ll be discussing today though are more the kind sent out by brands to their audience. Whether it’s a newsletter or a service notification, we’ll be discussing if and how we can spruce up that email with multimedia.

If you’ve ever designed and sent out HTML emails, you’ll know just how terrible they can be to write and test.

Thankfully, there are more and more tools that make this process a breeze and I share some of my favourite here.

---

My First Foray into Emails

At my first job, I had to build and send our newsletter. My boss had a couple of requirements for the newsletter including:

• A two column layout
• News articles and featured images on each column
• Videos from YouTube
• A Twitter Feed

I wrote an entire article on the lesson in humility that this was.

But, in summary, my first few attempts turned out poorly.

I had not written a HTML email before that, but I figured it would be easy because I had built one or two websites.

It wasn’t and I learnt the first two lessons of my career:

1. Don’t overestimate yourself (although, sadly, it hasn’t stuck as much as I would have liked.) and
2. Email != Web

---

Email != Web

Although, nowadays, we get our emails over the web, they are different platforms.

Email clients and web browsers evolved very different and as such there are wide variations on the things they can do and how they go about doing those things.

What can’t we do with Emails?

I’ve outlined some of the most jarring not-haves I have encountered while building emails.

No JavaScript

Most email clients will, for security reasons, not run any JavaScript at all in your email. So you absolutely cannot rely on any JS tricks for anything in your email.

Embed iFrames

One of the requirements for my first email was embedding a “featured video” from our YouTube channel within the email.

iFrames will be blocked by most email clients as they’ll usually contain scripts and could pose a security flaw.

Use HTML5 tags/features

Because most email clients haven’t kept up with the times HTML 5 tags and features will not work here.

Use flexbox, CSS grid or even floats for layout

Emails use tables for their layouts. No flexbox, no grid. Not even those clever hacks with floats and clearfixes. If you want layouts use tables.

Embed audio or video content

No MULTIMEDIA support!!!

Although multimedia support is non-existent on email, it does support most picture formats quite well and it is one of these that will end up saving everything. The GIF.

GIF Things Up!

GIFs are a great way to add interactivity to our emails.

Similar to the ways we use them on social media, we can add a lot of meaning and context to our emails by creatively applying GIFs.

It is important to note that images may not always load on an email and so we must design conscious of this point of failure and degrade gracefully in instances where images are not available.

Here are a few clever GIF uses in emails I’ve seen or thought up.

A Countdown Timer

I first saw this done on a marketing email encouraging me to buy at a discounted price before the deadline. And there was a countdown timer right in the email.

The trick is to have a GIF that counts down for long enough for your users to read your email, say 60 seconds and then update that GIF each time.

This StackOverflow answer, also the source of the GIF above, does a great job of explaining the implementation. Alternatively, you could use a service like Cloudinary to create a GIF that continuously updates its countdown time.

Signature/Text Animation

What better way to close off your email than with a personal touch?

A GIF of you signing your name would be very cool (I, at least, would find it very much so).

You could also use it to call attention to your headings.

Animated/Specially Shaped Buttons

We can make our call-to-actions more appealing by adding animations to them. CSS animations might not work on your email client though and so once more GIFs come to our rescue.

We simply create a GIF that looks like the button we want and wrap the image in an <a></a> tag.

Video Previews

Another potential use case for GIF is to preview videos. We could put a short clip as a GIF and allow people link to the full video by clicking.

Unfortunately, there’s no way to include audio that I know of.

Conclusion

I hope that this gives you some ideas for your next email. If you come up with something cool, I’d love to see it. Hit me up on Twitter and share!