Success of any email campaign start from the base itself – Emailers. Effective e-mailers must engage the targeted audience & make them go through the information you want to share at least once. The emailers must be coded in a ways that they should target not only the Email client software like Outlook, Thunderbird, Lotus Notes, Apple Mail etc. but also today’s browser based Email services like Outlook Webmail, Yahoo Mail, Hotmail & Gmail. Further, alternate options should provided to make emailer render correctly across modes like HTML, Richtext or plain text.

Below are tips on how to write HTML code for effective Emailer so that they can address the purpose to same level across various channels highlighted above:

• Keep it simple – Focus on Message, not on the designing complex look and feel. Avoid excessive use of images or intricate layouts that may not render correctly across all email clients.
• Use HTML TABLE design format – instead of ‘div’ and modern HTML5 layout elements like Flexbox or Grid, which may not be supported universally
• It should be short and precise. Some email programs filters as spam those emails which are too much lengthy.
• Keep email width under 600px. or rather use width 100% for the available container, so that email clients such as Outlook can view your email in their vertical preview pane.
• Avoid complex colspans and rowspans – to make email template reusable and content can be easily maintainable.
• Use sparingly nested table structure – so that design could be more easily readable and understood
• Do not rely much on hover or mouse over effects as it is also not supported across all email engines.
• Sometime css border don’t work, hence it is always better to use ‘TD’ border attribute.
• Always encode special characters like “ with &quot etc. This ensures proper rendering across different email clients.
• Do not include JavaScript in the code. It might be considered as they are not supported in most email clients and may trigger spam filters.
• CSS tips:
  1. Use Inline CSS – Some email service strip out DOCTYPE, BODY, and HEAD etc hence use inline CSS.
  2. Avoid shorthand CSS like font, margin etc rather use expanded style like font-size, font-family etc.
  3. Use basic/simple css rules and avoid CSS like clear, float, z-index, position, background-image etc
  4. It would be more effective to use ‘TR’  &’TD’ in place of block levels like ‘P’,’H1’ etc as some email clients remove block levels html also.
  5. Avoid external CSS.
  6. Use plain bullets points and not image or :before as bullets etc
  7. Instead of CSS borders, use the border attribute within <td> elements for better compatibility.
• Images tips:
  1. Avoid background images. Prefer background-color though CSS style.
     
  2. Use absolute path. Use “http://www.mywebsite.com/img/abc.gif” in place of “/img/abc.gif”
  3. Always provide ALT text to images
  4. Use optimize the images

Lastly, always complement plain text format of email in case the browser doesn’t support html format. The plain text format is a simple copy content in text format with heading as all caps and image alt text in place of image placeholder.

See Also How to to Test and Send HTML Emails – Know these 6 Steps