Mobile Email Templates: It’s time to go responsive!

Mobile Email Templates: It’s time to go responsive! Presented by Chris Smith,Design Services Team Lead

Why bother with mobile?

Methods for our mobile madness • Mobile Friendly (Aware) • Narrow Template • Fluid Layout • Responsive or Adaptive

Responsive techniques • Table alignment • <table align=“left”> • <table align=“right”>

Responsive techniques • Table alignment • <table align=“left”> • <table align=“right”> • Display block • td {display:block;}

Where do I start? • Determine the basic structure of your template • If you’re just starting to design your new template keep it simple, if you don’t …

You’re going to feel like this

The easy part • Choose the Mobile Ready layout that best fits with your basic structure • Always start with the “Create New” design template

The hard part • It’s not magic … it’s just CSS • Email Client Specific Styles • Forces Outlook into submission • Reset Styles • Standard resets that apply to all email readers • Mobile Styles • Media queries!

Code breakdown • <table class=“mobileHeaderWidth” width=“600”> • <tr> • <td class=“mobileHeaderCell” width=“300”>Content</td> • <td class=“mobileHeaderCell” width=“300”>Content</td> • <tr> • </table> • @media only screen and (max-device-width: 320px) { • table[class=“mobileHeaderWidth”], • td[class=“mobileHeaderCell”] { width:320px!important;} • td[class=“mobileHeaderCell”] { display:block!important;} • }

Table Code breakdown ! • <table class=“mobileHeaderWidth” width=“600”> • <tr> • <td class=“mobileHeaderCell” width=“300”>Content</td> • <td class=“mobileHeaderCell” width=“300”>Content</td> • <tr> • </table> • @media only screen and (max-device-width: 320px) { • table[class=“mobileHeaderWidth”], • td[class=“mobileHeaderCell”] { width:320px!important;} • td[class=“mobileHeaderCell”] { display:block!important;} • }

What in the world do I do with images? • <imgsrc=“image.jpg” width=“600” height=“200”> • <imgclass=“mFullImage” src=“image.jpg” width=“600” height=“200”> • CSS works from the top down, so apply your styles to the larger media query and let it trickle down to the smaller one • @media only screen and (max-device-width: 720px) { • img[class=“mFullImage”] { width:100%!important; height:auto!important;} • }

Padding, what happened? … you used to play so nicely • Desktop table box model • 400px table width • 10px of padding on all sides, the table still = 400px 400px

Padding, what happened? … you used to play so nicely • Desktop table box model • 400px table width • 10px of padding on all sides, the table still = 400px • Mobile increases the overall size to 420px 400px 420px

Padding, what happened? … you used to play so nicely • So what can you do to fix the broken box model? • Add this to your css and cry with joy! • td {box-sizing:border-box; }

Working with Attribute Selectors • What to do when your classes are applied to various elements? • <span class=“mHide”>Hide on mobile</span> • <table class=“mHide”>the rest of the table</table> • Instead of doing: • @media only screen and (max-device-width: 720px) { • span[class=“mHide”], • table[class=“mHide”] { display:none!important; } • }

Working with Attribute Selectors • What to do when your classes are applied to various elements? • <span class=“mHide”>Hide on mobile</span> • <table class=“mHide”>the rest of the table</table> • Do: • @media only screen and (max-device-width: 720px) { • *[class=“mHide”] { display:none!important; } • }

Some final tips • Use the News Module • Seriously, use the News Module • You can also use the “Patterned Content Module” • … aka the News Module

So where do I get started? Must have resources for anyone interested in building email templates • http://www.campaignmonitor.com/css • http://www.campaignmonitor.com/guides/mobile • http://responsiveemailresources.com/ • http://litmus.com

Questions?

Mobile Email Templates: It’s time to go responsive!