The two most notable things that I learned from his post were:
That Android will only display a range of fonts available on Android handsets (Droid Sans, Droid Serif, Open Sans), and
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.
…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.
/*font import stuff*/
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).
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:
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.
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.
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!
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.
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.
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.
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.