.svg)
Een aantrekkelijke en goed leesbare e-mail is een visitekaartje voor je merk. Daarom verdienen je e-mails een fris, eigentijds en professioneel uiterlijk. En hoewel een e-mail ogenschijnlijk simpel oogt, komt er bij het design nog best wat kijken. Ook gaan er vaak nog veel dingen mis. Wil je weten hoe je het design van je e-mails naar een hoger niveau tilt? We geven je 10 essentiële tips.
Een e-mail template bestaat uit een aantal onderdelen. Hoewel het kan verschillen, volgen de meeste e-mails grofweg de onderstaande lay-out principes.
Hoewel het geen echt ‘design element’ is, is de subjectline (onderwerpregel) wel één van de belangrijkste onderdelen die er voor gaat zorgen dat je e-mails überhaupt worden geopend. Je kunt wel een mooi design maken, maar als klanten je e-mails niet openen dan krijgen ze het niet eens te zien.
Een sterke subjectline bepaalt of de e-mail interessant en relevant is voor de ontvanger. Voor sommige e-mails werkt een teasende subjectline beter, terwijl je bij een ander type e-mail (zoals servicemails) juist zo duidelijk mogelijk wil zijn in je subjectline. Onthoud in ieder geval dat overmatig gebruik van hoofdletters, onnodige interpunctie en sommige woorden spamfilters kunnen activeren.
Preheader
Vergeet ook de preheader niet. Deze kan waardevolle context toevoegen aan de subjectline en ervoor zorgen dat je e-mails vaker geopend worden. Houd deze kort en to-the-point. Gebruik deze ruimte om de ontvanger te laten weten waarom de e-mail nuttig voor hem is.
Het is belangrijk om meteen de juiste toon te zetten in een e-mail. Daarom is de header ontzettend belangrijk, want dit is het eerste wat mensen zien. Met een mooie headerafbeelding met pakkende titel trek je de ontvanger de e-mail in. Houd het wel simpel: de boodschap van de e-mail moet in één oogopslag duidelijk zijn.
Variëren
Om te variëren kun je spelen met de hoogte van de header afbeeldingen om de ontvanger te verrassen. Maar zorg er wel voor dat je consistent blijft in je stijl. In de header kun je eventueel een navigatie balk (menu) zetten, zodat je de lezer direct naar een actie of product op een landingpage kunt leiden. En voor de herkenbaarheid is het een goed idee om in de header je logo te plaatsen.
Ontvangers willen graag een consistente merkervaring, dit zorgt voor herkenbaarheid. Dit doe je door je huisstijlkenmerken door te voeren in je e-mails. Stel bijvoorbeeld de kaders, lettertypen, kopteksten en subkoppen af op de kleuren van je bedrijfslogo. Zo geef je je ontvangers een consistente merkervaring, waardoor ze herkennen van wie de mail afkomstig is. Dit schept vertrouwen bij je ontvangers. Omdat ze de afzender herkennen, weten ze dat het veilig is om je e-mails te openen.
Om de ontvanger zo lang mogelijk te interesseren is gemak het sleutelwoord: is je content gemakkelijk te lezen? Dit leesgemak bereik je met lettertypes die niet overdreven fancy zijn. Ook meerdere lettertypes door elkaar gebruiken zorgt voor een slechte leeservaring. Gebruik daarom altijd een eenvoudig lettertype. Dit geeft een nette uitstraling en leidt de aandacht niet af van waar het om gaat: de inhoud.
Veilige webfonts
Let er ook op dat je niet elke lettertype probleemloos kunt gebruiken. In de verschillende e-mailclients worden sommige lettertypes niet weergegeven en zullen in plaats daarvan een fallback tonen. Het beste is daarom om maximaal twee webfonts te gebruiken die bij alle ontvangers beschikbaar zijn in hun e-mailclient. Zo houd je zelf de controle over hoe de e-mail eruit gaat zien op hun toestel.
Dit zijn de veilige webfonts:
Een effectieve e-mail lay-out stuurt de kijkrichting van de ontvanger. Door de lezer visueel naar de CTA te leiden (zie afbeelding hieronder), wordt hij aangemoedigd om door te klikken wat resulteert in een grotere merkbekendheid, meer traffic en uiteindelijk meer sales.
Logische opbouw
Ontvangers vinden het ook prettig als ze een e-mail snel kunnen scannen. Dit doe je door te zorgen voor een logische hiërarchie in kopteksten, afbeeldingen en buttons. Maak bijvoorbeeld de subtitels kleiner dan de hoofdkop, maar groter dan de bodytekst. Een goede compositie kun je bereiken door het geheel op te splitsen in verschillende blokken met elk een verschillend aantal kolommen, en een eigen onderverdeling binnen in de blokken.
Krijgen de verschillende elementen van je e-mail wel genoeg lucht? Door te zorgen dat er voldoende witruimte is tussen de elementen (alinea’s, afbeeldingen, buttons) worden ze visueel gescheiden. Dit vergroot de leesbaarheid van de e-mail, en zorgt ervoor dat je ogen de inhoud beter kunnen volgen.
Tekstuitlijning
En denk ook eens aan de ruimte die je tekst inneemt; de tekstuitlijning. Dit gaat niet alleen om links of recht uitlijnen of centreren, maar ook over de afstand tussen de regels (interlinie), lettergrootte en kolombreedte. Het beste houd je de interlinie ruim en de lettergrootte goed leesbaar. Meestal is het links uitlijnen van je tekst ook het mooiste. Alleen bij korte artikelen kun je soms een gecentreerde tekst gebruiken.
Met een call-to-action wil je ontvangers bewegen om een actie te gaan ondernemen, zoals het aankopen van een product of dienst. Om zoveel mogelijk aan te sturen op deze conversie kun je gebruik maken van drie principes bij het designen van een CTA-button:
1. Activerende tekst
De tekst moet zoveel mogelijk aansporen tot actie. Maak dus gebruik van een actief werkwoord en plaats deze aan het begin van je tekst. Denk aan: ‘Ga aan de slag’, ‘Probeer 1 maand gratis’ of de klassieker ‘Koop nu’. Probeer daarnaast ook origineel te zijn, om de ontvanger te verrassen. Let er wel op dat de tekst specifiek en kort genoeg blijft. Zo weet de ontvanger in één oogopslag wat hij kan verwachten wanneer hij op de CTA klikt.
2. Opvallend design
Je wil visueel je CTA zoveel mogelijk laten opvallen. Dit kun je bijvoorbeeld doen door voor voldoende witruimte te zorgen rondom de button. Daarnaast moet je de button groot genoeg maken zodat ontvangers ook op mobiel er gemakkelijk op kunnen tikken.
3. Prominente plaatsing
De CTA moet één van de eerste dingen zijn die je ziet als je de e-mail opent. Plaats de CTA met de belangrijkste boodschap daarom bovenaan in het headerbeeld of onder het intro blok. Nog een tip: gebruik niet teveel buttons in één e-mail, dat maakt de mail rommelig en onoverzichtelijk. Maak dan liever gebruik van tekstlinks.
Afbeeldingen kunnen je e-maildesign maken of breken. Een goede balans vinden tussen tekst en relevante afbeeldingen is dan ook ontzettend belangrijk. Zorg daarom allereerst dat de afbeeldingen een aanvulling zijn voor de tekst en dat ze er niet alleen staan omdat ze er mooi uitzien. De juiste foto of illustratie zorgt voor een interessante look-and-feel en nodigt uit tot lezen.
Plaatsing
Hoe je de afbeeldingen in de e-mail plaatst is erg belangrijk. Door te spelen met de plaatsing van je afbeeldingen kun je niet alleen ruimte creëren tussen de tekstblokken, maar kun je de e-mail er ook speelser uit laten zien. Plaats een afbeelding bijvoorbeeld eens rechts van de tekst in plaats van links.
Kleurgebruik
Let bij het uitzoeken van de visuals ook op kleur. Voor de balans van de e-mail is het belangrijk dat de kleuren in de afbeeldingen bij elkaar passen. Heb je de mogelijkheid om zelf foto’s voor een e-mailcampagne te maken? Ideaal. En anders kun je betaalde stock afbeeldingen gebruiken van bijvoorbeeld Adobe Stock, iStock of Shutterstock. Liever gratis? Je kunt ook een kijkje nemen op gratis stock websites zoals Unsplash, Pexels of Stocksnap
Aangezien de meeste e-mails op een smartphone gelezen worden, is het belangrijk dat je e-mail daar in ieder geval mooi op weergegeven wordt. De mobiele lezer heeft vaak weinig tijd en leest de mail even snel tussendoor. Houd de boodschap dus kort en krachtig.
Uitpakken op mobiel
Daarnaast kun je het relatief kleine scherm van een telefoon als een voordeel gebruiken. Plaats bijvoorbeeld eens een hoog, spetterend en schermvullend headerbeeld in je e-mail om je boodschap extra onder de aandacht te brengen. Deze afbeelding lijkt dan op de desktop nogal fors, maar ziet er op mobiel spectaculair uit.
Let er wel op dat op mobiel alles onder elkaar komt te staan. Zorg dus dat volgorde van de tekst en de afbeeldingen klopt én dat de e-mail niet te lang wordt. Daarnaast zullen alle afbeeldingen op mobiel geschaald worden, dus gebruik afbeeldingen van goede kwaliteit en zorg dat ze hoog genoeg zijn.
Het is een leuke manier om je e-mails dynamischer en levendiger te maken: geanimeerde gifjes. Dit zijn eigenlijk korte filmpjes van een aantal achter elkaar geplaatste afbeeldingen of videoframes. Er zit wel één nadeel aan het gebruik van gifjes: de bestandgrootte wordt als snel te zwaar, waardoor je e-mail langzamer wordt weergegeven in de client van je ontvanger. Er zijn een paar dingen die je kunt doen om dit te voorkomen:
1. Animeer alleen de lagen die geanimeerd moeten worden
2. Maak het formaat van de afbeelding op 100%
3. Beperk het aantal frames, houd het kort
4. Gebruik weinig kleuren
Wil je écht next level e-maildesign? Tegenwoordig kun je je e-mails interactiever maken met kinetische effecten zoals een carrousel, video, hover animatie, tabs, accordeon of een uitklapmenu. Behalve dat het er mooi en professioneel uitziet, wordt je lezer écht de e-mail ingetrokken. Ook mooi meegenomen: de interactieve elementen zorgen voor meer engagement en dus een groter klikratio.
Wil je ook scoren met e-maildesign?
De technieken voor kinetic design zijn helaas nog vooral weggelegd voor experts. Wil je meer weten over kinetic design of ook e-maildesigns die scoren? Neem contact met ons op. Onze e-mailexperts helpen je graag verder.
