Home Blog Verbeter je mobile e-maildesign met deze 10 tips

Deel dit artikel

Verbeter je mobile e-maildesign

Verbeter je mobile e-maildesign met deze 10 tips

Geschreven door Femke van Zelst / 13 augustus 2019 / Content / Design

60% van de verzonden e-mails wordt tegenwoordig op mobiel geopend. Wanneer je je e-mails dus nog niet optimaliseert voor mobiel, dan is dit het moment om daarmee te gaan beginnen. In dit blog geven we je 10 eenvoudige tips om je mobile e-maildesign te verbeteren.

Mobile e-maildesign tip 1: Houd het simpel met een single kolom lay-out

De gemakkelijkste manier om een e-mail te maken die er op mobiel goed uitziet en goed presteert is door een ontwerp te maken met een enkele kolom lay-out met een responsive breedte en lettertype. Mocht je de voorkeur hebben voor een multi-kolom, dan zullen de kolommen zich op mobiel stapelen. Let goed op de positie van de content, zodat deze in de gewenste volgorde wordt weergegeven. Wanneer je in het voorbeeld-tab van de Clang e-maildesigner voor mobiel kiest, zie je in welke volgorde je content op mobiel wordt weergegeven.

<style> @media screen and (max-device-width:600px), screen and (max-width:600px) { .hide { display: none!important; width: 0px!important; height: 0px!important; } .show { display: block!important; width: 100%!important; max-height: inherit!important; overflow: visible!important; } } </style> </head> <body> <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="images/desktop-image.png" alt="" width="548" height="217" style="display: block;" class="hide"> <!--[if !mso]><!--> <div class="show" style="display: none; max-height: 0px; overflow: hidden;"> <img src="images/mobile-image.png" alt="" width="100%" style="display: block;"> </div> <!--<![endif]--></td> </tr></table> </body>

Mobile e-maildesign tip 2: Verberg en toon verschillend e-mailcomponenten

Met onderstaande code kun je desktop-elementen verbergen en mobiele elementen tonen. Zo kun je bijvoorbeeld voor mobiel geoptimaliseerde afbeeldingen met een betere beeldverhouding toevoegen of een call-to-action-knop alleen weergeven wanneer de ontvanger de e-mail opent op mobiel.

<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>

Vervolgens voeg je 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;} }

Mobile e-maildesign tip 3: Wijzig het formaat van lettertypes en afbeeldingen

Het vergroten of verkleinen van lettergroottes en afbeeldingen met behulp van mediaquery’s kan snel en gemakkelijk een betere gebruikerservaring op alle apparaten creëren. Met behulp van onderstaande techniek kun je het lettertype wijzigen op basis van de schermbreedte van het apparaat van de ontvanger.

Mobile e-maildesign tip 4: Kom ter zake!

Je hebt maar een klein schermformaat om je boodschap over te brengen en afleiding ligt op de loer. Zorg daarom voor korte en scherpe berichten en vermijd lange en warrige e-mails.

Mobile e-maildesign tip 5: Gebruik touchable buttons

Maak van je CTA’s buttons en zorg ervoor dat er voldoende ruimte op mobiel is. Maak ruimte rond alle links zodat mobiele ontvangers gemakkelijk door de e-mail kunnen scrollen zonder dat zij per ongeluk op een link klikken en mogelijk geïrriteerd raken omdat er een landingspagina wordt geopend. Extra tip: maak tekstlinks toegankelijk met speciale tekens (>) of benadruk ze door ze bold te maken of te onderstrepen.

Mobile e-maildesign tip 6: Gebruik voldoende contrast

Omdat mobiele gebruikers te maken hebben met een batterij die gedurende de dag leegloopt, zetten sommige gebruikers daarom de helderheid van het scherm niet op maximaal. Om de leesbaarheid zo goed mogelijk te houden, is het daarom belangrijk dat je een duidelijk contrast gebruikt. In tegenstelling tot desktopgebruikers, kunnen mobiele gebruikers je e-mail buiten in fel zonlicht openen. Een duidelijk contrast draagt dan zeker bij aan de leesbaarheid.

Mobile e-maildesign tip 7: Houd het licht

Mobiele gebruikers zijn niet altijd verbonden met wifi en zijn nooit verbonden met vast internet. Verbindingsproblemen, signaalsterkte en wifi-snelheid kunnen de laadtijd van een e-mail beïnvloeden. Houd de code van je e-mail daarom zo licht mogelijk en zorg ervoor dat afbeeldingen worden geoptimaliseerd om een zo klein mogelijke bestandsgrootte te hebben. Zo is de kans groter dat je e-mail wordt geladen én wordt weergegeven zoals jij had bedoeld. Extra tip: vergeet niet om alt-teksten toe te voegen, voor het geval dat afbeeldingen niet kunnen laden. En wanneer je een achtergrondafbeelding gebruikt, vergeet dan niet om een achtergrond kleur in te stellen die goed contrasteert met alle teksten.

Voorbeelden contrastratio's

Fig. 1: Voorbeelden contrastratio's

Mobile e-maildesign tip 8: Vergeet de landingspagina niet

Wanneer je een supermooie en mobielvriendelijke e-mail hebt maar geen voor mobiel geoptimaliseerde landingspagina dan sla je de plak natuurlijk volledig mis. Zorg daarom dat je voor je landingspagina dezelfde gebruikerservaring creëert als voor je e-mail.

Mobile e-maildesign tip 9: Oplossingen voor mobile-specific codes

iOS-apparaten kunnen je e-mail soms opnieuw formatteren en ervoor zorgen dat de afbeeldingsformaten en uitlijningen niet meer kloppen. Door onderstaande code bovenin de e-mail toe te voegen, voorkom je dit:

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

Wanneer je onderstaande code toevoegt aan je CSS, kan Apple geen links meer markeren en je opmaak 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 je 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; }

Mobile e-maildesign tip 10: Test je e-mail!

De tip die vrijwel altijd naar voren komt: TESTEN! Voer tests uit in verschillende e-mailclients en op meerdere mobiele apparaten (vergeet tablets niet) zodat je ervan verzekerd bent dat je e-mail er op elk device en in elke e-mailclient goed uitziet. Laat ook eens een collega's naar je e‑mail kijken. Met een frisse blik zien zij dingen die jij ondertussen niet meer ziet. Dit kan zowel visuele als tekstuele verbeterpunten opleveren.

Dit blog is geïnspireerd en vertaald op basis van een artikel van Email on Acid.

Scroll omhoog