18 tips voor de ideale responsive e-mail template

Zevenennegentig procent van alle e-mails wordt slechts eenmaal geopend. Dat betekent dus dat je maar één kans hebt om indruk te maken. En aangezien van al deze e-mails gemiddeld 60% ook nog eens op een mobiele telefoon wordt geopend kun je er niet meer omheen: iedere e-mail template moet responsive zijn. Nu hebben we op het e-Village weblog al veel over responsive e-mail templates geschreven. Maar SalesForce Canada stuurde mij afgelopen week deze mooie infographic, inclusief 18 tips over het responsive maken van e-mail templates, en die moet ik gewoon met jullie delen.

Door de e-mail clients en devices het bos niet meer zien

E-mail design expert Jason Rodriguez van het Amerikaanse Litmus vertelde het recent nog tijdens de e-Village klant inspiratiesessies en de infographic van SalesForce bevestigt het nogmaals. Het is echt een illusie om te denken dat jouw (responsive) e-mail template in zowel Gmail als Outlook er hetzelfde uitziet. Er zijn vandaag de dag zo ontzettend veel e-mail clients en devices waarop emails worden gelezen. En allemaal hebben ze hun eigen wensen en eisen waar een template aan moet voldoen om optimaal te worden weergegeven.


Verspil dan ook ook niet je tijd aan het creëren van een responsive e-mail template dat in iedere e-mail client op dezelfde wijze worden getoond, maar verleg je focus naar jouw doelgroep. Onderzoek op welk type devices en bij welke e-mail clients het merendeel van jouw ontvangers zit en design aan de hand van deze informatie de ideale (responsive) email template.

Most popular email clients

Selecteer een responsive email template codering

Zodra je in beeld hebt gebracht in welke e-mail clients en op welke (mobiele) devices jouw nieuwsbrief wordt geopend is de tijd aangebroken om te starten met het bouwen van de responsive template. Een responsive e-mail template zorgt dat de lay-out van de nieuwsbrief zich aanpast aan de beschikbare ruimte op een scherm. Dit betekent dat een e-mail ook netjes kan worden weergegeven op kleinere schermen zoals die van een mobiele telefoon. De fundering van deze responsive e-mail templates wordt mogelijk gemaakt door coderingen als:
  • 'mobile-aware', een relatief simpele code die ervoor zorgt dat de desktop-versie van de template wordt geminimaliseerd naar de mobiele formaten.
  • 'fluid design', een code die is gebaseerd op percentages.

Deze 'mobile' en 'fluid' coderingen zijn inmiddels verder geoptimaliseerd waardoor nu onderstaande drie stijlen het meest worden toegepast in e-mail responsive designs:

  • Fluid tables (vergelijkbaar met fluid layouts)
  • Fluid images (deze zorgt ervoor dat ook afbeeldingen automatisch worden ingezoomd)
  • Media queries (deze zorgt voor de meest 'ultimate control')

Size does matter

Regelmatig ontvangt onze email helpdesk de vraag of er een maximale breedte is voor e-mail templates. Vanuit het verleden is de adviesbreedte altijd 600px geweest. Door de toename van het aantal type mobiele devices en wearables is het verschil in breedtes waarop e-mails worden gelezen nu alleen extreem toegenomen.

Screen size by device

Bij e-Village adviseren wij om ondanks alle verschillende varianten gewoon 600px als breedte aan te houden. Wil je weten waarom? Lees dan nog eens deze interessante blogpost terug waarin Daniel Mul dieper op deze materie, fluid design en media queries ingaat.

Hacks en codes om afbeeldingen 'responsive-proof' te maken

De blogpost en infographic van SalesForce geeft ook een aantal interessante tips om afbeeldingen geschikt te maken voor een responsive e-mail template. Er bestaan namelijk ook een paar eenvoudige hacks en codes die ervoor zorgen dat afbeeldingen zich aan de breedte van het scherm aanpassen. Zo kun je met de meeste grafische programma's de bestandsgrootte van de afbeelding aanpassen.


Photoshop heeft bijvoorbeeld zelfs een 'Opslaan voor web' optie. En om het beeldformaat nog kleiner te maken, kun je ze met behulp van programma's als ImageOptim , TinyPNG of JPEGmini omzetten. Door het toevoegen van "width: 100%;" aan een img tag kun je er vervolgens voor zorgen dat de afbeelding altijd geschikt is voor de schermformaten waarop je nieuwsbrief wordt geopend en niet opeens wordt opgeblazen.

From popping out horizontally

Alt-tekst toevoegen aan de afbeelding

Een andere belangrijke tip die in het artikel van SalesForce wordt genoemd is dat je altijd een alt-tekst aan de afbeelding in je nieuwsbrief moet meegeven. Veel mobiele ontvangers kiezen ervoor om afbeeldingen niet automatisch te laden. Om deze dan toch 'visueel' zichtbaar te maken moet je altijd een alt-tekst toevoegen waarmee je de afbeelding omschrijft.

Make room for alt text

Nog enkele tips voor het optimaliseren van de responsive template.

1) Gebruik preheaders

De preheader of snippet is het eerste stukje tekst (binnen de) van de e-mail en staat vaak boven de header van de e-mail. De preheader tekst wordt getoond in de zogenaamde 'preview pane' (pop-up wanneer je e-mail ontvangt) van Outlook en wordt achter de onderwerpregel in onder andere Gmail getoond. Nog steeds wordt veelal de zin: "Wordt deze email niet goed weergegeven? Klik hier voor de online versie." In de preheader gebruikt. Maar deze nietszeggende zin kan een ontzettende negatieve invloed hebben op je openrates. Bekijk dan ook voor meer tips en praktijkvoorbeelden van preheaders deze blogpost.

2) Houd de email kort en zoet

Emails die korte en gerichte teksten gebruiken behalen een vele malen hogere click rate. Zorg er dan ook altijd voor dat de belangrijkste call to action (CTA) de meeste aandacht krijgt en prominent – zelfs als eerste – wordt getoond. Zelfs als dit betekent dat het bedrijfslogo ervoor moet wijken. Er zijn organisaties die door dit soort simpele wijzigingen hun conversie met 146% hebben zien toenemen.

3) Optimaliseer de CTA-buttons

Zorg er vervolgens voor dat de ontvanger gemakkelijk op de CTA kan klikken. Helemaal in een mobiele responsive email template. Er is niets erger dan een ontvanger die niet de mogelijkheid heeft om op een link klikken of dat ze klikken op de verkeerde CTA. Zorg er daarom voor dat CTA-buttons altijd ten minste 44 x 44 pixels zijn.

Alle e-mailmarketing tips en tricks in een overzicht

De lijst met tips en tricks van de SalesForce blogpost is nog vele malen langer, ik wilde enkel de belangrijkste benoemen. Ben je benieuwd naar het hele verhaal? Bekijk deze dan hier.

Maar voor alle overige tips en tricks over email, responsive templates, databases en ga zo nog maar even door, kun je natuurlijk het beste terecht op onze eigen e-Village weblog. Of neem deel aan de discussie in onze LinkedIn-group "E-mailmarketing Nederland".

Bronnen: http://blogs.salesforce.com/ca/2015/01/mobile-friendly-email.html

  • Design


Ja, natuurlijk wil ik dit artikel delen:




Reageer op dit artikel


Best bekeken blogs


Vraag aan e-Village?

Wist je dat...

Wist je dat...

...e-Village een deliverability ratio (afleverpercentage) heeft van 99,72%?

Meer weetjes? Schrijf je in voor de nieuwsbrief en blijf altijd op de hoogte