responsive emails and zurb foundation for email
TRANSCRIPT
responsive emails
geoffroy baylaender
@gBaylaenderWeb developer at Kerr
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
●
few numbers
Source: Litmus
150 t/daystudies find people look at their phones an avg of 150 times/day
47% of email opens happen on mobile devices*
6xtransactional emails can produce
over 6 times the revenue than generic marketing emails.
Movable Ink “US Consumer Device Preference Report: Q3 2014″ (2014)
When do people check their email on mobile?
Movable Ink “US Consumer Device Preference Report: Q3 2014″ (2014)
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
34%of consumers have marked a brand’s promotional emails as spam
because they didn’t display or work well on their smartphone
79%of people delete or unsubrscibe an email if it doesn’t look good on their mobile device
#ResponsiveEmailDesign
“Using fluid tables, fluid images, and media queries to control the layout of an email across different device sizes.”
who can help us in our job
some tools (web app)
butif I have to build it myself?
email development pain points
email development = back to the ‘90s
CSS layout as we think,just doesn’t work
HTML Tables, and tables, and tables,...CSS inline stylesCSS proprieties (campaignmonitor.com/css)
Picture by http://www.guestfolio.com/
some best practices
600px → 320pxsingle column layout: the best option
background imageuse Background Images Sparingly
<table>code all structure using the table elementfor more complicated layouts, nest tables
think mobile first
system fontweb fonts are not widely supported in email,
web-safe fonts like Arial, Helvetica, Tahoma, Times Roman, and Georgia.
13-14 px text 20-22 px title
much more readable on a small screen
CTAminimum size: 44 x 44px
place above the fold
imagesuse only absolute links for images
alt=“Use me”don’t assume that the images will be always seen
see how design the not display image text on Litmus
!importantin order to remove the blue link on iOS use
color: #333 !important;
inline CSSbefore sending
phone numbersprovide tappable phone numbers for mobile,
so users can easily call with a single touch
30 characterslimit subject lines to 30 characters or less
restrict the length… of your emails,
subscribers often skim first,deleting any email that’s too long to easily read on mobile
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
● 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
but we are on the 2016a lot of tools could help us
ZURB foundation for email
● responsive grid for any layout● common UI patterns to build faster● make stylish emails fast with SASS● spend less time testing & preparing
SASS versionRequirements:
● Node.js
● foundation-cli
● Inky HTML
● Sass
● Handlebars templates
● BrowserSync
● Image compression
● Inlining
● Gulp
$ foundation watch (work)
$ foundation build (live)
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>
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>
inky: button<button href="#">Button</button> <table class="button">
<tr> <td> <table> <tr> <td><a href="#">Button</a></td> </tr> </table> </td> </tr></table>
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>
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>
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>
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;">
 </td>
</tr> </tbody></table><p>Stuff on bottom</p>
test! test! test!
litmus.com
● email previews● builder● checklist● spam testing● page testing● email Analytics
or / and
Source: HTML5ROcks.com
Useful links➔ The Ultimate Guide to CSS➔ Coding your emails➔ Foundation for Emails 2➔ Litmus Blog➔ Responsive email design➔ Emailmonday
Thank you