-

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.

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 ook. Het is echt een illusie om te denken dat jouw (responsive) e-mail sjabloon in zowel Gmail als Outlook er hetzelfde uitziet. Er zijn vandaag de dag zo ontzettend veel e-mail programma’s en apparaten waarop e-mails 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 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 email clients

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’)
SIZE DOES MATTER

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

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

Make room for alt text

Nog enkele tips voor het optimaliseren van de responsive template

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

Houd de mail kort en zoet

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.

Optimaliseer de CTA-buttons

Zorg er vervolgens voor dat de ontvanger gemakkelijk op de CTA kan klikken. Helemaal in een mobiele responsive e-mail 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-mail marketing 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.

*) Bron: Salesforce

Deel dit bericht

1 Reactie

bert

Begin eens met adviseren om geen extern gehoste troep mee te sturen. 98% van de marketingemails is tegenwoordig leeg als je het laden van externe content uitzet (en dat wil je met al die geniepige afbeelding-tracking)

Plaats een reactie

Uw e-mailadres wordt niet op de site getoond