Steeds meer mensen beschikken over mobiele apparaten. Het is dan ook belangrijk om dit in je achterhoofd te houden met het ontwerpen van je e-mails. In dit helpartikel vind je tips die je kunt gebruiken bij het ontwerpen van je eigen e-mail templates, waarbij er rekening wordt gehouden met een goede weergave van de mails in een mobiele inbox.
Let op: je maakt binnen de MailBlue software één campagne of automatiseringsmail aan, die anders wordt weergeven in de mobiele of desktop inbox van je ontvangers (afhankelijk van op welk apparaat de ontvanger de mail opent). Het is dus niet mogelijk om één aparte mail op te stellen voor de mobiele weergave en één andere e-mail voor de desktop weergave.
E-mailberichten worden van links naar rechts uitgelezen
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 de breedte van de e-mail niet groter dan 650 pixel
Dit is de breedte die werkt voor de meeste e-mailcliënten en mobiele apparaten. Als een e-mailbericht breder is opgemaakt dan 650 pixel, dan zal er een horizontale scroll balk nodig zijn om je gehele bericht te kunnen bekijken. Dit maakt het niet alleen moeilijker voor je ontvangers om je bericht te lezen, maar zal je misschien ook een uitschrijving opleveren door een minder fijne leeservaring.
Maak altijd gebruik van de afbeelding blokken
Je wilt voorkomen dat je losse afbeeldingen in een tekstvlak plaatst, dus selecteer en sleep altijd afbeelding blokken in je campagne of automatiseringsmail. Tekstvakken die afbeeldingen met daarachter een link bevatten, zullen namelijk niet klikbaar zijn in Outlook 2007 of Outlook 2013. Bovendien loopt de tekst mogelijk niet goed om de afbeelding heen, wanneer de mail via een mobiele telefoon wordt geopend.
De breedte van 400 tot 160 pixel voor een afbeelding werkt het beste
Een afbeelding van 400 pixel breed is de minimale breedte van een afbeelding, om het in de volledige breedte te laten weergeven op een mobiel apparaat. Om te zien hoe groot je afbeelding is, klik je op de afbeelding in de ontwerpstudio en kun je de afmetingen zien aan de rechterkant zien bij 'Inhoud'.
Mocht je de afmetingen van de afbeeldingen willen wijzigen, scroll je aan de rechterkant bij 'Inhoud' een stukje naar beneden en pas je de 'Grootte' aan door op plus of min te klikken. Je kunt ook de originele afbeelding aanpassen en opnieuw uploaden. Onthoud daarbij dat het altijd beter is om een grotere afbeelding kleiner te maken in de software, dan dat je een kleine afbeelding groter maakt.
Gebruik ALT teksten bij je afbeeldingen
ALT teksten (ook wel ALT tags genoemd) worden weergeven als de titel van een afbeelding en geven een samenvatting van wat er te zien is op de afbeelding. Met name voor zoekmachines zijn deze ALT teksten belangrijke informatie, omdat een zoekmachine de afbeelding niet kan bekijken/uitlezen. Ook voor mensen met een visuele beperking is een ALT tekst handig.
Het is dus een geweldig hulpmiddel om te gebruiken binnen je MailBlue account. Op het moment dat een afbeelding wordt geblokkeerd en niet wordt weergeven, zal de ontvanger altijd nog de ALT tekst kunnen lezen. Om de ALT tekst toe te voegen aan je afbeelding, klik je op de afbeelding in je campagne of automatiseringsmail en voeg je 1 of 2 woorden toe bij het veld 'Alternatieve tekst' onder de opties van 'Inhoud'.
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:
- Klik op de 'Plaatshouder'.
- Sleep de 'Plaatshouder' naar de gewenste plek.
- Je ziet een lijn verschijnen.
- Wanneer je deze lijn weg wilt halen, klik je op de 'min'. De lijn zal verdwijnen.
- Wanneer je wilt dat dit verborgen wordt bij mobiele weergaven, scroll je naar beneden en selecteer je het telefoon icoontje.
Maak gebruik van de 'Element verbergen' 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. Om een item te verbergen op mobiele weergave kun je simpelweg op het betreffende blok klikken en vervolgens aan de rechterkant bij 'Inhoud' naar beneden scrollen. Je kunt er voor kiezen om het element te verbergen op desktop of mobiel.
Experimenteer met de preheader tekst
Onderscheid jezelf van de rest van de e-mails in de inbox van je klanten en verleid ze om jouw email te openen. Leer hier meer over het toevoegen van een preheader tekst.
Test je e-mail
Gebruik de desktop voorvertoning en verzend een test e-mail naar jezelf en je collega's om te zien hoe je e-mail er op verschillende telefoons uit komt te zien.