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

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

22 januari | Webwinkel Vakdagen 2015

KORTE MEDEDELING

De presentatieslides zijn te vinden op www.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 op een mobiele telefoon, toch?

ZOALS BIJVOORBEELD

Responsive e-mail wordt steeds belangrijker.

Desktop Webmail Mobiel

31%

NOV 2012

28%

NOV 2012

41%

NOV 2012

OPENPERCENTAGE PER DEVICE

31%

NOV 2012

28%

NOV 2012

41%

NOV 2012

31%

NOV 2013

18% NOV 2013

51%

NOV 2013

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 OPENS Bron: Litmus (2013)

ER GOED UITZIEN IS MAAR HET TOPJE VAN DE IJSBERG

Responsive e-mail

Inline CSS HTML 4.0 !mso

Media queries

!important

E-mailclients !DOCTYPE

Hoofdpijn Tijd

Testen

Tabellen

Fluid design

Dirty hacks Geen standaarden

Gmail

MS Outlook

HTML E-MAILS ONTWIKKELEN IS OVER HET ALGEMEEN ERG FRUSTREREND

!!!

DE BASIS MOET GOED ZIJN

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

GEBRUIK TABELLEN En 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 CSS EN 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 op alle devices correct wordt weergegeven?

RESPONSIVE E-MAIL

Fluid design (Flexibele layouts & afbeeldingen)

Media queries (Extra controle op basis van

schermafmetingen) + Responsive e-mail

FLUID DESIGN Layout: 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 DESIGN Vergeet 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 DESIGN Afbeeldingen: 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 QUERIES Extra 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 basis van de schermgrootte. P.S. Om stijlen te overschrijven, gebruik je !important.

@MEDIA QUERIES Voorbeeld: 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 QUERIES Voorbeeld: 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 QUERIES Voorbeeld: 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 ONDERSTEUNING Helaas 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, als het ook makkelijk kan?

Wat is ResponsiveEmail.com?

Jouw input Responsive e-mails

{ JSON }

Online service

Een online service waarmee je Responsive 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

INTEGREERBAAR ResponsveEmail.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?

JOUW APP

JSON DOC

HTML / MIME

Input JSON formaat

API ResponsiveEmail.com

Responsive e-mail HTML/MIME formaat

Direct versturen naar ontvangers

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

E-mailstatistieken van verzonden e-mailberichten met ResponsiveEmail.com

worden bijgehouden en opgeslagen.

ResponsiveEmail.com Drag 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 simpel Bijvoorbeeld: button alleen zichtbaar op een mobiele telefoon

PERSONALISEREN Personaliseer op basis van data over je ontvangers

{ if }

Indien opgegeven gegevens overeenkomt, toon deze content

{ elseif }

Of indien opgegeven gegevens overeenkomt, toon deze content

{ else }

Indien opgegeven gegevens niet 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.com of loop langs Copernica op stand M52.

Bedankt voor je aandacht.

De presentatieslides zijn te vinden op www.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