HTML Email Fundamentals

24 / Jun / 2015 by Amit Narayan 0 comments

As we know so many tools are for rendering email, for desktop like AOL, Outlook and Thunderbird and web-based email services like Google, Hotmail and Yahoo! Mail. If you thought it was hard to ensure the cross-browser compatibility, be aware that this is a whole new game – each of these email software tools can display the same email in very different ways.

If you choose to code your HTML email by hand-code, there are following things needs to use during creating HTML email:

  • Emails should be 600-700 max width.
  • Use basic, cross-platform font such Arial, Verdana, Georgia and Times New Roman.
  • Avoid the use of flash and JavaScript if design has animation then use .gif animated file.
  • Needs to use HTML tables to control the design layout and some presentation.
  • Needs to use inline CSS to control elements within your email such as background colors and fonts.
  • CSS style declarations needs to below the body tag, not before the </head> tags.
  • Do not use CSS shorthand code – Instead of using the shorthand style font: 12px/16px Arial, Helvetica, you needs to break this shorthand into individual properties like: font-family, font-size, and line-height.
  • Use “display: block” for every image tag for removing the gaps under images in Yahoo!, Hotmail and Gmail.
  • Use six digit hexadecimal code for color “#000000”, don’t use “#000” it may not work for all email client.
  • Use spacer image for spacing between column and row to maintain the cross-browser compatibility.
  • Needs to use “line-height and font-size” 1pixel under “<TD>” where you place the space images to maintain the same spacing under Outlook2013.
  • Need to use inline style for the text in each “<TD>” or other tags where the content is available.
  • Need to use Absolute images.
  • Must declare the cellpadding=”0” and cellspacing=”0” in main table tag.

Following are the table chart have common html tags which are supported for all Email clients:

Style Element Outlook 2007/10/13 + Outlook 03/Express/Mail iPhone iOS 7/iPad Outlook.com Apple Mail 6.5 Yahoo! Mail Google Gmail Android (Gmail)
direction Yes Yes Yes Yes Yes Yes Yes Yes
font Yes Yes Yes Yes Yes Yes Yes Yes
font-family Yes Yes Yes Yes Yes Yes Yes Yes
font-style Yes Yes Yes Yes Yes Yes Yes Yes
font-variant Yes Yes Yes Yes Yes Yes Yes Yes
font-size Yes Yes Yes Yes Yes Yes Yes Yes
font-weight Yes Yes Yes Yes Yes Yes Yes Yes
letter-spacing Yes Yes Yes Yes Yes Yes Yes Yes
line-height Yes Yes Yes Yes Yes Yes Yes Yes
text-align Yes Yes Yes Yes Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes Yes Yes Yes Yes
text-indent Yes Yes Yes Yes Yes Yes Yes Yes
text-transform Yes Yes Yes Yes Yes Yes Yes Yes
vertical-align Yes Yes Yes Yes Yes Yes Yes Yes
color Yes Yes Yes Yes Yes Yes Yes Yes
background Yes Yes Yes Yes Yes Yes Yes Yes
HSL Colors CSS3 Yes Yes Yes Yes Yes Yes Yes Yes
border Yes Yes Yes Yes Yes Yes Yes Yes
height Yes Yes Yes Yes Yes Yes Yes Yes
margin Yes Yes Yes Yes Yes Yes Yes Yes
padding Yes Yes Yes Yes Yes Yes Yes Yes
width Yes Yes Yes Yes Yes Yes Yes Yes
max-width No Yes Yes Yes Yes Yes Yes Yes
min-width No Yes Yes Yes Yes Yes Yes Yes
list-style-type Yes Yes Yes Yes Yes Yes Yes Yes
border-collapse Yes Yes Yes Yes Yes Yes Yes Yes
table-layout Yes Yes Yes Yes Yes Yes Yes Yes

 

How to Create Email Template files for Outlook:

  • Composing and email in outlook.
  • Add Recipients Email addresses, Subject and add the Newsletter in main body text.
  • Now in file menu click Save AS.
  • From Save As type list select Outlook Template (.otf) and give the template appropriate name then click the save on appropriate location.
  • When you open any time this template by double click it will show saved Newsletter with all specific detail which we have provided at the time of Save As then we can send this template to any other recipients by edit the previous recipients.
FOUND THIS USEFUL? SHARE IT

Leave a comment -