HTML Email

Mail supports HTML and CSS to allow us to create html mail messages.

Mail HTML is not in line with standards found on the web, so you can’t just transfer your knowledge from web development one for one.

For HTML in email there are no standards.

Mail clients tend to implement things differently with Microsoft Outlook idiosyncrasies usually requiring special attention.

Mail != Web

Since there are no standards for email HTML, certain basic things work, but a lot of them don’t:

Most notably email clients wont support javascript or css linking for security reasons.

For most things in email we’ll want to use email friendy html tags that are supported everywhere.

For email, we can’t use Linked stylesheets.

We can use:

Css properties that works:

For text: color, font-family, font-size, font-style, font-weight, line-height, text-align
For block-level elements: margin, padding, width, max-width

It’s recommended to make images responsive by default and use alternative text.

As far as for image format we should stick to the standard: jpg, png, gif.

Since we can’t use css floats we use tables to present content in email.

Some guidelines for using Tables in Email:

Example of how boilerplate table html for presentation can look like:

<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
  <tr>
    <td style="styles go here">
    </td>
 </tr>
</table>

Email campaigns and engagement are still very relevant part of the business.

Email engineering practice deals with problems of sending emails that will look properly on various devices and clients.

Companies like litmus provide tested email templates and tools that will let you preview how emails you’re about to send look on various devices.

Email templates usually contain css resets that take care of

Good email templates will also take people disabilities in account and make templates accessible by taking care to: