ResponsiveEmail.com is een online service van Copernica waarmee e-mails op gemakkelijke wijze responsive worden gemaakt. Dat zorgt ervoor dat e-mails ook op mobiele telefoons en andere devices goed leesbaar zijn. Belangrijk, want ruim 50% van alle e-mails wordt al lang niet meer op een ouderwetse computer geopend. Het responsive maken van e-mails is daarom relevanter dan ooit tevoren. In deze lezing presenteert Copernica CTO Emiel Bruijntjes de ResponsiveEmail.com service, en laat hij zien welke uitdagingen HTML designers tegenkomen bij het responsive maken van een mail, en hoe de REST API en/of gebruiksvriendelijke drag-and-drop editor van ResponsiveEmail.com dit voor zowel ontwikkelaars als voor marketeers een stuk makkelijker maakt.

1. Responsive e-mail
Een e-mail geschikt voor ieder device
23 April | Multichannel Conference 2015

2. Wie ben ik?
• Emiel Bruijntjes
• Programmeur
• Oprichter van Copernica
• @emielbruijntjes

3. Over Copernica
• Softwarebedrijf in Amsterdam
• Al 15 jaar actief
• Ontwikkelt e-mailmarketingsoftware
• Meer dan 5000 tevreden gebruikers
• @copernicanl, @copernica

4. Drag & Drop Editor
Nieuwste producten van Copernica

5. Responsive e-mail is belangrijk!

6. Desktop Webmail Mobiel
31%
2013
28%
2013
41%
2013
OPENPERCENTAGE PER DEVICE

7. 31%
2013
18%
2013
41%
2013
22%
2014
25%
2014
53%
2014
OPENPERCENTAGE PER DEVICE
Desktop Webmail Mobiel

8. 3 Apple iPad 12%
1 Google Android 28%
2 Apple iPhone 16%
4 De rest… 44%
Mobile opens wereldwijd (Bron: Litmus 2014)
OPENPERCENTAGE PER TYPE MOBIEL

9. Het aantal opens op mobiel is
in 2014 met 24% gestegen.

10. 53%
MOBILE OPENS
Bron: Litmus (2014)

12. Wat is ResponsiveEmail.com?
Een online service waarmee je
Responsive HTML e-mails kunt ontwikkelen

13. Wat is ResponsiveEmail.com?
Jouw input Responsive e-mails
{ JSON }
Online service

14. JSON ALS INPUT
{
"name": “Chucks",
"from": “hello@chucks.com",
"subject": “Join us for coffee",
"attachments": [
{
"url": "https://www.example.com/doc1.pdf",
"name": “brochure.pdf"
}
],
"content": {
"blocks": [
{
"type": "html",
"content": "<p>Example email</p>"
}
]
}
}
JSON
{ JSON }
HTML /
MIME

15. Responsive email als output:

16. 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.

17. 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

18. Allle statistieken van je mailings
worden bijgehouden en opgeslagen

19. ResponsiveEmail.com heeft ook een
gebruiksvriendelijke drag and drop editor.

20. Drag-and-drop editor

21. Drag-and-drop editor
https://www.youtube.com/watch?v=w8Vp51tnOmo

22. Content verbergen is simpel
.hideContent {
display: none;
font-size: 0;
max-height: 0;
line-height: 0;
mso-hide: all;
}
CSS
V.S.

23. Content verbergen is simpel
Bijvoorbeeld: button alleen zichtbaar op een mobiele telefoon

24. 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

25. Mail Transfer Agent van Copernica

26. ResponsiveEmail op je eigen server
Jouw Input Responsive e- mails
{ JSON }
MailerQ

27. HOE WERKT HET?
JOUW
APP
JSON
DOC
HTML /
MIME
Input JSON
formaat
MailerQ Responsive e-mail
HTML/MIME formaat
Direct versturen
naar ontvangers

28. Waarom zelf verzenden?
• Hou data in eigen huis
• Zelf controle over e-mail aflevering
• Gebruik het ResponsiveEmail algoritme
• Of omdat Copernica jou niet als klant wil

29. Het kan ook met HTML/CSS
maar…
Waarom moeilijk doen, als
het ook makkelijk kan?

30. 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

31. VEEL VERSCHILLENDE DEVICES

32. HTML E-MAILS ONTWIKKELEN
IS OVER HET ALGEMEEN ERG FRUSTREREND
!!!

33. DE BASIS MOET GOED ZIJN
• Gebruik tabellen
• Plaats CSS inline
• Vermijd Flash, Javascript

34. 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

35. 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

36. GEBRUIK INLINE CSS, OMDAT…
+ =
Gmail
<style type="text/css">
body {
background: #083b5e;
}
</style>
Embedded CSS
#fail

37. GMAIL & EMBEDDED CSS
E-mail met inline CSS in Gmail E-mail met embedded CSS in Gmail

38. Maar hoe zorg je ervoor dat je e-mail op
alle devices correct wordt weergegeven?

39. RESPONSIVE E-MAIL
Fluid design
(Flexibele layouts & afbeeldingen)
Media queries
(Extra controle op basis van
schermafmetingen)+Responsive e-mail

40. FLUID DESIGN
Voorbeeld van een fluid designed e-mail
Desktopversie Mobiele versie

41. FLUID DESIGN
Layout: gebruik percentages i.p.v. pixels (fixed design)
<table width="640">
<tr>
<td>
<table width="100%">
<tr>
<td>
… Content …
</td>
</tr>
</table>
</td>
</tr>
</table>

42. 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

43. 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

44. Fluid design is ideaal voor
simpele e-mail layouts.
Bijvoorbeeld 1-kolom designs.

45. HALLO @MEDIA QUERIES
1 2
Desktopversie
1
2
Mobiele versie

46. @MEDIA QUERIES
Wat kun je ermee?
• Content onder of naast elkaar plaatsen
• Grotere tekst en buttons
• Elementen wel of niet tonen
• Extra grip op je layout op een mobiel

47. @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.

48. @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

49. @MEDIA QUERIES
Voorbeeld: kolommen onder elkaar plaatsen (stacking)
1
2
@media screen and (max-device-width: 480px) {
td[class="column"]{
width: 100% !important;
float: left !important;
}
}
CSS
<table>
<tr>
<td class="column">
Kolom 1
</td>
<td class="column">
Kolom 2
</td>
</tr>
</table>
HTML
1 2
Mobiele versie

50. @MEDIA QUERIES
Voorbeeld: content verbergen
Plaats deze CSS binnen of buiten de @media query om content te verbergen.
Bijvoorbeeld een button dat alleen zichtbaar is op een mobiele telefoon.
.hideContent {
display: none;
font-size: 0;
max-height: 0;
line-height: 0;
mso-hide: all; /* speciaal voor MS Outlook 2007 - 2013 */
}
CSS

51. @MEDIA QUERIES
Voorbeeld: flexibele afbeeldingen
<img src="foo.png" width="" height="" alt="" class="flexible" />
HTML
@media screen and (max-device-width: 480px) {
img[class="flexible"]{
width: 100% !important;
height: auto !important;
max-width: 640px !important;
}
}
CSS

52. Helaas ondersteunen niet alle
e-mailclients @media queries.

53. @MEDIA QUERY ONDERSTEUNING
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

54. Wat is de beste methode om je
e-mail op elk device goed te weergeven?

55. DE BESTE METHODE BESTAAT NIET
Hoeveel ontvangers openen je e-mail op een mobiel?
Afhankelijk van je e-mailstatistieken
kun je bepalen welke methode geschikt is.
Fluid, responsive of beide.

56. Waarom moeilijk doen, als
het ook makkelijk kan?

57. Waarom ResponsiveEmail?
• Minder tijd kwijt aan testen van e-mails
• Sneller responsive e-mails maken
• Integreerbaar met externe systemen
• Meer focus op content
• Werkt ook in de toekomst

58. Meer info
www.responsiveemail.com
www.mailerq.com

59. Bedankt voor je aandacht.