Whitepaper
E-mail design best practices
14 tips voor het design van je e-mail Versterk de boodschap van je uiting Best practices voor je e-mail design
E-MAIL DESIGN BEST PRACTICES
Het design speelt een grote rol in de eerste indruk die ontvangers van je e-mail vormen. Zij beslissen binnen twee seconden of ze je mail verder lezen of deze wegklikken. Een goed design helpt je dus bij het overbrengen van je boodschap. Verbeter het doorklikpercentage in je e-mails door het toepassen van onderstaande tips.
2
E-MAIL DESIGN BEST PRACTICES
Houdt het design simpel E-mails moeten netjes en eenvoudig ontworpen worden. Complexe designs zijn goed voor een website, maar probeer je e-mail zo eenvoudig mogelijk te houden. Zorg bijvoorbeeld voor een algemene header (over de hele breedte) met daaronder één of enkele kolommen met content. Hoe eenvoudiger het design, des te schoner is de HTML. Hoe schoner de HTML, des te minder kans heb je op weergavefouten door verschillende browsers en e-mailclients.
Header
1 kolom met content
Header
2 kolommen met content
Header
3 kolommen met content
Maak je e-mail niet breder dan 600 pixels Hoewel beeldschermen steeds groter worden is de standaard bij e-mailmarketing nog steeds 600 pixels. Blijf onder de 600 pixels breed, zodat het grootste deel van je ontvangers niet horizontaal hoeft te scrollen om je e-mail
te kunnen lezen. De kans is groot dat je ontvangers de horizontale scrollblak over het hoofd zien. Ze zijn immers niet gewend zowel horizontaal als verticaal te scrollen.
Gebruik tabellen voor de opmaak van je e-mail E-mailclients zijn beperkt in het weergeven van HTML. Je kunt daarom het beste gebruik maken van tabellen. Als je gebruik maakt van table width, padding of CSS padding, is de uiteindelijke weergave van je e-mail anders in verschillende e-mailclients. Als je een tabel gebruikt, geef dan iedere cel een aparte breedte mee. Dat is de meest betrouwbare manier. Als je voor de hele tabel een breedte
opgeeft kunnen verschillende e-mailclients de tabel alsnog anders tonen. Ga er zeker niet vanuit dat de e-mailclients zelf kunnen bepalen hoe breed de tabel of de cel moet worden, want dat gaat niet lukken. Baseer de breedte van een cel door het aantal pixels per cel op te geven.
3
E-MAIL DESIGN BEST PRACTICES
Plaats tekst niet in een afbeelding In veel e-mailclients worden standaard de afbeeldingen pas getoond als de ontvanger het downloaden ervan handmatig activeert. Het overgrote deel van je ontvangers bekijkt je e-mail in eerste instantie dus zonder afbeeldingen. Staat jouw belangrijkste boodschap in een afbeelding, dan zullen je ontvangers deze boodschap in eerste instantie missen. Gebruik afbeeldingen alleen om je boodschap te versterken. Vaak worden knoppen gebruikt om de call-to-action te verduidelijken. Als je deze knoppen als afbeelding in je e-mail zet, is de belangrijkste tekst van je e-mail niet direct zichtbaar. Gebruik daarom tabellen in plaats van afbeeldingen voor deze knoppen. Bouw een tabel bijvoorbeeld zo op: Kleine afb. met afgeronde hoeken Linker-zijkant knop
Tekst CTA met achtergrondkleur
Als de afbeeldingen niet gedownload zijn, ziet de bovenstaande tabel er uit zoals de linker afbeelding hieronder. Als de afbeeldingen wel gedownload zijn, ziet dezelfde tabel er uit
zoals de rechter afbeelding hieronder. Doordat de zijkanten van de knop kleine afbeeldingen zijn kun je de hoeken netjes afronden. De tabel ziet er dan uit als een echte knop. Met deze tabel zijn de belangrijkste links van je e-mailcampagne altijd direct zichtbaar.
Kleine afb. met afgeronde hoeken Rechter-zijkant knop
4
E-MAIL DESIGN BEST PRACTICES
Zet belangrijke inhoud bovenaan Je ontvangers zien bij ontvangst vaak alleen maar het bovenste deel van je e-mail. De rest van je bericht valt buiten de zogenaamde Preview Pane. Ontvangers hebben weinig tijd voor je e-mails en willen dus direct weten of ze iets aan je e-mail hebben. Als ze eerst moeten scrollen voor ze je call-to-action vinden, haken veel ontvangers af. Soms is het niet duidelijk genoeg dat er een link in de tekst staat. Een link moet dan ook als zodanig herkenbaar zijn en in ieder geval onderstreept worden.
Gebruik normale lettertypes Als je een uniek of ongebruikelijk lettertype gebruikt moeten je ontvangers dat specifieke lettertype op hun computer geïnstalleerd hebben om deze ook daadwerkelijk in de e-mail te zien. Maak je e-mail dus op met oude standaardlettertypen zoals: Arial, Helvetica, Times, Georgia etc. Als je er toch voor kiest om een uniek lettertype te gebruiken, zorg dan
voor een back-up lettertype en test het bericht met beide lettertypes. Het ene lettertype kan net iets breder zijn dan het andere lettertype, waardoor bepaalde delen van de e-mail op kunnen schuiven. Als je niet met beide lettertypes test kan de e-mail er heel anders uitzien dan in je testberichten.
Gebruik niet te veel verschillende lettertypes Meerdere lettertypes gebruiken is een veelgemaakte fout om de aandacht op verschillende koppen te leggen. Een goede regel is om niet meer dan twee verschillende lettertypes te gebruiken. Maak gebruik van
verschillende kleuren of lettergroottes, om toch de aandacht te trekken. Stel voor jezelf een bepaalde structuur op en houdt je hier aan. Op de lange termijn draagt dit bij aan de herkenbaarheid van je merk.
5
E-MAIL DESIGN BEST PRACTICES
Gebruik alternatieve teksten Gebruik voor iedere afbeelding een alternatieve tekst. Deze tekst wordt weergegeven als de afbeeldingen niet worden getoond. Ontvangers kunnen op die manier toch beoordelen waar je e-mail over gaat, zonder de afbeeldingen te hoeven downloaden. Een goede alternatieve tekst kan voor de ontvanger een stimulans zijn om de e-mail te openen. E-mailmarketing software biedt vaak de mogelijkheid om eenvoudig een alternatieve tekst toe te voegen. Ben je gebonden aan werken met HTML, bouw de code dan als volgt op:
E-mail met afbeeldingen aan
E-mail met alternatieve text
E-mail zonder alternatieve text
Kies stock-foto’s bewust Een geschikte foto of afbeelding kan het verschil maken in je e-mail. Zorg dat je afbeeldingen gebruikt die je ontvangers niet vaker zijn tegengekomen. Vaak lukt het al om originele afbeeldingen te vinden als je net iets verder kijkt dan de eerste zoekopdracht. Zo
zorg je ervoor dat afbeeldingen altijd iets toe te voegen hebben aan de titel en de tekst. Bedenk welke handeling je wilt stimuleren bij ontvangers en zorg dat het hele bericht daarop is gericht.
Dubbelcheck op gebroken links Een open deur, maar daardoor niet minder belangrijk! Dubbelcheck alle links in je e-mail. Je wilt natuurlijk voorkomen dat er niks
gebeurt als jouw ontvangers op een link klikken. Al je moeite is voor niks geweest en de ontvanger heeft een negatieve ervaring.
Neem een link op naar de online versie Een link naar de online versie is niet alleen nuttig voor de ontvangers die onverhoopt je e-mail niet goed kunnen lezen, maar het is ook heel belangrijk voor de mensen die je
nieuwsbrief willen delen. De url van de online versie kunnen ze gebruiken om jouw nieuwsbrief te delen.
6
E-MAIL DESIGN BEST PRACTICES
Benut de preheader De preheader staat vaak bovenaan de e-mail en is de eerste regel van je -tag in je HTML code. Doordat de preheader de eerste tekst is, zullen e-mailclients als Gmail, Apple Mail en Outlook (een gedeelte van) deze tekst in de inbox of in een pop-up, bij de onderwerpregel tonen. Zorg ervoor dat de preheader, samen met de onderwerpregel, het openen van de e-mail stimuleert.
Goede preheader
Foute preheader
Bij teksten geldt: minder is meer Teksten worden steeds minder gelezen. Schrijf korte, eenvoudig te begrijpen teksten, waardoor je de kans vergroot dat ontvangers alsnog de moeite nemen om ze door te lezen. Wanneer je teksten de aandacht hebben getrokken en ontvangers bezig zijn met lezen,
is het belangrijk om snel de boodschap over te brengen. Je ontvangers haken namelijk af bij lange introductieteksten. Hoe minder zinnen je nodig hebt ontvangers te overtuigen om verder te klikken, hoe beter.
Optimaliseer voor de mobiele lezer Steeds meer e-mails worden op een mobiele telefoon geopend. Zorg er daarom voor dat jouw e-mail er ook op het kleine scherm van een mobiele telefoon goed uit ziet. Vaak kun je met enkele eenvoudige aanpassingen al zorgen voor een betere weergave, maar als je e-mail er echt goed uit moet zien op mobiele telefoons, pas dan responsive design toe. Dit is een techniek waarbij met name de CSS zo wordt aangepast dat de e-mail reageert op de breedte van het scherm waarmee deze wordt bekeken.
7
E-MAIL DESIGN BEST PRACTICES
Vraag ontvangers om je nieuwsbrief te delen Probeer je ontvangers te overtuigen om je nieuwsbrief te delen. Neem daarom social media-buttons op waarmee ontvangers je nieuwsbrief (of onderdelen daarvan) kunnen delen met hun netwerk. Als dit daadwerkelijk gebeurt stijgt het bereik flink, waardoor je zorgt voor meer kliks vanuit je nieuwsbrief naar je landingspagina’s.
Zet links achter afbeeldingen Wanneer je e-mails niet responsive zijn is het voor mobiele ontvangers soms lastig de goede link aan te tikken met hun vingers. Maak het ze makkelijk om naar de landingspagina te
gaan door ook links achter je afbeeldingen te zetten. Deze zijn ook op de mobiele telefoon makkelijk aan te tikken.
Maak de voordelen voor de ontvanger duidelijk Maak duidelijk welk voordeel je aan ontvangers biedt. Waarom zouden ze doorklikken? Ga er niet vanuit dat ontvangers zonder extra informatie zien welke links voor hen belangrijk zijn. Gebruik daarom geen links als ‘klik hier’,
want ontvangers moeten dan eerst de hele zin lezen voor ze weten waarom ze door moeten klikken. Gebruik woorden in je links die ontvangers iets vertellen over de onderliggende pagina.
8
E-MAIL DESIGN BEST PRACTICES
Test je e-mails in verschillende clients en browsers Niets is belangrijker dan testen. Fouten kunnen voorkomen worden door een goede testprocedure op te stellen. Goed testen doe je niet alleen. Stuur tests naar enkele collega’s. Zij kijken er met een frisse blik naar en zien weer nieuwe verbeterpunten. Test je e-mails
in verschillende browsers en e-mailclients door gebruik te maken van Litmus en/of EmailonAcid. Hier zie je in één overzicht jouw e-mail in alle combinaties van e-mailclients en browsers.
Doe iedere maand nieuwe inspiratie op! Wil je meer tips over e-mailmarketing ontvangen? Schrijf je dan in voor onze nieuwsbrief. Iedere maand komen we met nieuwe tips, trends en feiten op het gebied van e-mailmarketing.
Heb je vragen of andere tips? Mail ons op
[email protected] of neem contact op via 078 - 631 33 03.
Over Measuremail Measuremail is een e-mail service provider en biedt e-mailmarketing oplossingen voor professionals. Marketing- en communicatiemedewerkers gebruiken onze zelf ontwikkelde e-mailmarketing software en het verzendplatform om invulling aan hun e-mailmarketing strategie te geven. Ze stellen
e-mailcampagnes op voor gesegmenteerde groepen, verzenden deze via het verzendplatform en krijgen zeer gedetailleerde rapportages terug. Measuremail is een professionele partner die ondersteuning kan bieden bij het efficiënt inzetten van e-mailmarketing.
9
