html email newsletters: design, code & strategy
DESCRIPTION
HTML Email Newsletters: Design, Code & StrategyTRANSCRIPT
The State of HTML Email Newsletters
Email Client Obstacles & Restrictions
Design for the Environment
Code like it’s 1999
Tuesday, November 13, 12
Your mission:
Design with a goal in mind
Be useful
Less is more but still GET ATTENTION
Be trustworthy: make unsubscribing easy!
Tuesday, November 13, 12
Sizing it up
Use a fixed width of no more than 550-600px
Average preview pane is 300-500px that’s generous
Design for vertical growth
Tuesday, November 13, 12
The Preview Pain... Challenge!
Introduce yourself, entice further reading, offer a link to site/view email in browser
Left-align your company logo. It gives you credibility.
Try to get your call to action above the scroll.
Tuesday, November 13, 12
Images not displayed?!
Use alt textSome email clients will apply CSS to alt text.
Tuesday, November 13, 12
Plain Textin’Include a plain text version
Blackberry Curve Other Blackberry Nokia Symbian
Tuesday, November 13, 12
Images not displayed?!
Stick with live textEsp. for the important stuff
“Add me to your address book”
Send through a reputable provider
Tuesday, November 13, 12
Code like it’s 1999
Code for the Lowest Common Denominator
Provide fallbacks - Be degradable
Define EVERYTHING
Tuesday, November 13, 12
Email Client Popularity
credit: campaignmonitor.com/resources/will-it-work/email-clients
Tuesday, November 13, 12
Mobile is in the Lead
credit: campaignmonitor.com/resources/will-it-work/email-clients
Tuesday, November 13, 12
Mobile is in the Lead
credit: campaignmonitor.com/resources/will-it-work/email-clients
Tuesday, November 13, 12
Layout: Use Tables
Use empty cells, nested tablesBe a Dreamweaver
Set width on every cell and Don’t rely on margin or padding.
Avoid extra space in between <td> and <img> tags
No floating!
Tuesday, November 13, 12
Reset & Define Everything
Don’t rely on header stylingOnly inline styles on each instance of a tag
Leave nothing to interpretation
Set all margins and padding to zero
The Usuals: font-size, color, text-decoration, font-weight, font-family
Tuesday, November 13, 12
Inline Styling Example
<p style=”font-weight:bold; font-size: 18px; font-color: #ff6600; font-family: Helvetica, Arial, Lucida Grande, Verdana, sans-serif; padding:0; margin:0; line-height: 20px;”>Hey y’all!</p>
Hey y’all!
Tuesday, November 13, 12
Avoid Shorthand
Good: color: #ff6600 Bad: color: #f60
Good:font-weight: bold;font-size: 12px;font-family: georgia, times, serif;
Bad: font: bold 12px georgia, times, serif;
Tuesday, November 13, 12
Images
Avoid spacer images
Include all dimensions and size image to declared size
Avoid PNGs
Provide fallback colors for background images
Tuesday, November 13, 12
Display Hack for Hotmail
Windows Live Hotmail adds a few pixels of additional padding below images.
Workaround: img {display: block;}
Tuesday, November 13, 12
Degradable Coding
Provide fallback colors for background images
Alt text or live text links for everything!
CSS for Alt tags
Tuesday, November 13, 12
Inspirations
When it comes to email, code like it's 1999.
Design like it's 2012.- Some Campaign Monitor Blogger
Tuesday, November 13, 12
Just remember this okay?
Design:Keep it simpleTake advantage of what you can do
Code:Be RedundantBe DegradableTest, test, test
Also, just break a few rules.
Tuesday, November 13, 12
Resourcescampaignmonitor.com
mailchimp.com
htmlemailgallery.com, emaildesigngallery.com: Email design galleries, some tips
emaildesignreview.com: Inspiration, Tips & Insights into the industry
Inline Stylers:inlinestyler.torchboxapps.com/stylerpremailer.dialect.ca
Tuesday, November 13, 12
CreditsEmail Design Tip: The 250px box by Ben from MailChimp (mailchimp.com/blog/email-design-tip-the-250-pixel-box)
Email Design Guidelines from Campaign Monitor (campaignmonitor.com/design-guidelines)
Design: HTML Email: Design Techniques: Part 1 by Think Vitamin with Nick Pettit (membership.thinkvitamin.com/library/design/html-e-mail/design-techniques-part-1)
Rock Solid HTML Emails by David Greiner (24ways.org/2009/rock-solid-html-emails)
20 Email Design Best Practices and Resources for Beginners (net.tutsplus.com/tutorials/html-css-techniques/20-email-design-best-practices-and-resources-for-beginners)
Make The Best First Impression: 7 Tips for the Most Effective Welcome and Confirmation Emails (emaildesignreview.com/email-design-best-practice/make-the-best-first-impression-7-tips-for-the-most-effective-welcome-and-confirmation-emails-192)
Stupid HTML Email Design Mistakes (http://www.mailchimp.com/articles/stupid-html-email-design-mistakes)
Bernie Marger!
Tuesday, November 13, 12