White paper Design in e-mail marketing Uitleg in 23 aspecten
E-mail en vormgeving horen bij elkaar. Alle mailings die je via je ESP-software verstuurt, verdienen een professionele vormgeving. Vraag is: hoe doe je dat? Dit white paper laat zien wat design in e-mail marketing inhoudt en welke aspecten bij e-maildesign een rol spelen. Voor het gemak hebben we ze opgedeeld in drie niveaus: basis, geavanceerd en expert. Het zijn 23 aspecten in totaal: BASIS 1. Stijl van je e-mail 6. Call-to-action 2. Typografie 7. Social media 3. Desktop en mobiel 8. Witruimte 4. De preheader 9. Korte artikelen 5. De plaats van je logo 10. Test GEAVANCEERD 11. De vouw 16. Gebruik alt-teksten 12. Leesbaarheid zonder afbeeldingen 17. Uitgebreide personalisatie 13. Tekstuitlijning 18. JPG, PNG en GIF 14. Gebruik compacte header 19. A/B test op designelementen 15. Image-tekst ratio EXPERT 20. Minimalisme 22. Animatie 21. Compositie 23. Interactiviteit 2
Terminologie Weet ze te vinden in het template: snippet, headerafbeelding, kolommen, footer, servicelinks etc. Enkele belangrijke termen op een rij: Preheader met links de snippet en rechts de servicelinks (online lezen & afmelden) Header met knoppen naar de website 1e Contentblok met headerafbeelding en tekst die gecentreerd is uitgelijnd 2e Contentblok met afbeelding rechts uitgelijnd over 2 kolommen Template over 3 kolommen Professionele footer met vaste afbeelding, contactgegevens over 2 kolommen en servicelinks over volledige breedte 3
Basis De eerste zaken die je moet weten voor het ontwerpen van een e-mailtemplate. De stijl van je e-mail 1 Je e-mail moet herkenbaar zijn. Zodra de e-mail geopend wordt, moet de lezer herkennen wie je bent en waarover je mailt. Daarom is het een goed idee om het e-mailtemplate op je website te baseren. Durf hier wel van af te wijken. Een e-mail heeft een andere vorm en een ander doel dan je website. Kijk maar eens naar het voorbeeld van Intratuin: Overeenkomsten en verschillen in een mailtemplate en een webtemplate Je ziet in één oogopslag dat het e-mailtemplate veel meer gericht is op directe conversie dan het template van de website. Je ziet duidelijke calls-to-action met Lees meer en ook de copy is gericht op conversie: kom naar de potgronddag op zaterdag 18 en 25 maart. Maar andere huisstijlkenmerken komen wel met elkaar overeen: kleuren, headerindeling en logo wijken niet van elkaar af. 4
Typografie 2 Typografie gaat over lettertypes. Voor e-mail kun je het beste lettertypes gebruiken die bij alle ontvangers al geïnstalleerd zijn in het besturingssysteem. Er zijn wel mogelijkheden om bijvoorbeeld googlefonts te gebruiken, maar check wel altijd of ze goed zichtbaar zijn in je mailings. Je zult dan een fall-back lettertype zien. Kijk op cssfontstack.com als je een overzicht wil van lettertypes die je probleemloos voor je e-mail kunt gebruiken. Om enkele van deze websafe lettertypes te noemen: Websafe Schreefloze lettertypes Websafe Schreefletters Websafe Monospaced Arial Cambria Consolas Tahoma Georgia Courier Trebuchet MS Times Courier New Verdana Times New Roman Lucida Console Century Gothic MS Serif Lucida Sans Typewriter Desktop en mobiel 3 Ruim de helft van alle e-mails wordt tegenwoordig gelezen op een smartphone. Je e-mail moet daar dus mooi op weergegeven worden. Op een PC raden we een maximale breedte aan van 640 pixels, voor mobiel wordt dit 320. Inhoud die niet op dit smallere scherm past kunnen we verkleinen, verbergen of onder elkaar plaatsen. Bedenk wel dat een mobiele lezer vaak even vluchtig tussen twee zaken door zal lezen. Dit gebeurt vaak onderweg, in een omgeving vol afleidingen. Zorg dus dat je mobiele e-mail kort, pakkend en snel overtuigend is. 5
Een responsive template is anno 2017 een must-have De preheader 4 De preheader is de ruimte helemaal bovenaan in je e-mail, nog voor de header. Hier plaatsen we vaak de snippet: een korte tekst die als allereerste gezien wordt en die op smartphones direct getoond wordt. Hier kun je de interesse van de lezer aanwakkeren. De preheader: goed en minder goed ingezet De snippet Bekijk deze e-mail online in het voorbeeld van Tijdschrift voor Marketing is een gemiste kans om een inhoudelijk sterke boodschap over te brengen. Beter is Laatste kans om te winnen etc van MADE.COM. Het voordeel hierbij is dat een aantal e-mail clients de preheader tekst tonen achter de onderwerpregel, zodat deze ook zichtbaar is als de e-mail (nog) niet geopend is. Hierbij raden wij aan om maximaal 15 woorden te gebruiken. Daarnaast is dit de ruimte om een lees online-link en afmeldlink te plaatsen. De eerste voor als de e-mail niet goed wordt weergegeven, de tweede om spamklachten te voorkomen. 6
De plaats van je logo 5 Soms bepaalt de huisstijl dat je logo aan de rechter- of onderkant van een uiting geplaatst moet worden. In je e-mail kan je hier het beste van afwijken. Ook als je het leesscherm van Outlook kleiner of groter maakt, dan zie je nog steeds dat onderstaande mail afkomstig is van KLM. De linkerbovenhoek is namelijk de enige plaats waar je zeker kan zijn dat deze direct na openen zichtbaar is. Dit is dus de juiste plaats voor je logo. Plaats je logo bij voorkeur in de linkerbovenhoek van je template 7
Call-to-action 6 Dit is het uiteindelijke doel van de meeste e-mails: de lezer aanzetten tot actie. Dit heeft vrijwel altijd de vorm van een button naar je website, webwinkel of landingspagina. Dit is het belangrijkste element van de e-mail en mag daarom best opvallen. Veel lezers zijn gewend op buttons te klikken, daarom is het een goed idee de call-to-action vorm te geven als button. Social media 7 Als je erg deelbare content hebt, zoals grappige afbeeldingen of artikelen die ook buiten je directe doelgroep handig zijn, is het een goed idee deze vanuit de e-mail deelbaar te maken op social media. Met een paar simpele buttons kan de lezer je inhoud verspreiden naar lezers die je anders niet zou bereiken. Als je zelf actief bent op social media kan je je lezers oproepen je daar te volgen. Geef ze hier wel een goede reden voor. Volg ons op Facebook werkt minder goed dan Volg ons voor het laatste nieuws en de slimste tips. Bericht uit een mailing van Ziggo plus de share in WhatsApp 8
Witruimte 8 Je kan je koppen en buttons laten opvallen door ze groot en felgekleurd te maken, maar in plaats daarvan werkt het vaak beter om ze wat subtieler te maken, met meer lege ruimte er omheen. Hierdoor vallen ze net zo veel op, maar oogt het een stuk rustiger en vriendelijker voor de lezer. Wees consequent in de witruimte. Als je boven een artikel 30 pixels witruimte aanhoudt, staat het het mooist als je dit aan de onderkant en zijkanten ook doet. Het gebruik van witruimte in het voorbeeld van Salesgids is minder goed uitgewerkt dan in het voorbeeld van Blokker. Duidelijk een verschil in het gebruik van witruimte Korte artikelen 9 Je teksten zijn natuurlijk altijd mooi geschreven en staan bol van de wijsheid. Iets schrappen is altijd zonde. Helaas hebben de meeste lezers niet de tijd om dit allemaal te lezen. Probeer daarom je teksten toch zo kort en bondig mogelijk te houden. 9
Test 10 Als je je perfecte e-mail hebt gemaakt, is het tijd om deze te testen. Zo n test is in eerste instantie vooral technisch van aard. Ziet alles er goed uit? Werkt alles en gaan alle links naar de juiste pagina s? Zodra dit goed werkt kan je inhoudelijk testen. Als je lezers de e-mail niet openen kan je misschien de onderwerpregel veranderen. Als ze niet doorklikken ligt dit misschien aan de vormgeving van de button of aan de inhoud van je aanbieding. Probeer deze afwisselend aan te passen om te kijken wat de oorzaak is. Geen e-mail is ooit helemaal af of perfect. Blijf daarom verschillende elementen testen om voortdurend je resultaten te verbeteren. 10
Geavanceerd Wil je een stap extra zetten in e-maildesign, houd dan ook rekening met de vouw, de interlinie, de image-tekst ratio en dergelijke. Zo hebben wij negen geavanceerde designelementen voor je op een rij gezet. De vouw 11 De vouw of the fold komt uit de krantenwereld. Kranten worden in een krantenrek vaak gevouwen aangeboden waardoor alleen de bovenste helft direct zichtbaar is. Deze plek is dus gereserveerd voor het belangrijkste nieuws. Dit nieuws plaats je boven de vouw of above the fold. Voor mailings geldt hetzelfde: de belangrijkste content plaats je boven de vouw. In je design kun je hier rekening mee houden. Zo is onderstaande mailing van MADE.com heel duidelijk in tweeën gesplitst: het artikel over hun snelle levering en het deel shop per rubriek. Het deel Express Levering is above the fold, beeldvullend en direct zichtbaar. MADE.COM: een mailing die qua opmaak uit twee delen bestaat 11
Naast de vouw wordt ook vaak de term preview pane of reading pane gebruikt. Binnen dit venster kun je berichten bekijken zonder dat je ze opent. De reading pane is standaard ingesteld op nagenoeg alle e-mail clients (Outlook, Apple Mail, Thunderbird etc.) en toont ook altijd het bovenste deel van een mailing. Zo zal het gele vlak -of een deel ervan- in de mail van MADE.COM bijna altijd zichtbaar in de preview pane. Leesbaarheid zonder afbeeldingen 12 Afbeelding worden niet direct getoond in alle e-mailclients. Lezers moeten die soms eerst downloaden. Het is dus niet handig om je hele boodschap als een afbeelding aan te bieden. De mailing van Pinterest is nauwelijks te begrijpen zonder de gedownloade afbeeldingen. Kijk zelf maar: Groot verschil tussen ingeladen en niet-ingeladen afbeeldingen 12
Hoe anders is de mail van C&A. Daar heb je de afbeeldingen niet nodig om de mail te begrijpen: Zonder ingeladen afbeeldingen nog steeds een aantrekkelijk template Het is goed om in de vormgeving van je template rekening te houden met de leesbaarheid van je mailing. Dit vergroot de effectiviteit. Tekstuitlijning 13 Een andere meer geavanceerde designfeature is tekstuitlijning. Het gaat dan niet alleen om links of rechts uitlijnen, centreren of uitvullen, maar vooral over interlinie. Het is overigens een best practice om te kiezen voor links uitlijnen en alleen bij korte artikelen een gecentreerde tekst te gebruiken. Denk bij interlinie e.d. aan het volgende: Interlinie van beide mailings is nogal verschillend 13
Uit de mailing van Marketo: With all the new technologies, strategies, and tactics that are emerging, it can feel impossible to get a grasp on everything. To help, we ve compiled a list from the team at Marketo of what they think is important to focus on in 2017. Uit de mailing van Emerce Opleidingen: Bij Emerce opleidingen doe je kennis op van de beste professionals in de branche. Je brengt je eigen case in en ontvangt passende oplossingen en strategieën. Emerce werkt vanuit een jarenlange journalistieke ervaring in e- business en selecteert alleen de allerbeste docenten. Een Emerce opleiding is altijd op advanced niveau. In beide gevallen is er sprake van het lettertype Arial, maar de look & feel van beide tekstblokken is totaal anders. Dit heeft te maken met interlinie (afstand tussen tekstregels), corpshoogte en kolombreedte. In het design van je mailings is het goed om deze aspecten mee te laten wegen. Ze hebben veel invloed op de uitstraling van je boodschap. Gebruik een compacte header 14 De header van je e-mail is alle ruimte in je e-mail boven het eerste artikelblok. In het voorbeeld van Emerce Opleidingen is de header compacter dan in het voorbeeld van Marketo. En je ziet ook onmiddellijk dat in het voorbeeld van Emerce Opleidingen de aandacht voor het eerste artikelblok groter is dan in het voorbeeld van Marketo. Wil je deze focus, dan is een compacter header wenselijk. Moet je dan altijd alleen maar compacte headers inzetten? Nee! Het voorbeeld van Marketo leent zich prima lenen voor een eenvoudige boodschap die eruit moet knallen. Mails als die van Marketo zijn wel vaak eenmalig. Voor reguliere mailings kies je wel beter voor een compacte header. Zo kun je ook in je design een onderscheid maken tussen reguliere mailings en mailings met een specifieke -vaak eenmalige- boodschap. 14
Image-tekst ratio 15 Een handige tussenoplossing is om het eerste artikel en de headerafbeelding samen te laten vallen. In het voorbeeld van Marketo gebeurt dat niet, maar in het voorbeeld van het Adfo Group Online Video Event wel. Grote headerafbeelding met tekst Een belangrijke reden om in je design rekening te houden met de hoeveelheid tekst in je mailing heeft te maken met spamfilters. Mailings met alleen afbeeldingen worden vaak gezien als spam. Uit een onderzoek van Email on Acid komt naar voren dat je minimaal 500 karakters moet gebruiken om buiten de spamfilters te blijven. En tekst in afbeeldingen mag je mee rekenen. Ter geruststelling: de complete mail van Marketo in #13 bestaat uit 776 karakters (inclusief spaties en teksten in afbeeldingen, header en in de footer). Ruim voldoende dus. 15
Gebruik alt-teksten, maar met mate 16 Alt-tekst of alternatieve teksten zijn de title tags die je meegeeft aan niet-gedownloade afbeeldingen. Vergeet je ze te gebruiken dan zie je alleen de standaardtekst Klik hier met de rechtermuisknop etc. Je ziet deze teksten dagelijks voorbijkomen: De standaard alt-tekst bij niet-gedownloade afbeeldingen Gebruik alt-teksten alleen als die het doel of de functie van de afbeelding ondersteunen. Zeker als je belangrijkste call-to-action een afbeelding is. Hierboven had eenvoudig de alt-tekst Video over helende werking hallucinaties toegevoegd kunnen worden. Maar wees wel spaarzaam in het gebruik van alt-teksten. Heb je veel afbeeldingen, bekijk dan hoe alle alt-teksten onder elkaar eruitzien. Het zou jammer zijn als een te grote hoeveelheid alt-teksten afbreuk doen aan je template. Verder worden voor blinden alt-teksten voorgelezen. Als elke afbeelding in je e-mail een alt-tekst heeft, dan wordt t als snel onduidelijk waar je mail over gaat. Uitgebreide personalisatie 17 Personalisatie in e-mail marketing is meer dan alleen Beste voornaam. Wat ook mogelijk is, is personaliseren met onderdelen van het template. Denk aan afbeeldingen. 16
Tele2 personaliseert met afbeeldingen Zo werd in het voorbeeld van Tele2 een bepaald type toestel getoond afhankelijk van de voorkeuren van de ontvanger. Deze voorkeuren waren bepaald op basis van de abonnementsprijs, de toestelvoorkeuren en de contractduur. Menu in de footer 18 Een professioneel e-maildesign eindigt met een footer. En een footer is tegenwoordig veel meer dan een afsluitend contentblok met contactgegevens. In het voorbeeld van Intratuin is de footer zelfs dynamisch. Alleen lezers die als voorkeurvestiging Hilversum hebben aangekruist, ontvangen de contactgegevens van het filiaal van deze Gooise hoofdstad. Uiteraard -zoals de KLM dat aanpakt- blijft de footer wel de plek voor de afmeldlink, de profielwijzigingslink en de link naar de website. Ook vind je nagenoeg altijd de social icons in de footer. Maar de boodschap is helder: wil je een geavanceerd e-mailtemplate, wees dan ook kritisch in de vormgeving en content van je footer. 17
Een voorbeeld van een dynamische footer en een klassieke variant JPG, PNG en GIF 19 Geen mooi e-mailtemplate zonder mooie afbeeldingen. En afbeeldingen komen in drie typen: JPG, PNG en GIF. Leer om de verschillende afbeeldingstypen optimaal in te zetten. Het voorbeeld hieronder is opgeslagen als GIF-bestand, terwijl JPG beter was geweest. Is GIF voor deze afbeelding het juiste bestandstype? 18
Niet elk bestand is even geschikt voor elk type afbeelding. Je kunt het beste de onderstaande flowchart volgen: 19
A/B test op designelementen 20 Je kunt natuurlijk kijken wat achteraf goed werkt of minder goed werkt, maar het is ook prima mogelijk om op voorhand een A/B test op designelementen toe te voegen. De volgende designelementen worden veel opgenomen in een A/B test: Kleurgebruik, wit kader met zwarte tekst of gekleurd kader met witte tekst Wel of geen foto Button of tekstlink Positie van foto s Soort foto (wijst de persoon naar de button of juist niet) Extra informatie, of juist alleen een titel met een CTA Kijk eens naar het voorbeeld van A. Vogel: A-variant B-variant A. Vogel wilde graag weten of het toevoegen van een inhoudsopgave aan de mail (variant B) een positief effect zou hebben op de klikratio. In de inhoudsopgave wordt een overzicht gegeven van alle artikelen die de lezer in de mail kan verwachten. En met één klik in de inhoudsopgave werd je als lezer direct doorgestuurd naar het artikel. 20
Toch bleek het toevoegen van een inhoudsopgave aan het e-mailtemplate helemaal geen positief effect te hebben. Juist het tegenovergestelde was waar. De mail zonder inhoudsopgave scoorde beter. De klikratio van variant-a was 24,4% en de klikratio van de B-variant 26,84%. Voor A. Vogel was deze test succesvol. Nu weten zij dat het toevoegen van een inhoudsopgave een negatief effect heeft op de klikratio. Expert Zijn de voorgaande 20 aspecten van e-maildesign geen uitdaging meer voor je, laat je dan inspireren door onze designexperts. Waar houden zij zich mee bezig? Hoe ben je in designland anno 2017 futureproof? Minimalisme 21 Een minimalistisch e-maildesign 21
Een trend in design is het minimalistische design of clean design voor je template. Met minimale designelementen een volledig template opbouwen, is een uitdaging. Maar het resultaat is fantastisch. Een belangrijke voorvechter van deze minimale aanpak in design, is de Duitse industrieel ontwerper Dieter Rams. Wil je een overzicht van zijn werk, kijk eens op Pinterest. Zijn motto: less, but better. Belangrijk is dat je een oog ontwikkelt voor de kleinste details en dat je deze goed uitvoert. Enigszins technisch: houd rekening met de contrast assembly (de montage) versus de ornamentation (de decoratie). Voorbeeld hierboven: de logo s van dropbox, WIFI en Column One zijn gelijk gemonteerd en gedecoreerd met een cirkel die gezamenlijk een consistente en evenwichtige beeldbeleving geven. Let altijd op de designelementen die je weg kunt laten. Wat voegt niets toe? Krijg je daar oog voor, dan ontwikkel je een minimalistische kijk op je e-maildesign. Compositie 22 Goede vormgeving heeft een goede compositie. Compositie = het creëren van orde en rust in je vormgeving. Bij e-mailcompositie moet je denken aan het ordenen van beeldelementen of mailelementen. Zo kun je inzichten uit eye tracking goed combineren met de vlakverdeling in je template om titels, tekst, CTA s en afbeeldingen goed op elkaar af te stemmen. Je laat -in het voorbeeld hieronder- een afbeelding kijken in de richting van je CTA Download Free Guide die volgt op de beeldlijn vanuit de titel waarbij ook de opsomvinkjes in de tekst wijzen in de richting van de CTA. Zo ontstaat er een prettige en rustige vormgeving. 22
De beeldlijnen in dit contentblok vormen een denkbeeldige driehoek Animatie 23 Animaties of animated gifs bestaan al een tijdje, maar blijven designelementen op expertniveau. Je kunt er fantastische stijleffecten mee bereiken. Een gif-animaties is een filmpje van meerdere afbeeldingen achter elkaar. Zoals een flipbook of tekenfilm. De afkorting GIF staat voor Graphics Interchange Format en de techniek is óf frame-by-frame óf een timeline óf een aantal achter elkaar geplaatste videoframes. Gif-animaties doen t goed als humorelement in je e-mail of als je wilt laten zien hoe dingen werken. Er zit immers een volgordeaspect in. Wil je live zien hoe animated-gifs eruitzien, kijk eens giphy.com. Wil je een aantal mooie voorbeelden van gifs in e-mail, lees dan het blog op Litmus. 23
Interactiviteit 24 Interactiviteit toepassen in e-maildesign past bij de trends voor 2017. Het is t laatste in design. Om drie interacties te noemen: toepassen van verborgen teksten, uitklapmenu s of carrousels. Interactiviteit in design betekent dat van de lezer een actieve deelname wordt verwacht. Hij moet ergens op drukken om alle mailelementen te kunnen zien. Een mailing wordt zo meer dan alleen een overzicht van afbeeldingen, teksten en links. De lezer kan actief mee doen met je mailing. Dit is behalve amusant ook zeer effectief. Het vergroot namelijk de klikratio. Wat is een verborgen tekst in e-maildesign? Een tekst die deels verborgen is. Met een klik op de knop of kop wordt de hele tekst zichtbaar. E-mails kunnen op mobiel erg lang worden. Met deze techniek wordt de inhoud samengevat, waardoor er meer onderwerpen direct in beeld zijn: Tekst deels verborgen Tekst volledig zichtbaar 24
Wat is een uitklapmenu in e-maildesign? Een menu-knop waarmee het menu getoond kan worden. E-mails kunnen op mobiel erg lang worden. Met deze techniek wordt de inhoud samengevat, waardoor er meer onderwerpen direct in beeld zijn: Menu ingeklapt Menu uitgeklapt Wat is een carrousel in e-maildesign? Verschillende foto s of tekstblokken naast elkaar waar de lezer doorheen kan bladeren. Met een carrousel kan je meerdere foto s van een product of meerdere artikelen over een gelijksoortig onderwerp aanbieden, zonder dat het extra ruimte inneemt. Slide 1 Slide 2 CTA CTA 1 2 Slide 3 Slide 4 CTA CTA «3» «4» Een voorbeeld van een carrousel 25
Voor alle interactieve e-maildesignelementen geldt dat ze alleen getoond worden in e-mail clients die responsive e-mail ondersteunen. Andere clients laten de volledige tekst, het volledige menu of alle afbeeldingen uit de carrousel zien. Of in het geval van de carrousel: alleen de eerste afbeelding. Ondanks deze technische beperkingen zijn interactieve e-mailelementen een geweldige manier om de lezer te betrekken bij je e-mail en je laat zien dat je professionele designelementen niet schuwt.