HTML Emal Newsletters: Design, Code & Strategy

The State of HTML Email Newsletters Email Client Obstacles & Restrictions Design for the environment Code like it’s 1999

The Email Environment WHAT DOES IT MEAN?!?

The Email Environment Gmail

The Email Environment outlook

The Email Environment mmmm hotmail

Your mission: Design with a goal in mind Be useful Less is more Get attention Be trustworthy - make unsubscribing easy!

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

The Preview Pain... It’s more like 250x250px

The Preview Pain... 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.

The Preview Pain..

Images not displayed?!

Images not displayed?! Link to view in browser

Images not displayed?! Use alt text - ex. “To enjoy this fully, please enable images” *Some email clients will apply CSS to alt text.

Images not displayed?! Include a plain text version Blackberry Curve Other Blackberry Nokia Symbian

Images not displayed?! Stick with live text - esp. for the important stuff “Add me to your address book” Send through a reputable provider

Code like it’s 1999 Code for the Lowest Common Denominator Provide fallbacks - Be degradable Define EVERYTHING

WHOOOOAAAAA!

Think of it as a challenge

Email Client Popularity credit: campaignmonitor.com/stats/email-clients/

Layout: Use Tables Be a Dreamweaver - use empty cells, nested tables Set width on every cell Avoid extra space in between <td> and <img> tags Don’t rely on margin or padding No floating!

Reset & Define Everything Don’t rely on header styling - only 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

Inline Styling Example Hey yʼall! <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>

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;

Images Avoid spacer images Include all dimensions and size image to declared size Avoid PNGs Provide fallback colors for background images

Display Hack for Hotmail Windows Live Hotmail adds a few pixels of additional padding below images. Workaround: img {display: block;}

Degradable Coding Provide fallback colors for background images Alt text or live text links for everything! CSS for Alt tags

Inspirations

Just remember this: Design: Keep it simple Take advantage of what you can do Code: Be Redundant Be Degradable Test, test, test

Resources Inline Stylers - inlinestyler.torchboxapps.com/styler premailer.dialect.ca

Resources htmlemailgallery.com, emaildesigngallery.com - Email design galleries, some tips emaildesignreview.com - Inspiration, Tips & Insights into the industry Inline Styler - inlinestyler.torchboxapps.com/styler premailer.dialect.ca campaignmonitor.com mailchimp.com

H av eF un hall th at! w it

Credits Email 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/)

HTML Emal Newsletters: Design, Code & Strategy

by Julia Anderson on Sep 16, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

HTML Emal Newsletters: Design, Code & Strategy — Presentation Transcript