Achttien 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 procent ook nog eens op een mobiele telefoon wordt geopend, kun je er niet meer omheen: iedere e-mail template moet responsive zijn. SalesForce Canada stuurde mij afgelopen week deze mooie infographic, inclusief achttien tips over het responsive maken van e-mail sjablonen.

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

Most popular e-mail clients

Zodra je in beeld hebt gebracht in welke e-mail programma’s en op welke (mobiele) apparaten 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’)

Regelmatig ontvangt onze e-mail helpdesk de vraag of er een maximale breedte is voor e-mail sjablonen. Vanuit het verleden is de adviesbreedte altijd 600px geweest. Door de toename van het aantal type mobiele apparaten 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

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 ‘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 e-mail 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 open rates. Bekijk dan ook voor meer tips en praktijkvoorbeelden van preheaders deze blogpost.

E-mails 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 procent hebben zien toenemen.

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.

*) Bron: Salesforce