• Save
How to craft a modern, mobile-optimized HTML email template
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 8,482 views

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

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

Statistics

Views

Total Views
8,482
Views on SlideShare
2,697
Embed Views
5,785

Actions

Likes
1
Downloads
0
Comments
0

6 Embeds 5,785

http://blog.jasonsamuels.net 5775
http://webcache.googleusercontent.com 4
http://translate.googleusercontent.com 3
https://www.google.com 1
http://www.linkedin.com 1
http://www.tumblr.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 1. How to craft amodern, mobile-optimized HTML emailJason Samuels, NCFR IT ManagertemplateDrupalCamp Twin Cities – May2012
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. @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. 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. Email on Acid – TestResults 14
  • 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. <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. 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. 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. 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