How to craft a modern, mobile-optimized HTML email template Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012
Our old email template Pros Simple Lightweight Worked as plain-text Rendered OK on mobile Cons Outdated look Lots of junk code = error characters Inconsistent with website 2
Our new email template Pros Simple Lightweight Works as plain-text More Pros! Preheader text Optimized for mobile (ios) Consistent with website Clean code Tested across email clients 3
How we got there Three major resources made this possible: MailChimp (free templates and guide) Cameron Lefevre (NTC session on optimizing email for mobile) Email on Acid (testing service) 4
MailChimp Free resources available at: http://mailchimp.com/resources/ Email Jitsu guide: http://mailchimp.com/resources/guides/ email-jitsu Free email templates: http://mailchimp.com/resources/htmlemail-templates 5
Theming the template Open your website s Style Guide page, start Firebug, and start matching elements Focus on: color font-family font-size font-weight line-height 6
Mobile optimization Cameron Lefevre is my hero NTEN blog post introducing the issue: http://www.nten.org/articles/2012/theage-of-mobile-email-has-arrived-are-youready NTC session notes (include code samples): http://labs.mrss.com/optimizing-email-formobile-phones-notes-from-ntc-2012/ 7
CSS3 @media query @media screen and (max-width: 600px) { table.emailtable, td.emailcontent { width: 95%!important; h1, h2, h3, h4 { text-align:center!important;.nomob { display: none!important;.headercontent{ text-align:center!important; a.baemailfooternav { display: block!important; font-size: 14px!important; font-weight: bold!important; padding: 6px 4px 8px 4px!important; line-height: 18px!important; background: #dddddd!important; border-radius: 5px!important; margin: 10px auto; width: 240px; text-align: center; By defining alternate styles in the CSS for devices based on their maximum screen width, some elements can be transformed or hidden to make for a more user-friendly format 8
CSS3 @media query @media screen and (max-width: 600px) { table.emailtable, td.emailcontent { width: 95%!important; h1, h2, h3, h4 { text-align:center!important;.nomob { display: none!important;.headercontent{ text-align:center!important; a.baemailfooternav { display: block!important; font-size: 14px!important; font-weight: bold!important; padding: 6px 4px 8px 4px!important; line-height: 18px!important; background: #dddddd!important; border-radius: 5px!important; margin: 10px auto; width: 240px; text-align: center; Defines when mobile styles get called This query applies format on screens up to 600px wide Main table gets re-sized from 600px down to 95% of the screen s width 9
CSS3 @media query @media screen and (max-width: 600px) { table.emailtable, td.emailcontent { width: 95%!important; h1, h2, h3, h4 { text-align:center!important;.nomob { display: none!important;.headercontent{ text-align:center!important; a.baemailfooternav { display: block!important; font-size: 14px!important; font-weight: bold!important; padding: 6px 4px 8px 4px!important; line-height: 18px!important; background: #dddddd!important; border-radius: 5px!important; margin: 10px auto; width: 240px; text-align: center; Header tags and header content get centered when viewed on mobile nomob is used to hide elements on mobile 10
CSS3 @media query @media screen and (max-width: 600px) { table.emailtable, td.emailcontent { width: 95%!important; h1, h2, h3, h4 { text-align:center!important;.nomob { display: none!important;.headercontent{ text-align:center!important; a.baemailfooternav { display: block!important; font-size: 14px!important; font-weight: bold!important; padding: 6px 4px 8px 4px!important; line-height: 18px!important; background: #dddddd!important; border-radius: 5px!important; margin: 10px auto; width: 240px; text-align: center; Transforms styling in the footer navigation when viewed on mobile. In particular, this code takes ordinary text links and turns them into easy-to-press buttons. 11
@media query example Mobile transformation <a href="http://www.twitter.com/ncfr" class="baemailfooternav">follow on Twitter</a><span class="nomob"> </span><a href="http://www.facebook.com/ncfrpage" class="baemailfooternav">friend on Facebook</a><span class="nomob"> </span><a href="-" class="baemailfooternav">forward to a friend</a> 12
Email on Acid Cross-client email testing service Shows how your message displays in 45 combinations of email services, browsers, and clients Plus code analysis and spam filter testing $35/month for unlimited testing Discounted for longer term commitments $2 - $5 per test a la carte pricing available 13
Email on Acid 14
Don t use bullet points (or numbered lists) Some webmail clients left justify them Some webmail clients center them Some left-justify lists & center the content Path of least resistance = ditch the <ol> tag, go w/ asterisks & line breaks instead 15
<p align= left > GMail and Yahoo Mail default paragraph (<p>) tags to align center align when viewed in Internet Explorer Other browsers still align paragraphs left Why? I don t know. Forcing the alignment left fixes it 16
Preheader table needed a background color Although it s already defined in the CSS, Yahoo Mail doesn t show it With the repeating blue stripe at the top of our template, that resulted in dark text on a dark background 17
Voila! This was not a short process Took a lot of work and dozens of tests to get it right End result looks pretty darn good though, and stays looking good across all of the popular email clients 18
Additional resources http://emailonacid.com/blog http://campaignmonitor.com/blog http://blog.jasonsamuels.net 19