Naar
boven

Hoe optimaliseer je jouw e-mails voor smartphones?

De smartphone is inmiddels niet meer weg te denken: je ontvangers lezen e-mail zodra ze opstaan, als ze in de trein zitten, voor ze gaan slapen en zelfs op de wc. Kortom: je e-mailcampagne wordt over overal en altijd gelezen.

Het is dan ook niet gek dat meer dan de helft van alle e-mails inmiddels geopend wordt op een mobiel apparaat zoals een smartphone of tablet. Toch negeren nog veel ondernemers deze e-mailmarketingtrend en optimaliseren zij hun e-mail niet voor mobiele apparaten. Een gemiste kans.

De aandacht van je ontvanger wil je natuurlijk optimaal benutten. Als je e-mail niet geschikt is voor de mobiele gebruiker, leidt dit echter al snel tot irritatie.

Denk aan het moeilijk kunnen drukken op hyperlinks, het inzoomen om (te) kleine letters te lezen of afbeeldingen die niet goed worden weergegeven. Zo komt je boodschap natuurlijk nooit goed over.

Er zijn diverse mogelijkheden om je e-mailbericht te optimaliseren voor de mobiele lezer; met en zonder HTML-kennis.

De basisregels

Het optimaliseren van e-mailberichten voor smartphones gaat verder dan HTML. Er zijn een aantal basisregels waarmee je zonder veel moeite de weergave van je nieuwsbrief op smartphones verbetert.

1. De onderwerpregel

Het aantal karakters dat wordt weergegeven in de onderwerpregel is bij smartphones kleiner dan op desktop. Het is daarom belangrijk om het kort en bondig te houden. Een onderwerpregel van 35 tot 40 karakters is veilig.

2. Inhoud

Beperk de boodschap in je e-mail tot relevante informatie en plaats één duidelijke call to action. Maak daarbij gebruik van personalisatie op basis van de gegevens van de ontvanger om de e-mail relevanter te maken.

3. Lettertype

Gebruik een groter lettertype om het lezen op mobiel gemakkelijker te maken. Soms worden letters automatisch vergroot op smartphones, dit kan je lay-out volledig in de soep gooien. Daarnaast is inzoomen om een tekst te lezen erg frustrerend voor de ontvanger. Een lettertype van minimaal 13 pixels is goed te lezen.

4. Buttons

Het is beter om te linken met een button dan een met een tekstlink. Hyperlinks in de vorm van tekst zijn namelijk veel moeilijker te raken dan buttons. De navigatie met de vinger moet zo soepel mogelijk verlopen voor de ontvanger, het raakvlak van een link moet zo comfortabel mogelijk aan te klikken zijn. Gebruik buttons van minimaal 44 bij 44 pixels.

5. Hyperlinks

Wil je toch liever hyperlinks dan buttons in je e-mail? Zorg dan voor genoeg ruimte tussen de verschillende hyperlinks zodat de ontvanger niet per ongeluk de verkeerde link aanklikt.

6. Afbeeldingen

Hoewel mobiele internetverbindingen steeds sneller worden, is deze niet bij iedereen snel genoeg om veel data te downloaden. Beperk daarom het aantal afbeeldingen en hou de totale grootte van je e-mail beperkt.

Het design van je e-mail

De bovenstaande basistips zijn een goede start voordat je daadwerkelijk begint met het in HTML ontwerpen van je e-mail. Je hebt hierin eigenlijk twee keuzes, namelijk het toepassen van ‘fluid e-maildesign’ of ‘responsive e-maildesign’.

Fluid e-maildesign

Als je gaat voor fluid e-maildesign dan neemt je e-mail altijd 100 procent van de breedte van het scherm in beslag. Deze manier van ontwerpen is vooral geschikt voor een simpele lay-out bestaande uit één kolom. Je gebruikt bij fluid e-maildesign percentages in plaats van vaste waarden in pixels.

Voorbeeldcode voor fluid e-maildesign

<table border=”0” cellspacing=“0” cellpadding=“0” width=“100%”>

<tr>

<td>”¦inhoud”¦</td>

</tr>

</table>

Kenmerken van fluid e-maildesign

  •  Simpele lay-out, meestal maar één kolom.
  • Fonts van minimaal 13 pixels.
  • Strakke lay-out voor zowel desktop als mobiel.

Responsive e-maildesign

De volgende stap in het ontwerpen van e-mail voor smartphones is responsive design. Dit is inmiddels een bekende methode voor het optimaliseren van e-mail voor smartphones. Bij deze ontwerptechniek maak je gebruik van zogenaamde CSS media queries. Media queries bepalen welke stijl wordt gebruikt bij verschillende schermresoluties.

De website van KarelGeenen.nl is bijvoorbeeld responsive opgebouwd. De website past zich automatisch aan de schermgrootte aan en verandert bijvoorbeeld de werking van het menu en toont de social media buttons wel of niet.

Voorbeeld responsive e-mail

Voorbeeld van responsive templates.

Je past specifieke stijlen toe op apparaten met lagere schermresoluties. Hierbij werk je met ‘classes’ in CSS. In het onderstaande voorbeeld wordt er een andere stijl toegepast wanneer de schermresolutie van het apparaat lager is dan 480 pixels.

<style>

…plaats hier je normale stijl…

@media only screen and (max-device-width: 480px){

…plaats hier de stijlen voor smartphones…

</style>

De technische lezer zal het misschien opvallen dat we bij mobiel uitgaan van een breedte van 480 pixels terwijl sommige smartphones Full HD (1920 x 1080) zijn. Op het eerste gezicht zou je dus zeggen dat responsive design niet werkt op moderne smartphones. Bij smartphones heb je echter te maken met een device-pixelratio.

Een Nexus 5 met een resolutie van 1080 x 1920 heeft een device-pixelratio van 3. Om te berekenen hoeveel pixels je daadwerkelijk tot je beschikking hebt, deel je het aantal hardware pixels (1080 in dit geval) door de pixelratio (3) om te komen tot het aantal softwarepixels (360).

Dat betekent dat als je de telefoon rechtop in je hand houdt (portretmodus) dan valt de breedte van het scherm (360 pixels) onder de 480 pixels waarop de query is ingesteld.

Media queries

Bij complexere e-mail lay-outs (bijvoorbeeld twee of meer kolommen) gebruik je media queries om het ontwerp aan te passen voor smartphones. Zo heb je meer controle over het ontwerp en kan je bijvoorbeeld kolommen die in de desktop versie naast elkaar staan onder elkaar plaatsen in de mobiele versie.

Met behulp van media queries pas je verschillende onderdelen van een e-mail aan. Bijvoorbeeld:

  • Fonts vergroten
  • Kleuren aanpassen
  • Lay-out veranderen
  • Content wel of niet tonen

Hoe je stap-voor-stap deze queries toepast, kun je in dit artikel lezen.

Ondersteuning van media queries

Helaas ondersteunt niet elke e-mailclient media queries. Bij de e-mailclients die geen media queries ondersteunen, krijgt de lezer de desktopversie te zien. Denk daarom altijd aan de basisregels.

E-mailclients die media queries niet ondersteunen

  • Android Gmail app (12%)
  • Android Yahoo! mail app (5%)
  • Windows Phone 7/8 (n.b.)

Je moet er dus rekening mee houden dat ongeveer 20% van alle e-mails die worden geopend de desktopversie laten zien in plaats van de mobiele versie.

E-mailclients 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 design vraagt meer tijd en kennis van HTML/CSS, maar de resultaten mogen er zeker zijn. Je kan op de website van Copernica gratis responsive e-mailtemplates downloaden. Deze templates kan je vervolgens geheel naar wens aanpassen.

De keuze tussen fluid- en responsive design

Wat is de beste methode? Dit hangt allemaal af van je prioriteiten en budget.

Fluid e-maildesign is makkelijk te implementeren, maar is uiteindelijk minder aantrekkelijk op mobiele apparaten. De stap naar responsive design is redelijk groot, maar met de voorbeeldtemplates heb je al een goede basis.

Kijk naar de statistieken van je e-mail, op welke apparaten wordt mijn e-mail gelezen? Is het vooral op desktop? Dan is fluid e-maildesign op korte termijn de makkelijkste keuze.

We kunnen er echter niet onderuit dat steeds meer e-mail op smartphones wordt gelezen. Maak je klaar voor de toekomst en ga aan de slag met responsive design.

Welke design gebruik jij? En wat zijn je ervaringen daarmee?

 

Onze hulp nodig met e-mailmarketing?

Bekijk onze cursusLaat ons helpen!

Over de auteur:

Dit artikel is geschreven door .

Michael Linthorst
Michael Linthorst (1976) is internet ondernemer en ondermeer CEO van Copernica BV. Copernica is krachtige marketingsoftware voor e-mailmarketing, webpagina's, mobile en automatische campagnes. Meer dan 5.000 gebruikers vertrouwen dagelijks op de succesvolle werking van Copernica Marketing Software.
12 reacties op "Hoe optimaliseer je jouw e-mails voor smartphones?"
  • Lex zegt:
    30 Dec, 2014 om 19:28

    Hi Michael,

    Bedankt voor de tips! Wat ik wel opmerkelijk vind is dat de mail cq nieuwsbrief die word verstuurd in naam van Karel Geenen met de software van Copernica vol met verbeteringen zit wat vind jij? Vooral op een Iphone leest het niet lekker weg. Geen buttons maar hyperlinks in een zelfde huisstijl kleuren. Niet responsive en ook is er erg weing gebruik gemaakt van witruimte.

    Gr Lex

    Reageren
  • Michael Linthorst zegt:
    05 Jan, 2015 om 08:05

    Dag Lex,

    Ik kan het alleen maar met je eens zijn dat de nieuwsbrief van Karel Geenen inderdaad een opfrisbeurt mag krijgen. Gelukkig hebben ze nu genoeg tips om de nieuwsbrief responsive te maken ;-).

    Reageren
  • Lex zegt:
    05 Jan, 2015 om 09:04

    Dag Michael,

    Ik ben erg benieuwd wat het gaat worden! Succes;-)

    Reageren
    • Coen van den Brand zegt:
      07 Jan, 2015 om 21:40

      Dag Lex,

      Ga je op korte termijn achter komen. Staat op de planning om aan te pakken.

  • Lex zegt:
    08 Jan, 2015 om 21:53

    Hello Coen,

    Er gaat veel gebeuren bij KG dit jaar! Heerlijk krijg er steeds meer de drang om het blog te checken. Karel is ook echt een persoon die van aanpakken houd heb ik gemerkt. luisteren en implementeren daar gaat het om;-)

    Thnx

    Reageren
    • Coen van den Brand zegt:
      21 Jan, 2015 om 20:11

      Dag Lex,

      Ik ben benieuwd wat je van onze nieuwe e-mail nieuwsbrief vindt? Hij is aardig onder handen genomen :-)

      Gr. Coen

  • Lex zegt:
    21 Jan, 2015 om 20:44

    Hi Coen,

    Ik vind m echt rocken zo! De aanpassing zal de open rate zeker verhogen.
    Er blijven altijd wat details en heb mijn ideeën ook met Karel gedeeld vorige week. Top!

    Gr. Lex

    Reageren
    • Coen van den Brand zegt:
      21 Jan, 2015 om 20:54

      Goed om te horen Lex en bedankt voor je feedback!

  • Hennie zegt:
    16 Jul, 2015 om 20:43

    Had Karel ook een aantal tips gestuurd voor de nieuwe layout want deze is nog niet optimaal, maar misschien in de toekomst dat het beter wordt, vooral erg veel testen.

    Reageren
    • Coen van den Brand zegt:
      17 Jul, 2015 om 10:15

      Beste Hennie,

      Bedoel je nog de oude layout van begin dit jaar of zoals we de nieuwsbrief nu versturen? Vanaf mei gebruiken we alweer een andere lay-out namelijk.

      Staan altijd open voor feedback!

  • Hennie zegt:
    17 Jul, 2015 om 11:21

    Ik bedoelde de laatste versie die van mei.

    Reageren
  • Gustavo Woltmann zegt:
    05 Okt, 2016 om 14:25

    Leuke tips, ik wist helemaal niet dat je een groter lettertype moest gebruiken op een mobiele e-mail.

    Leuk dat jullie de eigen nieuwsbrief ook onder handen hebben genomen…

    Reageren

Reageren