ResponsiveEmail.com: een e-mail geschikt voor ieder device
59
Responsive e-mail Een e-mail geschikt voor ieder device 23 April | Multichannel Conference 2015
-
Upload
copernica-bv -
Category
Marketing
-
view
193 -
download
1
Transcript of ResponsiveEmail.com: een e-mail geschikt voor ieder device
Responsive e-mailEen e-mail geschikt voor ieder device
23 April | Multichannel Conference 2015
Wie ben ik?
• Emiel Bruijntjes• Programmeur• Oprichter van Copernica• @emielbruijntjes
Over Copernica
• Softwarebedrijf in Amsterdam• Al 15 jaar actief• Ontwikkelt e-mailmarketingsoftware• Meer dan 5000 tevreden gebruikers• @copernicanl, @copernica
Drag & Drop Editor
Nieuwste producten van Copernica
Responsive e-mail is belangrijk!
Desktop Webmail Mobiel
31%
2013
28%
2013
41%
2013
OPENPERCENTAGE PER DEVICE
31%
2013
18%
2013
41%
2013
22%
2014
25%
2014
53%
2014
OPENPERCENTAGE PER DEVICE
Desktop Webmail Mobiel
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
Het aantal opens op mobiel isin 2014 met 24% gestegen.
53%MOBILE OPENSBron: Litmus (2014)
Wat is ResponsiveEmail.com?
Een online service waarmee jeResponsive HTML e-mails kunt ontwikkelen
Wat is ResponsiveEmail.com?
Jouw input Responsive e-mails
{ JSON }
Online service
JSON ALS INPUT{
"name": “Chucks",
"from": “[email protected]",
"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
Responsive email als output:
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
Allle statistieken van je mailingsworden bijgehouden en opgeslagen
ResponsiveEmail.com heeft ook eengebruiksvriendelijke drag and drop editor.
Drag-and-drop editor
Drag-and-drop editor
https://www.youtube.com/watch?v=w8Vp51tnOmo
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
Mail Transfer Agent van Copernica
ResponsiveEmail op je eigen server
Jouw Input Responsive e- mails
{ JSON }
MailerQ
HOE WERKT HET?
JOUWAPP
JSONDOC
HTML /MIME
Input JSONformaat
MailerQ Responsive e-mailHTML/MIME formaat
Direct versturennaar ontvangers
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
Het kan ook met HTML/CSSmaar…
Waarom moeilijk doen, alshet ook makkelijk kan?
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
VEEL VERSCHILLENDE DEVICES
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 CSS, OMDAT…
+ =Gmail
<style type="text/css">
body {
background: #083b5e;
}
</style>
Embedded CSS
#fail
GMAIL & EMBEDDED CSS
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 DESIGNVoorbeeld van een fluid designed e-mail
Desktopversie Mobiele versie
FLUID DESIGNLayout: 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>
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
Fluid design is ideaal voorsimpele e-mail layouts.
Bijvoorbeeld 1-kolom designs.
HALLO @MEDIA QUERIES
1 2
Desktopversie
1
2
Mobiele versie
@MEDIA QUERIESWat 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
@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)
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
@MEDIA QUERIESVoorbeeld: 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
@MEDIA QUERIESVoorbeeld: 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
Helaas ondersteunen niet allee-mailclients @media queries.
@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
Wat is de beste methode om jee-mail op elk device goed te weergeven?
DE BESTE METHODE BESTAAT NIETHoeveel ontvangers openen je e-mail op een mobiel?
Afhankelijk van je e-mailstatistiekenkun je bepalen welke methode geschikt is.
Fluid, responsive of beide.
Waarom moeilijk doen, alshet ook makkelijk kan?
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
Meer info
www.responsiveemail.comwww.mailerq.com
Bedankt voor je aandacht.
