Writing beautiful HTML emails

As you know we are about to launch our system – Nerrvana. It is time for the finale, hang the curtains, so to say – to prepare some nice templates for emails sent by the system. ‘A nice’ means it has to be in HTML format.

In the design of the system’s site we used loadable fonts and of course we would not mind using them in the emails. However, according to Campaign Monitor, in recent years nothing has changed – external fonts cannot be used in emails. Ok, we will take this as a given and will only use CSS and standard fonts. Googling this topic brings a tip on HTML coding for emails from MailChimp where they suggest to use inline CSS instructions, i.e. include the styles directly in the html tags. I will illustrate, using GMail as an example.

We create a simple email that is sent to the newly registered users. Here’s how it looks in FireFox; pretty good.

Now I have sent it to my GMail account and let’s look how it renders.

Let’s play a game of “Find the 10 differences.” What do we see? Both size and font type are different. Why? When we create HTML page layout, we rely on the inheritance of the styles. Nested styles inherit their parents properties and for some reason Firefox calculated the style of the font size for the table cells in 16 pixels. In the case with mail services all is more complex. Forget about inheritance – external (GMail’s ones in this case) styles can override your inheritance at any time, as can be seen on the screenshots. Here is the piece of code we are interested in.

HTML in Firebug …

… and his current styles

Here the font size was calculated correctly, 22 pixels were inherited from parent’s div :)

In this example, as you understand, an HTML table is used to show a user name and password. Yes, do not throw spoiled vegetables at me. If you read the MailChimp article by following the link above, in paragraph 9 you will see this comment:

Inline CSS is safer, and plain-old FONT tags are safest (code like it’s 1996, remember?).

They were not kidding about the code in 90s style. It is true. Well, I digress, so we have a table located in the div’s, here it is:

<div style="font-size: 22px; padding: 20px 0 30px 0; font-family: verdana;">
<table>
<tbody>
<tr>
<td style="text-align: right; width: 50%;">Username:</td>
<td style="text-align: left;"><strong>Alibaba</strong></td>
</tr>
<tr>
<td style="text-align: right;">Password:</td>
<td style="text-align: left;"><strong>sim-sim</strong></td>
</tr>
</tbody>
</table>
.....</div>

What can we do here? That’s right, set your table styles to those that will override GMail ones. So we quickly copy-paste font styles into the table tags, like this – <table style=”font-size: 16px; font-family: verdana;”>. And here is the desired result:

As you see, it makes sense to apply styles to all elements surrounding content, leaving Google and others alike no chance to override them. Beautiful letters to you in all popular email services and clients!

Теперь отправим его на свой GMail ящик и проверим как оно отображается.

/td

Print this post | Home

Post a comment