An Introduction to Responsive HTML Email

Why Email?

  • For every $1 spent, email marketing generates $38 (some say closer to $45).
  • There are 3X more email accounts and than there are Facebook and Twitter Accounts combined.
  • 72% people prefer to receive promotional content through email, compared to 17% who prefer social media.
  • 90% of email gets delivered to the intended recipient’s inbox, whereas only 2% of your Facebook fans see your posts in their News Feed.
  • The average click-through rate of an email campaign is around 3% (of total recipients), whereas the average click-through rate from a tweet is around 0.5%.

Word Processed Email

One Big Image Email

Red X of Death

Collage Email

Collage Email on iPhone

CAN-SPAM Act

  • Must have "affirmative consent" from recipient.
  • Must be easy for the recipient to opt out.
  • Must provide a valid email return address.
  • Must provide a physical address.
  • Cannot disguise an advertisement as a personal email.
  • Cannot offer a reward for forwarding.

The Challenge of HTML Email

  • Email Client — Device — Browser — Operating System
  • No support for <script>.
  • Images in HTML emails must be hosted, not attached.
  • No support for <link>.
  • No support for <style> in Gmail.
  • Limited CSS properties.

We’ve made the decision to continue to use Word for creating e-mail messages because we believe it’s the best e-mail authoring experience around.

— Microsoft, 2009

Lack of Standards Support

  • <section>, <article>, <div>, <p>
  • "colspan" and "rowspan" for tables
  • Multiple classes on HTML elements
  • Complex CSS selectors and CSS layout properties.
  • Can’t use shorthand for things like color & font-size

								
							    

Code Like It's 1999

  • Layout using tables for positioning.
  • Simple, inline CSS.
  • Styling via HTML attributes.

    Document Type Declaration

  • Should I use a doctype? Which one?
  • Short Answer: Use the XHTML 1.0 Transitional doctype.

Responsive Meta Tag

						
					    
					    
					    HTML Email
						
					

Outermost Table

						
							
					    
Hello World!

Inner Table

						
						
Hello World!

Styling Text

						
					    
Hello World!

Typography Tangent

But What About Media Queries?

						
							
								 
								
						
					

CSS Inliners

Templates

Testing

Thank You.