Mobiele e-mails ontwerpen, enkele praktische tips

Waarom een mobiele e-mail?

Buiten het feit dat je frustraties wegneemt bij je lezer, heeft een mobiele e-mail ook een positieve invloed op de prestaties van je campagne. E-mailmarketingdienst MailChimp onderzocht mobiele versuz desktop e-mails en kwam tot deze conclusies: 

• Lezers klikken mobiel minder op een e-mail.
• Mobiel wordt er minder op links geklikt dan op desktop. Zorg dus dat je e-mail voldoende aantrekkelijk is voor je doelgroep.
• Hoe dieper de links liggen hoe minder er op geklikt wordt. Beperk dus het aantal links.
• Responsive design zorgt voor meer engagement. Maar enkel voor de eerste 3 tot 5 links.

Ga je voor een mobielvriendelijk of responsive design?

Je kunt je e-mail voor mobiele apparaten mobielvriendelijk of responsive maken. Wat je kiest hangt af van je budget en prioriteiten. Wat is het verschil?

• Een mobielvriendelijke e-mail
  Een mobielvriendelijke e-mail is zo ontworpen dat het design zowel voor desktop als mobiele apparaten werkt. Je doet een minimum aan aanpassingen die toch een goed resultaat opleveren.
• Een responsive e-mail
  Een responsive e-mail past zich, zoals een responsive site aan aan de schermgrootte van het toestel waarop het bekeken wordt. Hiervoor worden queries in de code toegevoegd zodat de e-mail zich schaalt voor de verschillende schermgroottes. Verder kunnen elementen verborgen of getoond worden, afhankelijk van het e-mailplatform waar het getoond wordt.

Opgelet, er is enige HTML-kennis voor nodig en niet alle e-mailclients ondersteunen media queries.

Eén oog, één armlengte, één duim

Er is een manier om je e-mail te testen. Zo moet de content op het kleine scherm comfortabel zichtbaar en leesbaar zijn met één oog, wanneer je je toestel op een armlengte vasthoudt. Verder moeten de call to actions aangeklikt kunnen worden met één duim. Hou rekening met de manier waarop de gebruiker een smartphone of tablet gebruikt en pas je design hier aan aan.

Opmerking: In MailChimp kun je previews bekijken van je e-maildesign op mobiel en zo de content aanpassen.

7 eenvoudige tips voor het design van mobiele e-mails:

1. Hou je onderwerpregel kort

Voor e-mails hou je sowieso de onderwerpregel kort en to the point. Voor een mobiele weergave is dit nog belangrijker. In de preview van je e-mail wordt deze namelijk nog meer ingekort dan voor desktop. Richt je op 35 tot 40 tekens.

2. Maak je lettertype groter

Een eenvoudige aanpassing is het je lettergroottes vergroten. Zo zal de e-mail zowel op desktop als op de smartphone leesbaar zijn. Je voorkomt dat je lezers moeten “pinchen” om in te zoomen. Zorg dat de tekst minimaal 13 pixels is.

3. Hou het simpel en overzichtelijk

Less is more, ook in e-mail. Beperk je tot ongeveer drie topics. Met krachtige copy kun je in enkele zinnen (3 à 4) de lezer verleiden om verder te klikken naar je website. De tekst moet ook  passen in het scherm van een smartphone. Voorkom dat je lezers naar rechts moeten scrollen of dat belangrijke inhoud wegvalt.

4. Gebruik één kolom 

Plaats je content in één kolom. Zo heb je meer ruimte voor de inhoud en kan de e-mail bij het scrollen in één beweging gelezen worden.

5. Hou rekening met dikke vingers

Je lezers staan met de wijsvinger of duim in aanslag om te klikken. Zorg dus dat de linken en/of buttons (45 pixels) groot genoeg zijn. Kies bij twijfel eerder voor een button dan een link. Wil je toch een link gebruiken, zorg dan dat er geen andere linken in de directe omgeving staan. Zo klikt men meteen op de juiste link.

6. Hou de mobiele gewoontes in het achterhoofd

Hou rekening met hoe mensen hun mobiel toestel gebruiken. Voor een smartphone ga je in principe anders ontwerpen dan voor een tablet. Zo houdt men een tablet meestal vast met twee handen tegenover een smartphone die in één hand gehouden wordt. Hoe kom je zowel links- als rechtshandigen tegemoet? Een oplossing hiervoor is een button over de volledige breedte. Iets om over na te denken.

7. Een naadloze overgang

Niets is zo frustrerend om via een e-mail terecht te komen op een site of landingspagina die niet responsive is. Zorg dus dat deze ook onder handen genomen wordt, moest dit nog niet gebeurd zijn.

Pas je e-maildesign aan voor het kleine scherm en de aandachtspanne van je mobiele lezer. Zelfs met een mobielvriendelijke e-mail kom je al een heel eind. Hou onze tips hierbij in het achterhoofd.