fbpx

Top 10 Gotchas to watch out for when designing HTML for email or eNewsletters

Top 10 Gotchas to watch out for when designing HTML for email or eNewsletters

Top 10 Gotchas to watch out for when designing HTML for email or eNewsletters

One might reasonably expect that if you write clean and simple HTML, that works across browsers with no problem that it would work fine with email too, right? The answer is a resounding “Nope”. Whether you send HTML email for product/service marketing, news aggregation and dispersal, non-profit marketing, Alumni marketing or other you need to know the pitfalls of rolling your own HTML newsletters.

brokenEmail

Email clients are all over the map and much more limited than far downstream browsers. This makes writing HTML for email delivery a veritable minefield of trial and error (e.g. Outlook actually uses MS Word for rendering!)

So from my trials, here are some of the most common gotchas I’ve found when designing HTML emails:

  1. All CSS should be “inline”. This is a requirement; many webmail clients will completely strip the head and body tags, in addition to classes on html elements.
    Reference:
    • http://kb.mailchimp.com/article/how-does-the-css-inliner-work
    • http://kb.mailchimp.com/article/css-in-html-email
  2. A “doctype” should be added (like Transitional) and also the content-type meta tag (like UTF-8).
    Reference:
    • http://mailchimp.com/resources/guides/html/mailchimp-for-designers/
  3. A wrapper div is required. The width should not be set on the body tag, but set on the wrapper div. The standard recommended maximum width for HTML emails is 600px. [Not that fix width may result in iPhone formatting issues.]
  4. Use “reset” styles to override a browser’s/email client’s default styling of certain elements. Apply the reset styles to the “wrapper div”.
    Reference:
    • http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
  5. Avoid br, hr tags and line-height attribute tags as the default line height is different for each email client.
  6. Avoid padding attribute, as Outlook doesn’t understand padding.
  7. To enforce line-height and/or spacing between two elements, “margin” attribute is the most reliable.
  8. Make sure all images have “alt” tags. In addition, make sure the image container’s size is set appropriately, so that the over-all size of the email remains intact.
  9. Last but not the least; never assume the basic things, which are granted in web design, like an anchor tag color or the default font color. This is important because there is no such thing like a default color/font, because each email client would have its own.
  10. Last but not the least; never assume the basic things, which are granted in web design, like an anchor tag color or the default font color. This is important because there is no such thing like a default color/font, because each email client would have its own.

Bonus: Pixels are always preferred instead of ems and %s. Note that the iPhone and iPad set a minimum default font size of 13px. This can be overridden, but with caution.
Reference:
• http://www.campaignmonitor.com/blog/post/3447/should-i-use-em-or-px-when-coding-for-html-email/
• http://www.campaignmonitor.com/blog/post/3339/save-your-layout-by-overriding-the-minimum-font-size-on-the-iphone-and/

That’s the list! Please add to the comments with any others that you may have found.

Related Blogs

have a question?

Send us a message

stay informed
Subscribe to 2m2x! Get the latest insights on innovation from our CEO, Rajiv Menon

We love making an impact!

To request a call, fill out the form below and an Informulate team member will reach out to discuss your project needs.

Time To Reinvent Your Company?​

Time to reinvent your company but not sure where to start? Download or free Innovation Workbook to get started today!

* You will be automatically redirected to the Workbook after you complete the form.

Process Automation

To learn more about our Process Automation solutions, fill out the form below and an Informulate team member will reach out to discuss your project needs.

Code Review

To learn more about our Code Review, fill out the form below and an Informulate team member will reach out to discuss your project needs.

Process Audit

To learn more about our Process Audit, fill out the form below and an Informulate team member will reach out to discuss your project needs.

AI Workflow Review

To learn more about our AI workflow Review, fill out the form below and an Informulate team member will reach out to discuss your project needs.

Digital Transformation

To learn more about our Digital Transformation solutions, fill out the form below and an Informulate team member will reach out to discuss your project needs.

Product Development

To learn more about our Product Development solutions, fill out the form below and an Informulate team member will reach out to discuss your project needs.

Team Enrichment

To learn more about our Team Enrichment solutions, fill out the form below and an Informulate team member will reach out to discuss your project needs.

Business Intelligence

To learn more about our Business Intelligence solutions, fill out the form below and an Informulate team member will reach out to discuss your project needs.

AI Consulting

To learn more about our AI Consulting solutions, fill out the form below and an Informulate team member will reach out to discuss your project needs.

We are ready to help you succeed!

To request a call, fill out the form below and an Informulate team member will reach out to discuss your project needs.

We love making an impact!

To request a call, fill out the form below and an Informulate team member will reach out to discuss your project needs.

We love making an impact!

To request a call, fill out the form below and an Informulate team member will reach out to discuss your project needs.

We love making an impact!

To request a call, fill out the form below and an Informulate team member will reach out to discuss your project needs.

Digital Transformation

To learn more about our Digital Transformation solutions, fill out the form below and an Informulate team member will reach out to discuss your project needs.

We love making an impact!

To request a call, fill out the form below and an Informulate team member will reach out to discuss your project needs.

Submit Your Resume

To apply for this position, fill out the form below and attach your resume in PDF format. A member of our HR team will review your submission and reply accordingly.

We love building things!

To request a call, fill out the form below and an Informulate team member will reach out to discuss your project needs.