HTML E-mails

html email codeWhen designing an HTML E-mail, there are a few things you need to know.

1) Design using tables.
2) use inline styles, such as: style=”background-color: $442211;”
2) All images need to have Style=”display:block;” and border=”0″
4) To hide images that get displayed on mobile view only, you need to have inline style display: none; AND a span around it that looks like this:

<span style="mso-hide:all;"><img src="hidden.jpg"/></span> 

That will hide the image from old Outlook E-mail clients.
You will also need to do:
width:0; overflow:hidden;float:left; display:none
source: http://stackoverflow.com/questions/4013670/gmail-is-ignoring-displaynone

5) Doc Type and header should be:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

6) if an empty table cell is very short, and just being used for spacing, the font-size needs to be set to 0. Some E-mail clients (Outlook 2013) will add extra space if the font-size is not set to 0.
7) Anytime you define line-height, you must also add: mso-line-height-rule: exactly;
8) if you use margins, make sure you use capital M such as: Margin-top for Outlook.com compatibility.
9) To create buttons use: buttons.cm
Here is an article discussing different bullet proof button techniques:
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design
Alternative old way to create buttons. To create good buttons, use tables. Generate the code from: Bulletproof Button Generator. To add a border to it you can use this code:

<table cellpadding="0" cellspacing="0" border="0" style="border: solid 1px #cc5c28;"> 
<tr> <td bgcolor="#ffffff" background="" height="30" width="124" style="color:#cc5c28; 
font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #cc5c28" align="center" valign="middle"> 
<a href="#" style="color:#cc5c28; text-decoration:none; display: block; line-height:30px; text-align: center;">Button Text</a> 
</td> </tr> 
</table>

Which looks like this:

Button Text

10) iphones reset all small fonts smaller than 13px to be 13px. That can throw off design on those devices. to fix this add this snippet to the header area. If it already has a style area, then just add it to the STyle area:

 <style type="text/css">
  div, p, a, li, td { -webkit-text-size-adjust:none; }
 </style>

11) how to avoid having lines appear:
source: https://www.campaignmonitor.com/blog/email-marketing/2011/10/iphone-fail-the-trouble-with-table-borders-and-html-email/

Comments are closed.