Schurq

7 tips om jouw mobiele e-maildesign te optimaliseren

|
Leestijd minuten
Door Patrick Schokker

Wist je dat tegenwoordig maar liefst 60% van de verzonden e-mails op mobiel geopend wordt? Hou jij daar rekening mee als je een e-mail nieuwsbrief of campagne verstuurd? Wij delen 7 simpele tips om ervoor te zorgen dat jouw mobiele e-maildesign perfect is!

Tip #1: Zorg voor een simpel design 

Een mobiel e-maildesign functioneert het beste als de layout simpel is met een enkele kolom en een responsive breedte en lettertype. Als je kiest voor een multi-kolom, controleer dan goed of deze op mobiel goed verwerkt worden. Deze kunnen zich namelijk opstapelen. Speciale elementen en andere poespas kunnen ervoor zorgen dat de e-mail langzaam laadt. Voorkom dit met een simpel, maar strak e-maildesign. 

Hou er ook rekening mee dat zware afbeeldingen kunnen zorgen voor een langzame laadsnelheid. Dit kun je voorkomen door deze te verkleinen voordat je ze in de e-mail plaatst. 

Tip #2. Verberg sommige onderdelen uit het design voor mobiel

Sommige elementen komen op desktop heel mooi uit, maar op mobiel alles behalve. Het liefst zou je deze elementen willen verbergen of voor mobiel optimaliseren. Met een stukje code is het mogelijk om onder andere mobiel geoptimaliseerde afbeeldingen met een betere beeldverhouding toe te voegen. 

Code:

<style type="text/css"> @media screen and (max-device-width:640px), screen and (max-width:640px) { .mobfont { font-size: 2vw!important; line-height: 3vw!important; } } </style>

Voeg vervolgens een class="mobfont" toe aan alle teksten waarvan je het formaat wilt wijzigen:

@media screen and (max-device-width:640px), screen and (max-width:640px) { .mobimage {width: 100%!important;min-width: 100%!important;max-width: 1000px!important;height: auto!important;} }

Tip #3. Houd de boodschap kort, maar krachtig

Als men jouw e-mail op mobiel opent, dus op een klein schermformaat, is het niet fijn om lappen tekst te lezen. Tevens is er op mobiel veel afleiding. Je wilt dus snel en kort de aandacht van de lezer. Hou daarom jouw boodschap kort, maar krachtig. Vermijd lange en warrige e-mails waardoor de lezers afhaken. Zorg ook voor een juist lettertype grootte, zodat men niet hoeft in te zoomen. 

Het mobiele e-maildesign van Apple hieronder, heeft een simpel maar strak design. De boodschap is kort, maar de strekking is duidelijk. Tevens zitten er duidelijke call to actions in.

Voorbeeld Apple mobiele e-maildesign Voorbeeld Apple mobiele e-maildesign

Tip #4. Gebruik duidelijke call to actions 

Zorg voor duidelijke call to actions. Geef deze buttons of links genoeg witruimte, zodat lezers duidelijk zien waar zij op kunnen klikken. Tekstlinks kun je meer laten opvallen door speciale tekens (>) te gebruiken, vetgedrukt te maken en te onderstrepen. Zie bovenstaande voorbeeld van Apple.

Tip #5. Vergeet de landingspagina niet 

Je kunt een zeer mobielvriendelijke e-mail en mooi design hebben, maar als de call to actions leiden naar een landingspagina die niet geoptimaliseerd is heb je alsnog niks bereikt. Het is belangrijk dat de landingspagina dezelfde gebruiksvriendelijke ervaring biedt als jouw e-mail. Dit houdt in een simpel, maar strak, aantrekkelijk en responsive design met voldoende tekst en duidelijke call to actions. 

Voorbeeld responsive landingspagina

Tip #6. Zorg voor een mooi design op diverse devices

Als je al vaker e-mail nieuwsbrieven hebt verstuurd, herken je dit probleem vast. Op jouw iPhone ziet de e-mail er perfect uit, maar op de Samsung van je collega ziet het er heel anders uit. Door een code aan de e-mail toe te voegen, zorg je ervoor dat apparaten de e-mail niet opnieuw formatteren. 

Gebruik onderstaande code bovenin je mail:

<meta name="x-apple-disable-message-reformatting" />

Door onderstaande code toe te voegen aan je CSS, kan Apple geen links meer markeren en je opmaak niet wijzigen:

a[x-apple-data-detectors] { color: inherit!important; text-decoration: none!important; font-size: inherit!important; font-family: inherit!important; font-weight: inherit!important; line-height: inherit!important; }

Samsung-apparaten onderstrepen links en vervangen deze in de kleur blauw. Wanneer je dit stukje CSS invoegt, worden de links niet meer gewijzigd.

#MessageViewBody a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }

perfecte mobiele e-maildesign

Tip #7. Test, test, test 

Check, check, dubbelcheck altijd jouw e-mail voordat je deze verstuurd naar een e-maillijst. Test hoe de e-mail aankomt in jouw inbox zowel op desktop als mobiel. Test ook op meerdere mobiele apparaten (vergeet de tablet niet) en merken. Zo zorg je ervoor dat jouw e-mail er op elk device perfect uitziet. 

Hulp nodig bij het creëren van het perfecte mobiele e-maildesign?

Neem contact op met onze specialisten!

Deel dit artikel via
Patrick Schokker
Patrick Schokker

Over deze schurq

Algemeen Directeur

Lees ook
|
Lysanne Paulus
|
2 minuten

Google Consent Mode V2

|
Guido Sombroek
|
4 minuten

Server Side Tagging simpel uitgelegd

|
Guido Sombroek
|
5 minuten

Dé SEO handleiding om jouw organische vindbaarheid te verbeteren