View
72
Download
0
Category
Tags:
Preview:
Citation preview
Handling the Preview Pain
• Left align your company logo
• Use your subject line to excite some mystery (sometimes known as click bait)
• Start off copy strong, lead the user in.
• Try to get a strong CTA above the “scroll”.
Design Notes
• Optimize for mobile: avoid multiple column layouts,
• Limit the amount of images you use
• Strive to have live text rather than images
Code Specs
• Use tables for layout
• In-line styling
• Be redundant. Define styling on everything. Have a hay day with the !important tag. Leave nothing up to interpretation.
• Code for the lowest comment denominator
In-line styling
I like cheese
<span style=“font-size: 62px; font-weight: bold; color: #ffcc66; line-height: 82px; margin:0; padding:0; font-family: Open Sans, Helvetica, Arial, Lucida Grande, sans-serif;”>I like cheese</span>
Can & Can’t• No floating… be a dreamweaver instead. Use spacer
cells and nested tables.
• Don’t trust margins, padding
• Avoid using <p> or <h1> tags
• Avoid table cell padding: Outlook will take the padding from any cell in a row and apply it to all of the cells in the row.
Code Tips
• Full body background colors are hard to get.
• Background images not fully supported
• Avoid unnecessary whitespace in table cells
• Avoid extra space between <img> tags and their containers.
Images not displayed
• Avoid spacer images
• Declare all dimensions
• Not much support for transparency
• Provide fallback colors or alt text
Pro-active• Announcements that are relative (New Features,
services)
• Welcomes & Check-ins (“Happy Birthday!”)
• Helpful tips, tricks (recipes, related services)
• Newsletters (Take the opportunity to create goodwill)
Reactive
• Transactionals: new share, comment, follow.
• Customers have experienced difficulty recently
• Customers have been inactive
CampaignMonitor.com
Litmus.com
MailChimp.com
ResourcesEverything you could need is on these 3 websites.
A Few Favorites• CSS support chart: www.campaignmonitor.com/css
• Free templates: https://github.com/mailchimp/email-blueprints/tree/master/templates
• GIFs guide: https://litmus.com/blog/a-guide-to-animated-gifs-in-email
• Inspiration: http://reallygoodemails.com/
Rock Solid HTML Emails by David Greiner (24ways.org/2009/rock-solid-html-emails)
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)
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)
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)
Stupid HTML Email Design Mistakes (http://www.mailchimp.com/articles/stupid-html-email-design-mistakes)
Ok, here’s everything
Recommended