Het ontwerpen van telefoon-vriendelijke e-mails

Met steeds meer mensen die beschikken over mobiele apparaten, is het belangrijker dan ooit om dit in je achterhoofd te houden met het ontwerpen van je e-mails. Onderstaand vind je tips die je kan gebruiken wanneer je je eigen templates maakt. Zo blijf je bij op de mobiele inbox trend die gaande is en houd je je contacten geïnteresseerd. 

Let op: Het is is niet mogelijk om een e-mail op te stellen die alleen geschikt is voor de mobiele- of desktopversie. In plaats daarvan creëer je één e-mail die anders wordt weergegeven in beide applicaties. 

E-mail contact leest berichten van links naar rechts 

HTML items stapelen zich altijd van links naar rechts. Dit betekent dat je content blokken zich zullen stapelen van links naar rechts. Als je een email creëert met een afbeelding aan de linkerkant en vervolgens een tekstblok aan de rechterkant van die afbeelding, dan zal de afbeelding boven de tekst worden weergegeven in de mobiele versie. Daarnaast is het altijd het beste om je ontwerp simpel en makkelijk te houden, met het kleinere beeldscherm in gedachte. 

Maak je e-mail wijdte niet groter dan 650 pixel

Dit is de wijdte die werkt voor de meeste email cliënten en mobiele apparaten. Als een e-mail wijder is dan 650 pixel, dan zal een horizontale scroll balk nodig zijn om je hele bericht te kunnen bekijken. Dit maak het niet alleen moeilijker om je bericht te lezen, maar zal je misschien ook een uitschrijving opleveren door een minder fijne ervaring. 

De wijdte van 400 tot 160 pixel voor een afbeelding werkt het beste

Een afbeelding van 400 pixel wijd is het minimum zodat het in de volledige breedte weergeeft op een mobiel apparaat. Om te zien hoe groot je afbeelding is, klik op de afbeelding in de ontwerpstudio en zie de afmetingen in het optie tabblad. 


mceclip2.png

Om de afmetingen te veranderen kun je de pixel aanpassen onder het opties tabblad, of je kan de originele afbeelding aanpassen en opnieuw uploaden. 

Onthoud wel, het is altijd beter om een grote afbeelding kleiner te maken, dan dat je een kleine afbeelding groter maakt. 

Gebruik ALT text 

ALT text is een geweldig hulpmiddel om te gebruiken omdat deze tekst zichtbaar zal zijn in het geval dat een contact geblokkeerde afbeeldingen heeft. Om de ALT text toe te voegen aan je afbeelding, klik je op de afbeelding in je campagne en voeg 1-2 woorden toe in het ''info'' veld onder het opties tabblad. 

mceclip3.png

 

Gebruik een afbeelding blok in plaats van het toevoegen van losse afbeeldingen in het tekstvak

Tekstvakken die een afbeelding bevatten met een link in lijn van die afbeelding zullen niet klikbaar zijn in Outlook 2007 of Outlook 2013. Bovendien loopt de tekst mogelijk niet goed om de afbeelding heen wanneer de mail via mobiele versie wordt geopend. 

mceclip6.png

Gebruik de tussenruimte widget om een witte ruimte te creëren rondom content en afbeeldingen 

Het gebruik van opvulling rondom een afbeelding of content blok om witte ruimte te creëren zal je content forceren om smaller te worden wanneer dit weergegeven wordt op sommige mobiele apparaten. In plaats daarvan gebruik je de tussenruimte widget in het invoeg menu (''drag & drop'') en stel je het in om dit te verbergen bij mobiele weergave als je dat wilt. 

mceclip1.png

Maak gebruik van de ''verberg op mobiele versie'' functie

Deze functie verbergt niet-essentiële elementen (rommel) wanneer jouw e-mail wordt weergegeven op een mobiel apparaat. Dit zal de beleving van je contacten verbeteren en er voor zorgen dat ze je berichten blijven openen. 

Om een item te verbergen op mobiele weergave kun je simpelweg op het betreffende blok klikken en vervolgens klik je op het tandwiel.

Klik op ''Verbergen op mobiele apparaten'': 

mceclip5.png

Wanneer je vervolgens met je muis op dat blok gaat staan, zal je dit zien: 

Schermafbeelding_2021-04-26_om_16.24.25.png

Experimenter met de preheadertekst 

Onderscheid jezelf van de rest van de e-mails in de inbox van je klanten en verleid ze om jouw email te openen. Leer meer over het toevoegen van een preheader tekst hier.

Test je email

Gebruik de desktop voorvertoning en verzend jezelf en je collega's een test email om te zien hoe je email er op verschillende telefoons uitziet. 

 

Was dit artikel nuttig?
Aantal gebruikers dat dit nuttig vond: 0 van 0