responsive emails and zurb foundation for email

52
responsive emails

Upload: geoffroy-baylaender

Post on 12-Apr-2017

111 views

Category:

Technology


4 download

TRANSCRIPT

Page 1: Responsive emails and ZURB Foundation for email

responsive emails

Page 2: Responsive emails and ZURB Foundation for email

geoffroy baylaender

@gBaylaenderWeb developer at Kerr

Page 3: Responsive emails and ZURB Foundation for email

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

Page 4: Responsive emails and ZURB Foundation for email

few numbers

Source: Litmus

Page 5: Responsive emails and ZURB Foundation for email

150 t/daystudies find people look at their phones an avg of 150 times/day

Page 6: Responsive emails and ZURB Foundation for email

47% of email opens happen on mobile devices*

Page 7: Responsive emails and ZURB Foundation for email

6xtransactional emails can produce

over 6 times the revenue than generic marketing emails.

Page 8: Responsive emails and ZURB Foundation for email
Page 9: Responsive emails and ZURB Foundation for email

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

Page 10: Responsive emails and ZURB Foundation for email

When do people check their email on mobile?

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

Page 11: Responsive emails and ZURB Foundation for email

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

Page 12: Responsive emails and ZURB Foundation for email

34%of consumers have marked a brand’s promotional emails as spam

because they didn’t display or work well on their smartphone

Page 13: Responsive emails and ZURB Foundation for email

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

Page 14: Responsive emails and ZURB Foundation for email

#ResponsiveEmailDesign

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

Page 15: Responsive emails and ZURB Foundation for email

who can help us in our job

Page 16: Responsive emails and ZURB Foundation for email

some tools (web app)

Page 17: Responsive emails and ZURB Foundation for email

butif I have to build it myself?

Page 18: Responsive emails and ZURB Foundation for email

email development pain points

Page 19: Responsive emails and ZURB Foundation for email

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/

Page 20: Responsive emails and ZURB Foundation for email

some best practices

Page 21: Responsive emails and ZURB Foundation for email

600px → 320pxsingle column layout: the best option

Page 22: Responsive emails and ZURB Foundation for email

background imageuse Background Images Sparingly

Page 23: Responsive emails and ZURB Foundation for email

<table>code all structure using the table elementfor more complicated layouts, nest tables

Page 24: Responsive emails and ZURB Foundation for email

think mobile first

Page 25: Responsive emails and ZURB Foundation for email

system fontweb fonts are not widely supported in email,

web-safe fonts like Arial, Helvetica, Tahoma, Times Roman, and Georgia.

Page 26: Responsive emails and ZURB Foundation for email

13-14 px text 20-22 px title

much more readable on a small screen

Page 27: Responsive emails and ZURB Foundation for email

CTAminimum size: 44 x 44px

place above the fold

Page 28: Responsive emails and ZURB Foundation for email

imagesuse only absolute links for images

Page 29: Responsive emails and ZURB Foundation for email

alt=“Use me”don’t assume that the images will be always seen

see how design the not display image text on Litmus

Page 30: Responsive emails and ZURB Foundation for email

!importantin order to remove the blue link on iOS use

color: #333 !important;

Page 31: Responsive emails and ZURB Foundation for email

inline CSSbefore sending

Page 32: Responsive emails and ZURB Foundation for email

phone numbersprovide tappable phone numbers for mobile,

so users can easily call with a single touch

Page 33: Responsive emails and ZURB Foundation for email

30 characterslimit subject lines to 30 characters or less

Page 34: Responsive emails and ZURB Foundation for email

restrict the length… of your emails,

subscribers often skim first,deleting any email that’s too long to easily read on mobile

Page 35: Responsive emails and ZURB Foundation for email

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

Page 36: Responsive emails and ZURB Foundation for email

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

Page 37: Responsive emails and ZURB Foundation for email

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

Page 38: Responsive emails and ZURB Foundation for email

SASS versionRequirements:

● Node.js

● foundation-cli

● Inky HTML

● Sass

● Handlebars templates

● BrowserSync

● Image compression

● Inlining

● Gulp

$ foundation watch (work)

$ foundation build (live)

Page 39: Responsive emails and ZURB Foundation for email

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>

Page 40: Responsive emails and ZURB Foundation for email

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>

Page 41: Responsive emails and ZURB Foundation for email

inky: button<button href="#">Button</button> <table class="button">

<tr> <td> <table> <tr> <td><a href="#">Button</a></td> </tr> </table> </td> </tr></table>

Page 42: Responsive emails and ZURB Foundation for email

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>

Page 43: Responsive emails and ZURB Foundation for email

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>

Page 44: Responsive emails and ZURB Foundation for email

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>

Page 45: Responsive emails and ZURB Foundation for email

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>

Page 46: Responsive emails and ZURB Foundation for email

test! test! test!

Page 47: Responsive emails and ZURB Foundation for email

litmus.com

● email previews● builder● checklist● spam testing● page testing● email Analytics

Page 48: Responsive emails and ZURB Foundation for email
Page 49: Responsive emails and ZURB Foundation for email

or / and

Page 50: Responsive emails and ZURB Foundation for email

Source: HTML5ROcks.com

Page 51: Responsive emails and ZURB Foundation for email

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

Page 52: Responsive emails and ZURB Foundation for email

Thank you