Whitepaper. design best practices

Transcriptie

1 Whitepaper design best practices 14 tips voor het design van je Versterk de boodschap van je uiting Best practices voor je design

2 Het design speelt een grote rol in de eerste indruk die ontvangers van je 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 s door het toepassen van onderstaande tips. 2

3 Houdt het design simpel s moeten netjes en eenvoudig ontworpen worden. Complexe designs zijn goed voor een website, maar probeer je 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 clients. Header Header Header 1 kolom met content 2 kolommen met content 3 kolommen met content Maak je niet breder dan 600 pixels Hoewel beeldschermen steeds groter worden is de standaard bij marketing nog steeds 600 pixels. Blijf onder de 600 pixels breed, zodat het grootste deel van je ontvangers niet horizontaal hoeft te scrollen om je 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 clients 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 anders in verschillende clients. 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 clients de tabel alsnog anders tonen. Ga er zeker niet vanuit dat de clients 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

4 Plaats tekst niet in een afbeelding In veel clients worden standaard de afbeeldingen pas getoond als de ontvanger het downloaden ervan handmatig activeert. Het overgrote deel van je ontvangers bekijkt je 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 zet, is de belangrijkste tekst van je niet direct zichtbaar. Gebruik daarom tabellen in plaats van afbeeldingen voor deze knoppen. Bouw een tabel bijvoorbeeld zo op: 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 campagne altijd direct zichtbaar. Kleine afb. met afgeronde hoeken Linker-zijkant knop Tekst CTA met achtergrondkleur Kleine afb. met afgeronde hoeken Rechter-zijkant knop 4

5 Zet belangrijke inhoud bovenaan Je ontvangers zien bij ontvangst vaak alleen maar het bovenste deel van je . De rest van je bericht valt buiten de zogenaamde Preview Pane. Ontvangers hebben weinig tijd voor je s en willen dus direct weten of ze iets aan je 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 te zien. Maak je 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 op kunnen schuiven. Als je niet met beide lettertypes test kan de 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

6 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 over gaat, zonder de afbeeldingen te hoeven downloaden. Een goede alternatieve tekst kan voor de ontvanger een stimulans zijn om de te openen. marketing 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: <img alt= 50%_korting_op_hele_assortiment! style= width: 353px; height: 626px; src= / source/source.jpg /> met afbeeldingen aan met alternatieve text zonder alternatieve text Kies stock-foto s bewust Een geschikte foto of afbeelding kan het verschil maken in je . 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 . 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 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

7 Benut de preheader De preheader staat vaak bovenaan de en is de eerste regel van je <body>-tag in je HTML code. Doordat de preheader de eerste tekst is, zullen clients 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 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 s worden op een mobiele telefoon geopend. Zorg er daarom voor dat jouw 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 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 reageert op de breedte van het scherm waarmee deze wordt bekeken. 7

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

9 Test je s 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 s in verschillende browsers en clients door gebruik te maken van Litmus en/of onAcid. Hier zie je in één overzicht jouw in alle combinaties van clients en browsers. Doe iedere maand nieuwe inspiratie op! Wil je meer tips over marketing ontvangen? Schrijf je dan in voor onze nieuwsbrief. Iedere maand komen we met nieuwe tips, trends en feiten op het gebied van marketing. Heb je vragen of andere tips? Mail ons op of neem contact op via Over Measur Measur is een service provider en biedt marketing oplossingen voor professionals. Marketing- en communicatiemedewerkers gebruiken onze zelf ontwikkelde marketing software en het verzendplatform om invulling aan hun marketing strategie te geven. Ze stellen campagnes op voor gesegmenteerde groepen, verzenden deze via het verzendplatform en krijgen zeer gedetailleerde rapportages terug. Measur is een professionele partner die ondersteuning kan bieden bij het efficiënt inzetten van marketing. 9