10 Tips for HTML Email Programming Success

December 3rd, 2009 | By Mark Lewis | 2 Comments

HTML coding for emails is tricky; inboxes are crowded, and attention spans are short.  So, it’s important to get your email–and email coding–just right.

  1. Appropriate Design. The design of your email must be idiomatic for the medium. HTML/CSS support among email clients is rife with pitfalls. Know what is and is not possible.
  2. Target Email Client Support. In designing the email, you walk the line of email design versus client support versus spam score. Too advanced design will have a smaller email client support. Heavy images will increase spam score. Wider email client support requires simpler design. More text, less images will improve deliverability.
  3. Plan First. Mock up your entire HTML email, from the header at the top to the legal copy at the bottom. You can use a previous email that you created or one you received recently from another company as a model.
  4. Maximum Width and Height. The email header shouldn’t be too tall – remember that some users may see only the header in the preview pane of their email clients. 200 pixels high should be the maximum height. Emails should never be more than 600 pixels wide.
  5. Love Your Text. Use graphics sparingly. Whenever possible (other than, say, logos), put text in HTML. Remember, many emails are delivered without images, so readers will see only the text. Text formatting is one of the most important factors in programming a successful HTML email.
  6. Be Friendly, Be Social. Always include social media links, view online links, as well as a “forward to a friend” links in your emails.
  7. Lowest Common Denominator Programming. Email clients are the dummies of HTML rendering. Many desktop clients use inferior HTML rendering engines. Web-based clients restrict what HTML and CSS you can use in order to keep your email’s HTML from interfering with their GUI. No floats, no margins- nothing more complex than tables.
  8. Don’t Use Background Images. Background colors are fine, but background images are problematic in some email clients, especially Outlook.
  9. Specify Height and Width. Always add the height and width to images to ensure that the blank placeholder image doesn’t throw your design out of proportion. It’ll also help retain proper formatting during loading so your email doesn’t “jump” when the images load in place. Always specify the height and width of <div>s, <table>s <td>s, etc.
  10. ALT Attributes. Put ALT attributes in all <img>s. Users will see no images until they click the load images button in their email client. The ALT text will be visible, however.
  11. Specify Font Settings in CSS. Do not use <font> tags anymore. They are not supported in all email clients. Place them in the <style> attribute of the parent HTML entity. For segments of text, use <span>.
  12. Specify CSS in Style Attributes.CSS must be programmed in-line (stated within tags using style=”your styles”) Web-based email clients ignore most of what’s in the HEAD of your HTML. <style> declarations should be avoided as web-based email clients ignore those definitions to keep the client’s GUI CSS declarations intact.
  13. Test, Test, Test How do you get to Carnegie Hall? Practice. Test your emails. Set up test accounts with every online email program (such as Gmail, Hotmail, and Yahoo! Mail). Set up local email programs (such as Outlook and AppleMail) on your in-house computers. Send them to multiple email programs, use Litmus or similar programs, ask friends, and proofread. Then do it all again, then send your email. Also test after any change, no matter how small. Your change may have hit an email client’s quirk.

Paying attention to these simple programming rules may mean the difference between an undeliverable email and a successful campaign!

Tags: , , , , ,

  • http://www.olmblog.com/?p=9807 Online Marketing Blog » Blog Archive » links for 2009-12-04

    [...] 10 Tips for HTML Email Programming Success HTML coding for emails is tricky; inboxes are crowded, and attention spans are short. So, it’s important to get your email–and email coding–just right. (tags: coding html) [...]

  • http://accountclient.com/ receive faxes via email

    The inline css will get you if you dont use it.

Email Transmit Info Center – Email Marketing Blog is proudly powered by WordPress | Entries (RSS) and Comments (RSS).