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)
@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
1 2
Mobiele versie
@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
@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
Top Related