Leslie David’s animated GIFs for La Mode. La Mode. La Mode.

Paris-based designer Leslie David created these animations for a French television show and I think they are a perfectly quirky blend of graphics and animation that would work really well in email — perhaps if they were a little slower and/or were just a big animated CTA with minimal text to read (because I think my mind would explode if I had to look at them for very long).

Via designworklife.

Leslie Davis - 2

Leslie Davis - 3

Leslie Davis - 1

Aeon magazine’s cross-platform email design

Aeon is one of my favourite online magazines; they have really fascinating articles, a reader-friendly (responsive) site and lots of other wonderful features such as spoken audio versions of their articles that represent their deep commitment to the user.

Their emails reflect this commonsense approach to design in their large, open, single-column design. They’re not responsive but instead are quite narrow with a large font size which means that they work well across devices. I actually love super-large text on desktop so I quite enjoy it when emails are designed this way. Give me 20px type any day.

Also, very importantly, their copy is very short. The perfect amount of copy to get readers to transfer through to the site.

Screen capture of Aeon's weekly email
Aeon’s weekly Editor’s Picks email has lovely huge type

Mobile view

Screen apture of Aeon's email on an iPhone

The experience continues on their website

Upon receiving this lovely email you will, most importantly, be taken to their site which also works beautifully across devices because it’s fully responsive. The text is a great size, the typefaces are lovely (if a little large on my iPhone), and overall it’s just a lovely experience. One of my favourite features is their audio recordings of articles — they produce these readings and make them available on Soundcould or iTunes. The read later or add to Kindle button is also a lovely touch. I love being given options to read later and take content away with me, so Aeon are obviously pretty savvy about the way people want to consume information these days — all over the place.

Screen grab of icons on Aeon's page
Aeon’s article headers contain links to audio recordings of each article and a read later/send to Kindle link

 

 

Images off for Etsy

Etsy’s transactional emails look pretty neat on desktop with images off. The CTA is still accessible, and their logo’s alt text is in their brand orange. Making a good impression with images off can, annoyingly, be quite important! Most importantly it shows that the content and the design can be separated and that their message makes sense in pure text. This suggests a good level of clarity in their transactional emails.

Etsy's email with images off

Keeping it positive

They’ve also done well to use positive language in saying “View this email online” rather than starting with a negative, and saying “Can’t view this email? Click here to see it online.” Every ounce of positivity contributes to a good tone in your emails!

Responsive?

It’s not responsive, which is sad. It is pretty usable on mobile, though. As long as there is plenty of space around a CTA, it is pretty safe. The text is pretty teeny, even though they have done well to use bold to call out important copy.

Etsy's email on iPhone

 

Weird right-hand gap or margin in HTML emails on iPhone

I struggled with this one this morning!

It turns out the solution is to add a min-width of 100% to the body of your email in the mobile styles, for example:

Phew! Thanks go to my colleague Gabi for her superior Googling skills in finding the solution (at MacRumours).

The importance of setting image height in HTML email

Graphic showing a large grey box where an image should be

Sometimes it’s easy to forget about why all of the standards in HTML email coding exist. Here is an example of why it’s important to set image height on all your images; Hotmail, in blocking images, presents the user with a big ugly grey box.

In the absence of explicit image dimensions, it generates the box at an arbitrary size which is, incidentally, huge. If all you have is a thin header image, it still expands to this size. It makes it look like your entire email is weird, broken and dodgy!

In the email below, the header image was only 140px high. If Hotmail had the image dimensions, the email below it would have been visible and readable.

How to fix superscript characters in HTML email

Image: TutorGig Encyclopedia
Image: TutorGig Encyclopedia

Anyone who codes HTML email will know that including any superscripted symbols is an absolute nightmare. Thanks to the Email Dude, I finally established a way to style superscript symbols so that they don’t disrupt line height and so that they look pretty consistent across all email clients.

I found this superscript fix to be the greatest one that works for all email clients.

Adjust the font-size and vertical-align as appropriate for your font size.

Get CSS-like control of paragraph spacing in HTML email (without using CSS)

Metal slugs and lead used in letterpress printing to create space between lines and paragraphs. Image © Studio Z Mendocino
Metal slugs and lead used in letterpress printing to create space between lines and paragraphs. Image © Studio Z Mendocino

For me, the best way to create vertical space in an HTML email (especially between paragraphs) is to create empty table rows. This is especially true when your code is going to be loaded into an external company’s editor or system. The only safe way to ensure an email displays correctly in their editor (and in users’ inboxes) is to have an extremely rigid layout with nothing floating around or relying on any padding, spacing or line breaks.

For this reason, my layouts generally look like this:

I find this is the best way that works for me every time. It also allows me to get very specific space between paragraphs that I find difficult to achieve using any other method. Generally, for me, a line break results in an awkwardly-sized paragraph break that is out of line with good typography.

Strip Word doc text of all the nastiness

If you have weird characters showing up in your HTML emails, it’s always a good idea to ask yourself if you have copied and pasted anything from the old beast that is Microsoft Word. All kind of nasties end up in Word documents and they get transferred to your code, even when pasting from Word to the ‘plain text’ coding environment.

A good idea is to strip Word text of all the nasties before you paste it anywhere.

Visit word2cleanhtml.com for all your stripping needs!