My slides for the talk about Responsive Emails on the FrontEnders Ticino monthly meetup (November 2016). Best practice, tips, numbers, tools and ZURB Foundation for emails (Inky).

1. responsive
emails

2. geoffroy baylaender
@gBaylaender
Web developer at Kerr

3. responsive emails
are supported by:
● iOS Mail app
● Android 4.x Email (OEM) app
● Windows Phone 7.5
● BlackBerry OS7
● BlackBerry Z10
● iPhone Gmail app
● Android Gmail app
● Windows Phone 8 (partial supported)
● Windows Phone 10 (partial supported)
are not supported by:
● iPhone Mailbox app
● iPhone Yahoo! Mail app
● Android Yahoo! Mail app
● BlackBerry OS5
● Windows Mobile 6.1
● Windows Phone 7
●

4. few numbers
Source: Litmus

5. 150 t/day
studies find people look at their phones an avg of 150 times/day

6. 47%
of email opens happen on mobile devices*

7. 6x
transactional emails can produce
over 6 times the revenue than generic marketing emails.

9. Movable Ink “US Consumer Device Preference Report: Q3 2014″ (2014)

10. When do people check their email on mobile?
Movable Ink “US Consumer Device Preference Report: Q3 2014″ (2014)

11. 45%
of consumers have unsubscribed from a brand’s promotional email
because the brand’s emails or website dind’t display or work well on their smartphone

12. 34%
of consumers have marked a brand’s promotional emails as spam
because they didn’t display or work well on their smartphone

13. 79%
of people delete or unsubrscibe an email if it doesn’t look good on their mobile device

14. #ResponsiveEmailDesign
“Using fluid tables, fluid
images, and media queries
to control the layout of an
email across different
device sizes.”

15. who can help us in our job

16. some tools (web app)

17. but
if I have to build it myself?

18. email development pain points

19. email development = back to the ‘90s
CSS layout as we think,
just doesn’t work
HTML Tables, and tables, and tables,...
CSS inline styles
CSS proprieties (campaignmonitor.com/css)
Picture by http://www.guestfolio.com/

20. some best practices

21. 600px → 320px
single column layout: the best option

22. background image
use Background Images Sparingly

23. <table>
code all structure using the table element
for more complicated layouts, nest tables

24. think mobile first

25. system font
web fonts are not widely supported in email,
web-safe fonts like Arial, Helvetica, Tahoma, Times Roman, and Georgia.

26. 13-14 px text
20-22 px title
much more readable on a small screen

27. CTA
minimum size: 44 x 44px
place above the fold

28. images
use only absolute links for images

29. alt=“Use me”
don’t assume that the images will be always seen
see how design the not display image text on Litmus

30. !important
in order to remove the blue link on iOS use
color: #333 !important;

31. inline CSS
before sending

32. phone numbers
provide tappable phone numbers for mobile,
so users can easily call with a single touch

33. 30 characters
limit subject lines to 30 characters or less

34. restrict the length
… of your emails,
subscribers often skim first,
deleting any email that’s too long to easily read on mobile

35. some email development tips
● Nest tables for consistent spacing
● Use Inline CSS
● set widths in each cell rather than on the
table
● Set a Background color on a container table
● Whitespace does matter
● Avoid relying on Images
● Don’t use an image as the first item in your
email
● Use ALT attributes
● Always have texts and images
● Don’t inline CSS until you have finished to
coding
● Use email tool will automatically inline your
CSS (e.g.: ZURB Inliner or Campaign
Monitor)
● Use, if you can, a template
● Don’t use all-image emails
● Create a preview text in an hidden <div>
● CSS targeting via attribute selectors
Source: campaignmonitor.com

36. but we are on the 2016
a lot of tools could help us

37. ZURB foundationfor email
● responsive grid for any layout
● common UI patterns to build faster
● make stylish emails fast with SASS
● spend less time testing & preparing

38. SASS version
Requirements:
● Node.js
● foundation-cli
● Inky HTML
● Sass
● Handlebars templates
● BrowserSync
● Image compression
● Inlining
● Gulp
$ foundation watch (work)
$ foundation build (live)

39. inky: templating language
“Inky is a templating language that converts
simple HTML tags into the complex table HTML
required for emails.
HTML emails require tables upon tables upon
tables to work properly. Although Foundation for
Emails takes a lot of the pain out of constructing
these tables, we've made it even easier with Inky,
a templating language that converts simple
HTML tags like <row> and <columns> into
complex table HTML.”
Base tags:
● Grid:
○ <container>
○ <row>
○ <columns>
● Button: <button>
● Callout: <callout>
● Menu:
○ <menu>
○ <item>

40. inky: a templating language by ZURB Foundation
<container>
<row>
<columns>This is a column.</columns>
</row>
</container>
<table class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table>
<tr>
<th>This is a column.</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

41. inky: button
<button href="#">Button</button> <table class="button">
<tr>
<td>
<table>
<tr>
<td><a href="#">Button</a></td>
</tr>
</table>
</td>
</tr>
</table>

42. inky: coloring
<button href="#" class="alert">
Alert Button
</button>
<table class="button alert">
<tr>
<td>
<table>
<tr>
<td><a href="#">Alert Button</a></td>
</tr>
</table>
</td>
</tr>
</table>

43. inky: column
<columns>
This is a column.
</columns>
<th class="small-12 large-12 columns first last">
<table>
<tr>
<th>This is a column.</th>
<th class="expander"></th>
</tr>
</table>
</th>

44. inky: row
<container>
<row>
Columns go here
</row>
</container>
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
Columns go here
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

45. inky: spacer
<p>Stuff on top</p>
<spacer size="100"></spacer>
<p>Stuff on bottom</p>
<p>Stuff on top</p>
<table class="spacer">
<tbody>
<tr>
<td height="100px" style="font-size:100px;line-height:100px;">
&#xA0;
</td>
</tr>
</tbody>
</table>
<p>Stuff on bottom</p>

46. test! test! test!

47. litmus.com
● email previews
● builder
● checklist
● spam testing
● page testing
● email Analytics

49. or / and

50. Source: HTML5ROcks.com

51. Useful links
➔ The Ultimate Guide to CSS
➔ Coding your emails
➔ Foundation for Emails 2
➔ Litmus Blog
➔ Responsive email design
➔ Emailmonday

52. Thank you