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.
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.
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.
I loved the colour palette in MailChimp’s email this morning about the upcoming release of MailChimp v8.
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.
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!
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.
Synergy’s January newsletter benefits from big, bold illustrations and lovely design. While not responsive, it wouldn’t take much work to get it that way. It is a shame, however they have linked all their images which means that smartphone users can easily tap through.
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:
|
1 2 3 |
@media all and (max-width: 400px) { body {min-width: 100%;} } |
Phew! Thanks go to my colleague Gabi for her superior Googling skills in finding the solution (at MacRumours).
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.
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.
|
1 |
<sup style="font-size: 8px; line-height: 0; vertical-align: 3px">®</sup> |
Adjust the font-size and vertical-align as appropriate for your font size.
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:
|
1 2 3 |
<tr><td>Copy here, more copy here.</td><tr> <tr><td style="line-height: 0; font-size: 0;" height="7">&nbsp;</td></tr> <tr><td>Next paragraph here</td><tr> |
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.
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!