E-mail. Voor veel mensen gaat er geen dag voorbij zonder dat ze in contact komen met e-mail op hun mobiel. Ruim 51 procent van alle e-mails wordt inmiddels geopend op een mobiel apparaat zoals een smartphone of tablet. In 2013 was dit nog 43 procent. En toch zijn er organisaties die deze cijfers negeren of er nog niet aan toegekomen zijn om hun e-mails te optimaliseren voor mobiel. Een gemiste kans.
Tekst: Michael Linthorst
De tijd die de e-mailontvanger neemt om uw e-mail te lezen wilt u optimaal benutten. Een e-mail die niet geschikt is gemaakt voor smartphones en tablets, leidt snel tot irritatie bij de e-mailontvanger. Denk hierbij aan de noodzaak om in te zoomen op te kleine letters of afbeeldingen die worden afgesneden. Geen prettige beleving dus. Het is daarom de moeite waard om er aandacht aan te besteden. U wilt uiteindelijk dat uw boodschap bij de lezer overkomt, toch?
Basiseigenschappen
Er zijn diverse mogelijkheden om e-mail te optimaliseren voor mobiele apparaten waarbij de HTML wordt aangepast. Echter, alleen de HTML aanpassen is niet genoeg. Een aantal basiseigenschappen mag zeker niet ontbreken in een geoptimaliseerde e-mail voor mobiel.
1. Onderwerpsregel
De onderwerpsregel is nu nog belangrijker vanwege de beperkte beschikbare ruimte. Houd het daarom kort en bondig. Tussen de 35 en 40 karakters is veilig.
2. Content
Beperk de boodschap in de e-mail tot relevante informatie met één duidelijke call to action. Benut daarom de informatie die u hebt over uw ontvanger om de e-mail relevanter te maken.
3. Lettertype
Gebruik een groter lettertype om het lezen van de e-mail makkelijker te maken. Inzoomen op een mobiel apparaat zorgt wel eens voor ongewenste resultaten waarbij de lay-out van de e-mail mogelijk verspringt.
4. Buttons
Een hyperlink is lastiger aan te raken dan een button. Aangezien men met de vinger navigeert op een mobiel, wilt u een zo comfortabel mogelijk raakvlak aanbieden. Gebruik buttons en zorg ervoor dat deze minimaal 44 x 44 pixels groot zijn.
5. Hyperlinks
Liever hyperlinks dan buttons? Plaats de hyperlinks dan ver genoeg uit elkaar om irritatie bij de ontvanger te voorkomen. Niemand wil per ongeluk een verkeerde link aanraken omdat de links te dicht op elkaar staan.
6. Afbeeldingen
Een mobiele internetverbinding is lang niet bij iedereen snel genoeg om een grote hoeveelheid data te downloaden. Beperk daarom het aantal afbeeldingen om de laadtijd zo laag mogelijk te houden.
Fluid e-maildesign
Als de basiseigenschappen eenmaal aanwezig zijn, is er ruimte voor nog meer optimalisatie. Bijvoorbeeld door het toepassen van fluid e-maildesign of responsive e-maildesign. Fluid e-maildesign neemt altijd 100 procent van de breedte van het scherm in beslag voor de content. De e-mail ziet er goed uit op zowel desktop als mobiel apparaat. Gebruik deze methode alleen bij minder complexe lay-outs zoals e-mails die bestaan uit één kolom. Fluid e-maildesign is relatief eenvoudig te ontwikkelen. Gebruik percentages in plaats van vaste waarden in pixels.
Voorbeeldcode fluid e-maildesign
<table border=”0” cellspacing=“0” cellpadding=“0” width=“100%”>
<td>…content…</td>
- Simpele lay-out, vaak één kolom.
- Grotere fonts, minimaal 13 punt.
- Strakke lay-out voor zowel desktop als mobiel.
Responsive e-maildesign
U kunt ook een stap verder gaan in het optimaliseren van e-mail voor mobiel met behulp van responsive e-maildesign. Dit is inmiddels een bekende methode om e-mail te optimaliseren voor mobiel. Het is een ontwerpmethodiek waarbij gebruik wordt gemaakt van CSS media queries. Met media queries bepaalt u welke stijl wordt toegepast op basis van de schermresolutie van het apparaat waarop een e-mail wordt geopend. Of zoals de volgende voorbeeldcode van een media query illustreert: pas specifieke stijlen toe op mobiele apparaten met een schermresolutie van 480 pixels of lager.
@media screen and (max-width: 480px) {
…specifieke stijlen…
Meer controle dankzij media queries
Media queries worden voornamelijk gebruikt om complexe lay-outs van e-mails (twee kolommen of meer) te laten passen op een mobiel apparaat. In de meeste gevallen worden de kolommen onder elkaar geplaatst, ook wel stacking genoemd. Met media queries hebt u dus meer controle over de inhoud en lay-out van uw e-mail. Zo kunnen verschillende onderdelen binnen e-mails worden aangepast voor een mobiel apparaat, bijvoorbeeld:
- Fonts vergroten
- Kleuren aanpassen
- Lay-out veranderen
- Content wel of niet tonen/aanpassen
Hoe zit het met de ondersteuning van media queries? E-mail clients die geen media queries ondersteunen krijgen de desktopversie van uw e-mail te zien.
- Android Gmail app
- Android Yahoo! mail app
- Windows Phone 7/8
E-mail clients die media queries wel ondersteunen
- iOS (iPhone/iPad)
- Android 2.2+ standaard mail app
- Android Outlook.com app
- Windows Phone 7.5
- BlackBerry OS 6/7/Z10
Responsive e-maildesign vergt meer tijd en kennis van HTML/CSS om het goed uit te voeren. Maar het eindresultaat mag er zijn!
Wat is de beste methode?
Afhankelijk van uw budget en prioriteiten kunt u nagaan wat voor u de beste methode is om uw e-mail te optimaliseren voor mobiel. Begin bij de e-mailstatistieken van uw ontvangers. Bijvoorbeeld, op welk apparaat wordt uw e-mail het vaakst geopend? Maakt een groot deel van uw ontvangers meer gebruik van desktop e-mail clients? Kies dan voor fluid e-maildesign. Maar we kunnen niet om het feit heen dat steeds meer ontvangers uw e-mail lezen op een mobiel apparaat. Daarom is het verstandig om HTML e-mails te optimaliseren voor mobiel. En dan is responsive e-maildesign een goede keuze.
Michael Linthorst is CEO van Copernica Marketing Software.
Lees ook: Flexibel met schermresoluties (Twinkle 6-2014)
Media queries is helaas wel iets wat steeds minder goed gaat werken. Schermresoluties van smartphones zijn steeds vaker FULL HD (terwijl veruit de meeste laptops nog gewoon 1366 x 768 hebben). Voor de low-budget smartphones zal het voorlopig nog wel werken, maar voor de populairste smartphones (van max 1 jaar oud) werkt het nu al niet meer.
Beste Peter,
Je hebt gelijk dat smartphones van tegenwoordig een Full HD-resolutie hebben. Toch gebruiken smartphones bij het vertonen van e-mail (in zowel applicaties als webbrowser) niet de volledige resolutie. Er wordt namelijk 'gezoomd'. Dat komt door de device-pixelratio. Een Nexus 5 is bijvoorbeeld Full HD maar heeft een device-pixelratio van 3, waardoor de breedte in portrait-mode 1080/3=360 is. Dat is dus kleiner dan de 480pixels waarop het bovenstaande media query is ingesteld. Er is dus een verschil tussen hardware en software pixels.