It’s a Mobile World Out There, Shouldn’t Your Email be as Well?

Transcript

1. 913.888.0772 | imodules.com 913.888.0772 | imodules.com It’s a Mobile World Out There, Shouldn’t Your Email be as Well? Presented by Chris Smith, Manager of Design Services
2. I solemnly swear to … • Show you options for creating mobile templates • Show you how to make tables responsive • Deconstruct some CSS • Probably lose you in the code • Give you enough of the basics to find your way out of all that code • Explore some development tools and resources that will help you build successful templates
3. You know what’s in your pocket … and you know what you do with it
4. Methods for our mobile madness Narrow Template • Max width is <= 500px • You rely on the mobile device to auto-fit your email (as the native Android mail app laughs in your face) • Auto-fit emails are easy enough to read without pinching & zooming
5. Methods for our mobile madness Mobile Aware (Friendly) • Max width is determined by mobile devices not desktop applications • Font sizes and buttons are optimized for mobile devices • Desktop and mobile render the exact same email
6. Methods for our mobile madness Fluid Layout • Width is % based so the email will stretch to any size • Max-width is used to restrict the overall size (there is not 100% support for max- width) • Some work will be needed to make image width’s change but most styles stay the same
7. Methods for our mobile madness Responsive • Maximize your real estate • Optimize content for desktop & mobile separately • Feel like an “email god” when you pull it off
8. How do you make a table play like a div?
9. Just shove it to the side Table alignment method <table align=“left”>…</table> <table align=“right”>…</table>
10. Or shove it to the (other)side Table alignment method <table align=“right”>…</table> <table align=“left”>…</table>
11. … or put it’s cells into a block Display Block method <tr> <td></td> <td></td> </tr> @media style td {display:block;} /* be very specific and only target the td */
12. Quick tips before we jump into the fun stuff
13. First thing’s first, make it flexible! Set up the basic structure of your template to allow content to be shifted around Keep it clean, keep it simple and for the love of sanity keep the images out of your template structure! … if you can
14. Those pre-generated layouts are … meh Choose the Mobile Ready layout that best fits with your basic structure Always start with the “Create New” design template
15. Where the wild things are …
16. In the magical land of Custom CSS So what’s in there? 1. Email Client Specific Styles • Forces Outlook into submission 2. Reset Styles • Standard resets that help even the playing field 3. Mobile Styles • Media queries! (most everything you do will be in here)
17. Uh, that is totally not how you do CSS @media only screen and (max-device-width: 720px) { td[class="mobileHeaderCell"] { display:block !important; } } Thanks to Yahoo you’ll get to become real familiar with Attribute Selectors. Yahoo Mail basically give @media styles the highest priority, essentially rendering your mobile email on desktop … not cool Yahoo, not cool. Luckily, attribute selectors put the blinders on Yahoo so that your mobile styles only show up where you want them to.
18. The pitfalls of [Attribute Selectors] Attribute selectors are very specific by nature. This makes it harder to produce re-useable CSS for your email. Normally to target a <span class=“large”> you would do something like: .large {font-size:18px;} To do the same thing in email you have to do: span[class=“large”] {font-size:18px!important;}
19. * & ~ are going to blow your mind *[class=“large”] = Any element with only the class “large” on it: <p class=“large”><span class=“large”> td[class*=“large”] = Any <td> where any part of the class name contains the word large: <td class=“largetitle”><td class=“largenews”><td class=“largefeature”> td[class~=“large”] = Any <td> where multiple classes are present and one of the class names is “large”: <td class=“large noborder”><td class=“large article nopadding”>
20. * & ~ are going to blow your mind You can also combine them get even more flexibility! *[class~=“large”] = Any element where multiple classes are present and contains the class name “large” in the string: <td class=“large noborder”><p class=“large title news”>
21. Need more convincing? @media only screen and (max-device-width: 720px) { td[class="mobileHeaderCell"], td[class="mobileColumnCell"], td[class="mobileFooterCell"], td[class="mWidth"] { display:block !important; } table[class="mobileHeaderWidth"], table[class="mobileColumnWidth"], table[class="mobileFooterWidth"], td[class="mobileHeaderCell"], td[class="mobileColumnCell"], td[class="mobileFooterCell"] { width:480px!important; } *[class="mWidth"] { width:100%!important; } } @media only screen and (max-device-width: 720px) { td[class*="mobile"], td[class~="mWidth"] { display:block !important; } *[class*="mobile"] { width:480px!important; } *[class~="mWidth"] { width:100%!important; } }
22. Every good build starts with the foundation Here is my go-to table structure for every bit of content that I set up: <table class="mWidth" width="#" cellpadding="0" cellspacing="0" border="0" style="border- collapse: collapse;"> <tr> <td class="mWidth" width="#" align="left" style="padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px;">Article Title</td> </tr> <tr> <td class="mWidth" width="#" align="left" style="padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px;">Body copy</td> </tr> </table>
23. Images not responsive, no problem If your image tag looks something like this: <img src=“image.jpg” width=“600” height=“200”> Then add this class to it: <img class=“mFullImage” src=“image.jpg” width=“600” height=“200”> Make sure your CSS contains this though: @media only screen and (max-device-width: 720px) { img[class=“mFullImage”] { width:100%!important; height:auto!important;} }
24. Not the only one adding images, try this <table class="mWidth" width=“600" cellpadding="0" cellspacing="0" border="0" style="border- collapse: collapse;"> <tr> <td class="mWidth mFullImage" width=“600" align="left" style="padding:0px;"> <img src=“image.jpg” width=“600” height=“200”> </td> </tr> </table> Change your CSS to look like this: @media only screen and (max-device-width: 720px) { td[class~=“mFullImage”] img, img[class=“mFullImage”] { width:100%!important; height:auto!important;} }
25. Not the only one adding images, try this Be sure to coach the admins on the best way to update images when you set them up this way. • Edit the content block the image is in • Right click the image • Select “Properties” • Use the image manager within properties to change the image Now the new image will replace the old image exactly in the same spot
26. Development tools are not your kids, so go ahead and pick your favorite!
27. Some of my favorite tools Sublime Text • For it’s clean interface and code snippet functionality Firefox browser • It’s developer tool plays nicer with max-device-width http://placehold.it • Quickly generate placeholder images for testing http://litmus.com • One stop testing for all the major email readers
28. Need a little more help? Must have resources for anyone building mobile email templates http://www.campaignmonitor.com/css https://www.campaignmonitor.com/dev-resources/guides/mobile/ http://responsiveemailresources.com/ https://tinypng.com/ http://designblog.imodules.com/s/1005/images/editor_documents/ChrisSmi th_email-snippets.zip
29. 913.888.0772 | imodules.com 913.888.0772 | imodules.com Questions?