More on using webfonts in HTML email

Further to my previous post on using webfonts in HTML emailElliot over at Email Design Review has also recently posted about the process of using webfonts in HTML email.

The two most notable things that I learned from his post were:

  1. That Android will only display a range of fonts available on Android handsets (Droid Sans, Droid Serif, Open Sans), and
  2. That you can try wrapping your font import code in a media query to prevent Outlook from reverting all your type to Times New Roman.

He says:

…as usual, Outlook likes to get involved and throw a spanner in the works. If you use @font-face in HTML email, Outlook 07/10/13 will default all text back to Times New Roman. After a long time testing various fixes, we eventually found that wrapping the font import code in a simple media query hides this from Outlook, letting it get past the ‘Open Sans’ part and default the text back to the next font.

I am keen to give this a try and see if it is successful. It would be a good alternative to using the <font> tag for folks who aren’t able to do so (i.e. those using a template).

Lessons in using webfonts in HTML email

When creating an HTML email using a Google webfont, I found that it was rendering in Outlook 2007, 2010 and 2013 in Times New Roman. Even though I had a fallback of Arial.

Outlook was choking on the webfont (I tried both with and without quotes) and just disregarding the whole stack. To fix this, the <font> tag is your friend!

By adding the <font> tag with the face attribute, the issue was resolved. Note the double quotes to open the stack, and the single quotes around the name of the webfont you are using.

This fix is thanks to Jemiina’s post over at the Campaign Monitor forums. Also see Campaign Monitor’s guide to Using Webfonts in Email.

(Finally, thanks to Redferret for pointing out my mixed up use of tags and attributes!)

How does Mailbox app render responsive HTML emails?

Edit: As of October 2013, Mailbox no longer features full support for media queries. It has been patchy and problematic for the past couple of months, Mailbox are apparently aware of this but there is no known upcoming fix. For the time being, sadly, Mailbox simply does not support responsive emails.

Mailbox.app, the popular mail app for iPhone, only supports one method of responsive HTML email development.

Previously, I used both of these methods interchangeably:

First method: using ‘align’ on tables

Second method: using “display: block” on <td>s

Here are the media queries:

The results in Mailbox show that only the first method actually works.

It’s also worth noting that because of the extra background on Mailbox.app, emails display within a narrower 612px width (on a Retina display; 306 on non-retina).

Comparison of how each client renders responsive email HTML
Comparison of how each client renders responsive email HTML

Email Marketing LOLs

Today I received this images-off whopper from ozgameshop. It exploded off the screen in an amazing expanse of undefined table and image widths. A good reminder to set image widths or cell widths or table widths to ensure your email doesn’t look completely mental before people load it up. If it looks messy without images, people will assume that it’s going to be messy when it’s loaded.

email-marketing-lols

 

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!