Hoe optimaliseer je jouw e-mails voor smartphones?

Karel
10/12/2014
Email marketing
X
min leestijd
Karel
10/12/2014
Email marketing
X
min leestijd

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?

Schrijf je in voor onze nieuwsbrief

Je bent succesvol ingeschreven voor onze nieuwsbrief!
Er is iets fout gegaan bij het verzenden van het formulier

Wil je meer gratis tips over online marketing?

Bekijk onze gratis downloads

Categorieën

Ontdek hoe wij jouw bedrijf verder kunnen helpen

We hebben je aanvraag succesvol ontvangen, we nemen zo snel mogelijk contact met je op
Er is iets fout gegaan bij het verzenden van het formulier