[nieuwe designer] Het ontwerpen van telefoon-vriendelijke e-mails

Steeds meer mensen beschikken over mobiele apparaten, het is dus belangrijk 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 in de nieuwe designer. Zo blijf je bij op de mobiele trend die gaande is en houd je je contacten geïnteresseerd.

LET OP: het 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 contacten lezen berichten van links naar rechts

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

 

Maak je e-mail wijdte niet groter dan 650 pixels

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

 

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

Een afbeelding van 400 pixels wijd is het minimum zodat de afbeelding in de volledige breedte wordt weergegeven op een mobiel apparaat. Om te zien hoe groot je afbeelding is, klik op de afbeelding in de ontwerpstudio en zie de pixels rechts verschijnen. 

Nieuwe_designer_.png

Mocht je de afmetingen van de afbeeldingen willen wijzigen, scroll je een stukje naar beneden en pas je de 'Grootte' aan door op plus of min te klikken. Ook kan je de originele afbeelding aanpassen en opnieuw uploaden. 

Onthoud, 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 fijn 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 worden toe in het veld 'Alternatieve tekst'. Deze vind je als je een stukje naar beneden scrolt in het het rechter menu. 

Alternatieve_text.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 de mobiele weergave wordt geopend. 

 

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

Het gebruik van opvulling rondom een afbeelding of content blok om meer ruimte te creëren zal je content forceren om smaller te worden wanneer dit weergegeven wordt op mobiele apparaten. In plaats daarvan gebruik je de plaatshouder widget in het menu rechts en stel je het in om dit te verbergen bij de mobiele weergave wanneer dat gewenst is. De plaatshouder kan je zien als een soort tussenruimte widget en pagina-einde in één. 

Dit doe je als volgt:

  1. Klik op de plaatshouder 
  2. Sleep de plaatshouder naar de gewenste plek
  3. Je ziet een lijn verschijnen
  4. Wanneer je deze lijn weg wilt halen, klik je op de 'min'. De lijn zal verdwijnen. 
  5. Wanneer je wilt dat dit verborgen wordt bij mobiele weergaven, scroll je naar beneden en selecteer je het telefoon icoontje.

Plaatshouder.png

 

Maak gebruik van de 'verberg op mobiele versie' functie

Deze functie verbergt niet-essentiële elementen 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. 

Wanneer je wilt dat elementen verborgen worden bij mobiele weergaven, scroll je naar beneden en selecteer je bij 'element verberg' het telefoon icoontje. 

Je ziet rechts van het element een grijs vlakje verschijnen. 

 

Experimenteer met de preheadertekst

Onderscheid jezelf van de rest van de e-mails in de inbox van je klanten en verleid ze om jouw e-mail te openen. 

 

Test je e-mail

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

 

 

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