1 / 22

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

derek-finch
Télécharger la présentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Why bother with mobile?

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

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

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

  6. 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 …

  7. You’re going to feel like this

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

  9. 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!

  10. 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;} • }

  11. 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;} • }

  12. 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;} • }

  13. 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;} • }

  14. 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;} • }

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

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

  17. 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; }

  18. 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; } • }

  19. 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; } • }

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

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

  22. Questions?

More Related