Tips for writing HTML Emails

Web Designers often create HTML Email Templates and face the problem of its compatibility on Email clients and Webmail especially. It might be like, Its running good on Yahoo, AOL. But fails in Gmail. Quite often, HTML Emails fail to load on Outlook 2007 and Outlook 2010.

I’ll like to share some tips using which one can create successful HTML Emails. So that your HTML Email loads properly in all the Mailboxes and Email clients

  1. The first basic rule of HTML Email is one single file, that is you can’t attach a style sheet. And you shouldn’t probably call it too, you should simply include something like
    Select Code
    <style type="text/css">.
    /* Your Style sheet */

    Within the <head> of your Email HTML Template. But there is a big problem with it, Gmail doesn’t supports a style sheet, its only supports inline CSS. Thus you’ll need to convert it into an inline type with no external references to style using #Tags. That is something like

    Select Code
    &lt;p style="font-family: "Verdana", Arial;"&gt;

    Also, attachments are often stored in randomly named temporary cache folders by some email programs. They also hog a lot of bandwidth (especially when they bounce) so attachments are not the way to go. Simply upload your images into a public-accessible web sever and call your Images from there. Also remember not to resize the Image, stretched images may not render properly. All graphics should have their correct dimensions.

  2. Another thing important is, use as less CSS as you can . Desktop Email clients, mainly Outlook 2007 and Outlook 2010 doesn’t support most of the CSS. Outlook often converts your DIVS to paragraphs, so your DIVS will be messed up. Also, 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. Also, 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.
  3. Tables is the safest thing to use in HTML Email. Do not rely on CSS based layouts. Make Email layouts completely based on Tables. You may also nest tables in your HTML template. Its completely safe.
  4. One more thing important is, don’t have too wide templates for your HTML Email Template. We are not designing HTML sites here. The width should exceed 600px I believe. Think small!
  5. After you are done you can test you email in virtual Email simulation and testing websites. One good site I came across was, here you can see how your Email will look in various Email programs.

I hope the above points help you. Good luck!

1,282 thoughts on “Tips for writing HTML Emails

  1. Pingback: Celebrity Feet
  2. Pingback: xsullengirlx
  3. Pingback: cavitacion
  4. Pingback: how to fuck a girl
  5. Pingback: UK hand surgeon
  6. Pingback: Jonathan
  7. Pingback: Facebook
  8. Pingback: Download Pc Games
  9. Pingback: visit this page
  10. Pingback: Here
  11. Pingback: Molly
  12. An impressive share, I just given this onto a colleague who was performing somewhat analysis on this. And he in truth purchased me breakfast since I found it for him.. smile. So let me reword that: Thnx for the treat! But yeah Thnkx for spending the time to discuss this, I really feel strongly about it and adore reading even more on this topic. If possible, as you turn into expertise, would you mind updating your weblog with additional details? It really is extremely valuable for me. Large thumb up for this blog post!

  13. Nice post. I find out something a lot more challenging on diverse blogs everyday. It will consistently be stimulating to read content from other writers and practice a little something from their store. I’d prefer to use some using the content on my blog whether or not you do not mind. Natually I’ll give you a link on your web weblog. Thanks for sharing.

  14. Pingback: Eva
  15. Pingback: online marketing
  16. Pingback: amoratube
  17. Pingback: AmazeTheme Review
  18. Pingback: ed show msnbc
  19. Pingback: Gordon

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>