Responsive E-mail: Tips & tricks om e-mail op alle devices correct weer te geven

Responsive e-mailTips & tricks om e-mail op alle devices correct weer te geven

22 januari | Webwinkel Vakdagen 2015

KORTE MEDEDELING

De presentatieslides zijn te vinden opwww.responsiveemail.com/wwv

Wie ben ik?

• Emiel Bruijntjes• Programmeur• Founder van Copernica• @emielbruijntjes

Over Copernica (1/2)

• Softwarebedrijf in Amsterdam• Ontwikkelt e-mailmarketingsoftware• Meer dan 5000 tevreden gebruikers• Gold Sponsor WebWinkel Vakdagen 2015• @copernicanl

Over Copernica (2/2)

• Copernica Marketing Suite• MailerQ• ResponsiveEmail.com• PHP-CPP

WAT IS EEN RESPONSIVE E-MAIL?

Een e-mail die er goed uitziet opeen mobiele telefoon, toch?

ZOALS BIJVOORBEELD

Responsive e-mail wordtsteeds belangrijker.

Desktop Webmail Mobiel

31%

NOV2012

28%

NOV2012

41%

NOV2012

OPENPERCENTAGE PER DEVICE

31%

NOV2012

28%

NOV2012

41%

NOV2012

31%

NOV2013

18%NOV2013

51%

NOV2013

OPENPERCENTAGE PER DEVICE

Desktop Webmail Mobiel

3 Apple iPad 13%

1 Google Android 57%

2 Apple iPhone 16%

4 De rest… 14%

Mobile opens wereldwijd (Bron: Litmus 2013)

OPENPERCENTAGE PER TYPE MOBIEL

51%MOBILE OPENSBron: Litmus (2013)

ER GOED UITZIEN IS MAARHET TOPJE VAN DE IJSBERG

Responsivee-mail

Inline CSSHTML 4.0!mso

Media queries

!important

E-mailclients!DOCTYPE

HoofdpijnTijd

Testen

Tabellen

Fluid design

Dirty hacksGeen standaarden

Gmail

MS Outlook

HTML E-MAILS ONTWIKKELENIS OVER HET ALGEMEEN ERG FRUSTREREND

!!!

DE BASIS MOET GOED ZIJN

• Gebruik tabellen• Plaats CSS inline• Vermijd Flash, Javascript

GEBRUIK TABELLENEn gebruik HTML attributen waar mogelijk.

<table width="640">

<tr>

<td align="left">

… Content …

</td>

</tr>

</table>

Tabellen voor layouts

<div>

… Content …

</div>

Gebruik geen divs voor layouts

GEBRUIK INLINE CSS

<table>

<tr>

<td style="color: #ffffff;">

… Content …

</td>

</tr>

</table>

Inline CSS

<style type="text/css">

td {

color: #ffffff;

}

</style>

Embedded CSS

GEBRUIK INLINE CSSEN VOORKOM VERRASSINGEN

E-mail met inline CSS in Gmail E-mail met embedded CSS in Gmail

Maar hoe zorg je ervoor dat je e-mail opalle devices correct wordt weergegeven?

RESPONSIVE E-MAIL

Fluid design(Flexibele layouts & afbeeldingen)

Media queries(Extra controle op basis van

schermafmetingen)+Responsive e-mail

FLUID DESIGNLayout: gebruik percentages i.p.v. pixels (fixed design)

Desktopversie

Mobiele versie

<table width="640">

<tr>

<td>

<table width="100%">

<tr>

<td>

… Content …

</td>

</tr>

</table>

</td>

</tr>

</table>

FLUID DESIGNVergeet de <viewport> niet in te stellen

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

</head>

Plaats de viewport metatag binnen de <head> in je HTML-document

FLUID DESIGNAfbeeldingen: gebruik percentages

<img src="foo.png" width="100%" style="height: auto;" />

Percentages voor afbeeldingen die mee moeten schalen met de layout.

640px 320px

HALLO @MEDIA QUERIES

1 2

Desktopversie Mobiele versie

• Content onder elkaar plaatsen

• Grotere tekst en buttons

• Content wel of niet tonen

1

2

@MEDIA QUERIESExtra grip dankzij CSS @media queries

@media screen and (max-device-width: 480px) {

table[class="wrapper"]{

width: 100% !important;

}

}

Met CSS media queries pas je elementen in de layout aan op basisvan de schermgrootte.

P.S. Om stijlen te overschrijven, gebruik je !important.

@MEDIA QUERIESVoorbeeld: kolommen onder elkaar plaatsen (stacking)

1 2

<table>

<tr>

<td class="column">

Kolom 1

</td>

<td class="column">

Kolom 2

</td>

</tr>

</table>

.column {

width: 50%;

}

CSS

HTML

Desktopversie

@MEDIA QUERIESVoorbeeld: kolommen onder elkaar plaatsen (stacking)


td[class="column"]{


float: left !important;

}

}

CSS

<table>

<tr>

<td class="column">

Kolom 1

</td>

<td class="column">

Kolom 2

</td>

</tr>

</table>

HTML

1

2

1 2

Mobiele versie

@MEDIA QUERIESVoorbeeld: flexibele afbeeldingen

<img src="foo.png" width="" height="" alt="" class="flexible" />

HTML


img[class="flexible"]{


height: auto !important;

max-width: 640px !important;

}

}

CSS

@MEDIA QUERY ONDERSTEUNINGHelaas ondersteunen niet alle e-mailclients @media queries

E-mailclient @media ondersteuning

iOS (iPhone, iPad, ipod Touch) Ja

Android Email App (2.2+) Ja

MS Windows Mobile 7.5 Ja

MS Windows Mobile 8 Nee

Android Gmail App Nee

Android Inbox App Nee

Waarom moeilijk doen, alshet ook makkelijk kan?

Wat is ResponsiveEmail.com?

Jouw input Responsive e-mails

{ JSON }

Online service

Een online service waarmee jeResponsive HTML e-mails kunt ontwikkelen

JSON ALS INPUT{

"name": "My template",

"from": "[email protected]",

"subject": "Example email",

"attachments": [

{

"url": "https://www.example.com/doc1.pdf",

"name": "brochure.pdf"

}

],

"content": {

"blocks": [

{

"type": "html",

"content": "<p>Example email</p>"

}

]

}

}

JSON

{ JSON } HTML /MIME

INTEGREERBAARResponsveEmail.com biedt een eenvoudige RESTful interface

https://www.responsiveemail.com/v1/{RESOURCE}?access_token={YOUR_API_TOKEN}

E-mailberichten aanmaken, aanpassen en opslaan(in HTML of MIME) gaat via (secure) HTTP calls.

HOE WERKT HET?

JOUWAPP

JSONDOC

HTML /MIME

Input JSONformaat

APIResponsiveEmail.com

Responsive e-mailHTML/MIME formaat

Direct versturennaar ontvangers

OFResponsive e-mail HTML/MIME naar jouw app voor verder verwerking

E-mailstatistieken van verzondene-mailberichten met ResponsiveEmail.com

worden bijgehouden en opgeslagen.

ResponsiveEmail.comDrag and Drop editor

Content verbergen is simpel

.hideContent {

display: none;

font-size: 0;

max-height: 0;

line-height: 0;

mso-hide: all;

}

CSS

V.S.

Content verbergen is simpelBijvoorbeeld: button alleen zichtbaar op een mobiele telefoon

PERSONALISERENPersonaliseer op basis van data over je ontvangers

{ if }

Indien opgegeven gegevensovereenkomt, toon deze content

{ elseif }

Of indien opgegeven gegevensovereenkomt, toon deze content

{ else }

Indien opgegeven gegevensniet overeenkomen, toon deze content

Waarom ResponsiveEmail.com?

• Minder tijd kwijt aan testen van e-mails• Sneller responsive e-mails maken• Integreerbaar met externe systemen• Meer focus op content• Geen ‘gedoe’ met HTML e-mails

Meer info

Ga naar www.responsiveemail.comof loop langs Copernica op stand M52.

Bedankt voor je aandacht.

De presentatieslides zijn te vinden opwww.responsiveemail.com/wwv

Responsive E-mail: Tips & tricks om e-mail op alle devices correct weer te geven

Marketing

Transcript of Responsive E-mail: Tips & tricks om e-mail op alle devices correct weer te geven