BOXED INHow not to feel when you’re

making html emails.

You may have heard some bad rumors about me.

MailChimp.com

Email EnvironmentPrepare for battle.

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 SpecsKnow your limitations, then test them.

• Throw out that idea of 650px or less and design for mobile first.

• Simple layouts are best

Design Notes

• Optimize for mobile: avoid multiple column layouts,

• Limit the amount of images you use

• Strive to have live text rather than images

Coding for email is unique…

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>

CSS support is inconsistent

Mobile is taking off

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

Use the title tag strategically

Test, test, test!

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

InspirationBreak those rules you just learned.

That’s it!Thank you for your time :)

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