How to craft a modern, mobile-optimized HTML email template

8,917 views
8,844 views

Published on

Presented at DrupalCamp Twin Cities 2012: http://2012.tcdrupal.org/sessions/mobile-html-email-and-drupal

Based on a blog post: http://blog.jasonsamuels.net/post/21868914080/crafting-a-modern-mobile-optimized-html-email-template

Published in: Education, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,917
On SlideShare
0
From Embeds
0
Number of Embeds
6,115
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

How to craft a modern, mobile-optimized HTML email template

  1. 1. How to craft amodern, mobile-optimized HTML emailJason Samuels, NCFR IT ManagertemplateDrupalCamp Twin Cities – May2012
  2. 2. 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
  3. 3. 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
  4. 4. How we got thereThree 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
  5. 5. MailChimp• Free resources available at: http://mailchimp.com/resources/• Email Jitsu guide: http://mailchimp.com/resources/guides/e mail-jitsu• Free email templates: http://mailchimp.com/resources/html- email-templates 5
  6. 6. Theming the template• Open your website’s Style Guide page, start Firebug, and begin matching elements• Focus on: – color – font-family – font-size – font-weight – line-height 6
  7. 7. Mobile optimization• Cameron Lefevre is my hero• NTEN blog post introducing the issue: http://www.nten.org/articles/2012/the- age-of-mobile-email-has-arrived-are-you- ready• NTC session notes (include code samples): http://labs.mrss.com/optimizing-email-for- mobile-phones-notes-from-ntc-2012/ 7
  8. 8. CSS3 @media query@media screen and (max-width: 600px) { table.emailtable, td.emailcontent { By defining alternate styles in width: 95% !important; } h1, h2, h3, h4 { the CSS for devices based text-align:center !important; } .nomob { on their maximum screen display: none !important; } .headerContent{ width, some elements can be text-align:center !important; } a.baemailfooternav { display: block !important; transformed or hidden to font-size: 14px !important; font-weight: bold !important; padding: 6px 4px 8px 4px !important; make for a more user-friendly line-height: 18px !important; background: #dddddd !important; border-radius: 5px !important; format margin: 10px auto; width: 240px; text-align: center; } } 8
  9. 9. CSS3 @media query@media screen and (max-width: 600px) { table.emailtable, td.emailcontent { • Defines when mobile styles width: 95% !important; } h1, h2, h3, h4 { get called text-align:center !important; } .nomob { display: none !important; • This query applies format } .headerContent{ text-align:center !important; on screens up to 600px } a.baemailfooternav { display: block !important; wide font-size: 14px !important; font-weight: bold !important; padding: 6px 4px 8px 4px !important; line-height: 18px !important; • Main table gets re-sized background: #dddddd !important; border-radius: 5px !important; margin: 10px auto; from 600px down to 95% of width: 240px; text-align: center; } the screen’s width } 9
  10. 10. CSS3 @media query@media screen and (max-width: 600px) { table.emailtable, td.emailcontent { • Header tags and header width: 95% !important; } h1, h2, h3, h4 { content get centered when text-align:center !important; } .nomob { viewed on mobile display: none !important; } .headerContent{ text-align:center !important; • nomob is used to hide } a.baemailfooternav { display: block !important; elements on mobile 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; } } 10
  11. 11. CSS3 @media query@media screen and (max-width: 600px) { table.emailtable, td.emailcontent { Transforms styling in the width: 95% !important; } h1, h2, h3, h4 { footer navigation when text-align:center !important; } .nomob { viewed on mobile. In display: none !important; } .headerContent{ particular, this code takes text-align:center !important; } a.baemailfooternav { display: block !important; ordinary text links and turns font-size: 14px !important; font-weight: bold !important; padding: 6px 4px 8px them into easy-to-press 4px !important; line-height: 18px !important; background: #dddddd !important; buttons. border-radius: 5px !important; margin: 10px auto; width: 240px; text-align: center; } } 11
  12. 12. @media query exampleMobile 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
  13. 13. 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
  14. 14. Email on Acid – TestResults 14
  15. 15. Don’t use bullet points (ornumbered 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
  16. 16. <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
  17. 17. Preheader table needed abackground 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
  18. 18. 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
  19. 19. Additional Resources• Email on Acid blog: http://www.emailonacid.com/blog• Campaign Monitor blog: http://www.campaignmonitor.com/blog/• My blog: http://blog.jasonsamuels.net 19

×