responsive emails and zurb foundation for email

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

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

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;">

&#xA0;</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