Category Archives: Email Template

Best Practices & Considerations when writing HTML Emails

Following text fully Copywriting from http://stackoverflow.com/questions/2229822/best-practices-considerations-when-writing-html-emails/21437734#21437734

This seems like a great place to list some resources for anyone trying to learn HTML email. This is (probably) the most comprehensive list of HTML Email resources you will find on the web. Happy learning.

Getting Started Guides:

CSS Support & General Guides:

You should always inline your CSS in html-email. Here is a list of CSS Inlining Tools

Responsive Guides:

Templates & Frameworks:

Responsive Alternate Examples:

Also the Ted Goas Responsive link above has an excellent fluid example.

Troubleshooting & General Guides:

You’ll need to use VML to get background images working in Outlook (Except in the body tag). Here are some VML links:

Advertisements

Email Template – 17 Advanced Tricks for Outlook 2007, 2010 and 2013

1. Outlook ignores margin and padding on images.

Outlook 2007-13 do not support the margin or padding CSS properties when placed within an image.

Try using hspace and/or vspace:

<img src="http://www.emailonacid.com/example.jpg" align="left" vspace="10" hspace="10" />

Or add the additional spacing to the image itself (in pixels).

2. Text doesn’t wrap automatically in Outlook.

If you have text within a table, for instance “aaaaaaaaaaaaaaaaa” and you want it to wrap, try adding this style:

<td style="word-break:break-all;">

3. Outlook adds a 1px border to tablecells.

If you are using a background color in your table cell, you’ll see a 1px white border around the contents of the TD. To fix, simply add the following to your embedded styles:

table td { border-collapse: collapse; }	
Or you can add it inline:
<td style="border-collapse: collapse;">... </td>  

4. Outlook sometimes ignores link styling.

Outlook 2007 and 2010 do NOT support inline styes IF the “a” tag does NOT include an “href” attribute.

For example:

<a style="font-size: 20px; color: #004990;">Shop Flooring </a>
Should be changed to:
<a href="http://www.test.com" style="font-size: 20px; color: #004990;">Shop Flooring </a> 

5. If spacing is important, avoid using lists.

The safest way to get consistent results is to use a table instead:

<table cellpadding="2" cellspacing="2" border="0"> 
    <tr>
        <td valign="top">•</td>
        <td>Test</td>
    </tr>
    <tr>
        <td valign="top">1.</td>
        <td>Test</td>
    </tr>
</table> 

6. Use cellpadding and cellspacing with tables.

Avoid using “margin” or “padding” CSS properties in your TABLE tag. Cellpadding and Cellspacing attributes are generally safe but margin or padding will often be added to every TD within the table.

If you are using an align attribute on your table, for example:

<table align="left"> 

7. Outlook sometimes removes padding.

Outlook 07 and 2010 have been known to convert divs and headings to paragraphs with nested spans. This changes the HTML container from a box element to an inline element.

For example this:

<h2 style="font-size: 15px; font-weight: bold; margin: 0; padding: 17px 0 0 0;">
   NEW FASHIONS
</h2>
Will get converted to:
<p class=MsoNormal style='mso-outline-level:3'>
   <b>
     <span style='font-size:11.5pt'>NEW FASHIONS<o:p></o:p></span>
   </b>
</p> 

8. Use MSO to control line height.

Try adding “mso-line-height-rule:exactly” just before your line-height declaration.

For example:

<td style="mso-line-height-rule:exactly; line-height:50px;">
This fix ONLY works on block elements. So trying to achieve the same effect inside a font or span tag will not work. Since this is a Microsoft only CSS property, it should not interfere with any other email client.

9. Outlook interprets tables literally.

Be sure your rowspan attributes within your TDs are set to the correct value. Most web browsers are very lenient if you have a higher value than required but Outlook 07 and 2010 will interpret them even if the additional rows do not exist in your table.

10. Outlook sometimes ignores the width and height of HTML elements.

Box elements with a fixed width and height may not display correctly. If horizontal and vertical spacing is determined by spacer graphics (as opposed to the email’s content), be aware that customized spacing and alignment may be impossible in some cases. For best results, try using a combination of transparent spacer images and the HTML height attribute on the table cell.

11. Outlook sets TDs at a minimum of 2 pixels high.

Outlook 2007 and 2010 impose a 2-pixel height minimum for table cells. So, for example, if a table cell contains a 1-pixel transparent gif and a background color, your ‘horizontal line’ will appear thicker than expected.

12. Image backgrounds in Outlook require VML.

In some versions of Outlook (07/10/13) image backgrounds won’t work without using Vector Markup Language (VML). VML is a deprecated, XML-based file format for two-dimensional vector graphics which is part of the Office Open XML standards. This is a complicated problem to fix, so check out this blog about how to use VML to create functional image backgrounds.

You can also try Stig’s Bulletproof Email Background Images tool (http://emailbg.net/) which does a lot of the work for you.

13. Outlook converts some divs to paragraphs.

Outlook often converts your DIVS to paragraphs. To date, we have not been able to detect a rhyme or reason for why it converts DIVs when it does, if you know, please feel free to share it with us below.

14. Outlook uses the Word rendering engine.

Within its viewer, Outlook 2007 uses “text boundaries” which differ slightly from “page breaks.” Text boundaries are used to separate elements within the web layout for purposes of printing and don’t actually output any HTML code.

From our research, we learned that text boundaries stretch to a maximum height of 23.7 inches (aprox. 1,790 pixels) before it automatically inserts a partition line and creates a new text boundary. Therefore, If you have any tables that are higher than 23.7 inches within your email, it will get broken up into multiple, stacked text boundaries.

15. Tall images will be cropped in Outlook.

Outlook truncates the upper portion of all images higher than 1728px from the top-down. So, if your image is 250px longer than the 1728px limit, 250px will get cropped off the top.

We’ve also seen Outlook re-scale an image so that it’s max height is 1728px.

We suggest that you crop your images and stack them on top of each other.

16. Images with dimensions defined in HTML may render incorrectly.

Stretched images (e.g., bars, borders, gradients, etc.) may not render correctly. All graphics should have their correct dimensions in the file properties. Do not rely on HTML-defined dimensions for images that are critical to the email’s layout.

17. Animated GIFs aren’t supported by Outlook.

Outlook does not support animated GIFs, instead it only shows the first slide of your animation so make sure the most important call to action is on that slide.

 

Copyright from: http://www.emailonacid.com/blog/details/C13/tips_and_tricks_outlook_07-13

How to set template center position in Yahoo mail

I’m having a strange issue with Yahoo, where my email is not centered and goes way to the left.

yahoo-mail-template-not-center-position

 

 

 

 

 

 

Where other Mail services is doing good with centered position as my expectation.

However, Finally I have worked out a neat little fix to ensure the email is centered okay. To set up that, I add the following style to the main “table 100% width & height, align – center, table-layout: fixed”  that able wraps around my content:

<table height="100%" width="100%" cellpadding="0" cellspacing="0" 
border="0" align="center" style="table-layout:fixed;">


yahoo-mail-template-center-position

 

 

 

 

 

 

 

Thanks! for reading. Good Day 🙂