HTML Email Fundamentals
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.
