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

(1)

How to craft a modern,

mobile-optimized HTML

email template

Jason Samuels, NCFR IT Manager

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

(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

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

(5)

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/html-email-templates

(6)

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

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

(8)

CSS3 @media query

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

@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; } }

(9)

CSS3 @media query

•  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

(10)

CSS3 @media query

•  Header tags and header

content get centered when

viewed on mobile

•  nomob is used to hide

elements on mobile

(11)

CSS3 @media query

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.

(12)

@media query example

<a href="http://www.twitter.com/ncfr" class="baemailfooternav">follow on Twitter</a><span

class="nomob"> | <a href="http://www.facebook.com/ncfrpage"

class="baemailfooternav">friend on Facebook</a> | <a

href="-" class="baemailfooternav">forward to a friend</a>

(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

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

(16)

•  GMail and Yahoo Mail default paragraph

() tags to align center align when

viewed in Internet Explorer

•  Other browsers still align paragraphs left

•  Why? I don’t know.

(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

(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

(19)

Additional resources

• http://emailonacid.com/blog

• http://campaignmonitor.com/blog

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