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

1. How to craft a
modern, mobile-
optimized HTML email
Jason Samuels, NCFR IT Manager
template
DrupalCamp Twin Cities – May
2012

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 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

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 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

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 – Test
Results
14

15. 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

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 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

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