eNewletter

Technologies

Points to remember while creating Enewsletter

  • Declare the Correct DocType
  • Wrap the Email in a 100% Width Table
  • No Wider than 600px
  • Provide bg-color to background images
  • Avoid Background Images
  • Use a spacer.gif
  • Text Transform: capitalize not working in outlook
  • Give style=”display:block” and alt attribute to images
  • Apply these text-decoration:none, color, cursor:pointer styles to anchor tag
  • Valign value set to top
  • cellspacing — best to set this equal to zero every time
  • cellpadding — to create a small amount of space on the edges of your table, use cellpadding.
  • Use the background attribute on a table cell to set background images
  • Be aware that background images applied to tables or divs are not supported by Outlook 2007
  • Use Inline Styles When Coding Your CSS
  • Some popular email clients ignore the code inside your head tags
  • Use inline styles repetitively and often. Applying a font tag to a parent table doesn’t necessarily mean it will carry that attribute down to all of its children. Make sure to set inline styles on all of your HTML elements.
  • Apply detailed inline styles to links Especially for Gmail users – you must set specific styles to every link. Otherwise, they will inherit the default font-family, size and color set by each user’s browser.
  • Wrap your images in span tags and set font attributes to style your ALT text accordingly. This allows you to style your ALT text, making it more readable when images are disabled.
  • Always Close Your Tags
  • Don’t use floats
    Both Outlook 2007 and earlier versions of Notes offer no support for the float property. Instead, use the align attribute of the img tag to float images in your email.
  • <img src=”image.jpg” align=”right”>
  • Avoid shorthand for fonts and hex notation
  • p {font:bold 1em/1.2em georgia,times,serif;}
  • Instead, declare the properties individually like this.p {font-weight: bold;
    font-size: 1em;
    line-height: 1.2em;
    font-family: georgia,times,serif;
    }
  • Your background image isn’t working.
  • In Hotmail and several versions of Outlook, background images at the table and table cell level are not supported. If you insist on using background images for tables or table cells, you can specify an alternate background color that will be shown in case the background image is not supported. Make sure your design still looks presentable if this is the case.

  • Your headings are green in Hotmail, even though you’ve styled them some other color.
  • Add your color inline, along with the !important attribute, like so:
    <h2 style=”color:#000000 !important;”>My Heading</h2>

  • Encode All Characters
  • May Work:”Some sample code – with special characters”
    Will Definitely Work:&quot;Some sample code &#45; with special characters&quot;

  • Link Styling
  • Don’t forget to style the <a> tag. This will overwrite the email client’s standard link tags.
    <a href=”#” style=”color:#000000; text-decoration:none;”>Link</a>
    OR
    <a href=”http://somesite.com/” style=”color:#ff00ff”><span style=”color:#ff00ff”>this is a link</span></a>
    To some this may be overkill, but if link color is important to your design then a superfluous span is the best way to achieve consistency.

  • Email Clients
  • These are the clients you should be testing for, at the very least:

  • Outlook 2003/2007/
  • Gmail
  • Magento Email Templates List
    • Credit Memo Update Email
    • Credit Memo Update for Guest Email
    • Forgot Password Email
    • Invoice Update Email
    • Invoice Update for Guest Email
    • New Credit Memo Email
    • New Credit Memo for Guest Email
    • New Invoice Email
    • New Invoice for Guest Email
    • New Order Email
    • New Order for Guest Email
    • New Shipment Email
    • New Shipment for Guest Email
    • New Account Email
    • Newsletter Subscription Confirmation Email
    • Newsletter Subscription Success Email
    • Newsletter Unsubscription Success Email
    • Order Update Email
    • Order Update for Guest Email
    • Reward Points Balance Update Email
    • Send Product to a Friend Email
    • Share Wishlist Email
    • Shipment Update Email
    • Shipment Update for Guest Email