De XII werken van Flexmail - Werk 4/12: Rust je nieuwsbrief uit met de juiste artillerie
 

In een twaalfdelige reeks geef ik als communicatie & marketing specialist bij Flexmail tips rond E-mailmarketing. Vorige keer bekeken we de rol van content in emailmarketing. Vandaag zoomen we in op een doeltreffend design die de ontvanger in enkele seconden kan overtuigen.
 

De e-mail inbox is een drukke, luidruchtige plek. Honderden andere e-mails liggen al op de stapel, samen met mappen, kalenders en notities. De typische gebruiker is meestal niet met ingehouden adem aan het wachten op jouw mail. Je moet de aandacht van je ontvanger in enkele seconden kunnen trekken. Naast goede content is een doeltreffend design essentieel. Bewapen jouw e-mailcommunicatie met de juiste artillerie en schaar al je soldaten achter je.

Verspil dus niet hun tijd wanneer je e-mail aankomt. Kom snel to the point, en verberg de echte waarde van je e-mail niet onder een berg van aansprekingen, voorwoorden en hilarische foto’s. Bedenk wat iemand in jouw e-mail wil lezen, en vertel hen meteen wat dat is.

Minimalistisch design

Natuurlijk heeft iedereen zijn eigen stijl. Jouw contacten hebben misschien niet eens dezelfde stijl als die van ons. Hier ga je dus niet kunnen lezen welke stijl het beste werkt. Dit is immers voor ieder doelpubliek anders. Er zijn echter een aantal basisprincipes die je altijd in het achterhoofd moet houden wanneer je een e-mailbericht wilt ontwerpen. Geen samenraapsel van allerlei toeters en bellen, maar een functioneel design dat de boodschap van je e-mailbericht ondersteunt en versterkt.

Boodschap van de eerste keer goed

Ons brein werkt als een vragend orgaan. Wanneer we iets voor de allereerste keer zien, vragen we ons onmiddellijk af: “Wat is dit?” (Kan ik het eten? Of eet het mij?). Het is dan ook geen wonder dat wanneer er gevraagd wordt wat het belangrijkste is op een website of in een e-mail, men altijd antwoordt: “iets vinden wat mij interesseert”.

Wanneer een contact jouw e-mailbericht opent, dan heeft hij antwoorden nodig, en snel. Het eerste dat hij leest moet een antwoord bieden op vragen als:

  • “Waar gaat dit over?”
  • “Wat kan ik hier vinden/krijgen/lezen?”
  • “Waarom zou ik het gebruiken/ Waarom is het nuttig voor mij?”

Hoe doe je dat dan? Stel een duidelijk doel voor ogen. Schrijven en ontwerpen met 10 verschillende doelen in je achterhoofd is ontzettend moeilijk. Kies er daarom 1 of 2. Zo blijf je altijd to the point, en is het veel gemakkelijker voor je contacten om het te begrijpen.

Evenwicht tussen afbeeldingen en tekst

Ga er niet automatisch van uit dat je afbeeldingen gezien zullen worden. Als je ooit e-mail clients als Outlook of Gmail gebruikt hebt, zal je de “Afbeeldingen worden niet standaard weergegeven” boodschap al vaker gezien hebben. Contacten moeten klikken op een link of een knop om ze te downloaden.

Hierboven zie je een e-mailbericht. Aan de linkerkant zie je het oorspronkelijke design (de eerste helft eigenlijk), en aan de rechterkant zie je hoe het bericht standaard wordt weergegeven – zonder afbeeldingen. Niet echt duidelijk dus.

Een e-mailbericht met enkel afbeeldingen lijkt misschien een goede optie. Maar als je afbeeldingen niet getoond worden, en je contact ook geen tekst ziet, waarom zou hij dan je e-mailbericht willen lezen? Sommige mensen weten misschien niet eens dat ze de afbeeldingen moeten downloaden. Je mag er dus niet van uit gaan dat je afbeeldingen gezien gaan worden.

Hoe werk je hier omheen?

  • Vermijd afbeeldingen voor belangrijke content zoals titels, links en call to actions.
  • Plaats een goed zichtbare link naar de webversie van je bericht.
  • Zorg ervoor dat je contacten je toevoegen aan hun adressenboek of whitelist, zodat je afbeeldingen wel standaard weergegeven worden.
  • Voorzie Alt-teksten voor alle afbeeldingen om je contacten een betere ervaring te bezorgen.
  • Bepaal een hoogte en een breedte voor je afbeelding zodat je design niet kan verschuiven wanneer de afbeeldingen uitgeschakeld zijn.
  • Test hoe je design eruit ziet zonder de afbeeldingen voor het versturen.

We zeggen natuurlijk niet dat je geen afbeeldingen mag gebruiken. Het is wel belangrijk dat de afbeeldingen in het bericht functioneel zijn en iets toevoegen aan de boodschap, of je contacten begeleiden naar belangrijke content.

Design voor vernieuwing

Neurologen beweren dat vernieuwing ervoor zorgt dat we gemakkelijker informatie kunnen verwerken. Onze hersenen zijn constant op zoek naar patronen, en we leren snel om alles te negeren wat routineus, herhalend of voorspelbaar is. Hierdoor besteden we meer aandacht aan nieuwe dingen.

Dat is ook de reden waarom veel designers altijd de positie van tekst en afbeeldingen laten afwisselen. Doordat je contact naar iets nieuws moet kijken, gaat hij zich beter concentreren om de boodschap te begrijpen. Subtitels en witruimte helpen je om datzelfde doel te bereiken.

Hoe meer ruimte er niet wordt gebruikt, hoe meer aandacht er gaat naar de aanwezige elementen in je e-mailbericht. Zorg dat het element dat het meeste aandacht moet krijgen op de prominentste plaats op je pagina staat.

Ontwerpen voor mobiel

De tijd dat je zeker was dat je e-mailbericht zittend voor een computerscherm werd gelezen is al even voorbij. Dat betekent ook dat je als verzender op een andere manier moet omgaan met de de manier waarop je contact je boodschap consumeert.

Andere manier van lezen

Zowat de helft van de Belgische bevolking heeft een smartphone of een tablet onder de vingers.

Naast de specifieke eigenschappen – denk onder meer aan het scherm – van deze apparaten die hun invloed hebben op het lezen van een e-mail, zijn er ook andere factoren gebonden aan de leesomstandigheden.

Relevant?

Natuurlijk moet je eerst gaan kijken of jouw doelgroep wel mobiel leest. Is dat niet zo, dan heeft het ook geen zin om tijd te verspillen aan een mobiel design. Merk je dat je contacten jouw bericht wel op mobile devices openen, dan wordt het tijd om over een aangepast design te gaan nadenken.

Er wordt wel eens gezegd dat een mobiel design niet uitmaakt. “Als je e-mailbericht niet mooi toont op hun mobiele telefoon, zullen je contacten het wel op hun computer gaan bekijken.” Onderzoek heeft echter uitgewezen dat 96% van de e-mails wordt geopend op 1 device. Bijhouden voor later is een fabeltje. Je moet je contacten het zo gemakkelijk mogelijk maken om jouw boodschap te lezen. En een mobiel design hoort daar bij.

De gevolgen van het kleinere scherm

Voorzie genoeg witruimte tussen je artikels. Het creëert meer overzicht in je berichten. Zorg ook dat je geen tekst linken plaatst middenin een artikel. Je lezers moeten immers klikken met een vinger, en niet met een muis.

Kies je voor een button, probeer hem dan te programmeren als een cel met een achtergrondkleur. Deze blijft nog steeds zichtbaar als de afbeeldingen uitgeschakeld zijn. Om je call to action makkelijk aanklikbaar te maken, kies je best voor een minimum grootte van 44 x 44 pixels.

Nog belangrijker dan de grootte van de link, is de ruimte rond de link. Probeer ongeveer 10 pixels witruimte rond je linken te voorzien, zodat zelfs onnauwkeurige vingers geen probleem hebben met het selecteren van je link.

Laat je onderwerpregels krimpen

Bij het schrijven voor mobiel is het nog belangrijker om alles scherp en kort te houden. Dit geldt zeker voor onderwerpregels. Houd ze onder 50 tekens. Contacten die op iPhone lezen zien enkel 30 tot 40 tekens van de onderwerpregel. Houd je tekst kort en krachtig

Heb je je tekst al zo ingekort voor web? Dan ga je nog een keer moeten schrappen in je tekst, zodat alleen de pure boodschap overblijft. Mobiele lezers zien ongeveer 100 woorden per scherm. Zorg dus dat elk woord telt. Zie je artikels bijna als twitterberichten van 140 tekens ieder.

Ga voor 1 kolom

1- en 2-kolom berichten blijken het best te werken voor mobiel. Designers die houden van pure eenvoud kiezen steevast voor 1 kolom. Je focust puur op de boodschap, en alle elementen zijn duidelijk en overzichtelijk.

Begin met het belangrijkste

Mobiele lezers bekijken hun e-mails tussendoor. Hun tijd is gelimiteerd en ze zijn gemakkelijk afgeleid. Zorg dus dat je meteen hun aandacht kan vangen. Zet de belangrijkste informatie bovenaan en werk naar beneden tot aan de minst belangrijke details. Zo krijgen je lezers meteen de belangrijkste boodschap mee zonder het volledige verhaal te moeten lezen.

Bandbreedte

Daarnaast ben je nooit zeker over de bandbreedte waarover je “mobiele” contacten kunnen beschikken. Hebben ze ergens op een hotspot wifi kunnen oppikken, dan kan je zorgeloos je landingspagina ongemoeid laten. Tenminste als deze pagina een responsive design heeft. Moet je contact de landingspagina via 3G bekijken, dan kan je best zuinig zijn met grafisch materiaal. De wachttijden lopen dan te hoog op. Of je kan een knop voorzien waarmee de lezer aangeeft later nog eens herinnerd te worden aan het bericht, als hij bijvoorbeeld wel netjes voor de computer zit.

Responsive design

Je kan met de voorgaande tips al veel resultaat bereiken. Het nadeel is natuurlijk dat je één bericht aan het ontwerpen bent voor twee verschillende soorten schermen. En daar stopt het niet. Er zijn namelijk zo veel verschillende soorten smartphones en tablets op de markt, elk met hun eigen afmetingen. De kans dat je design zijn maximale resultaat behaalt op elk soort scherm is dan klein.

Daarom zie je meer en meer responsive design in e-mailberichten terugkomen. Met responsive design ontwerp je eigenlijk twee verschillende versies van je bericht. Wanneer je bericht aankomt bij de ontvanger gaat de e-mail client eerst kijken op wat voor soort scherm het bericht binnenkomt. Afhankelijk daarvan gaat hij kiezen welke versie van het ontwerp moet weergegeven worden.

Je kan hier heel ver in gaan. Je kan enkel bepaalde elementen veranderen, zoals de lettergrootte of de call to actions. Maar je kan ook een volledig ander design voorzien voor je “mobiele” contacten.

Vergelijk maar eens onderstaand voorbeeld. De linkse telefoon toont hoe het oorspronkelijke design zou binnenkomen, moesten we er niets aan veranderen. Doordat het hier gaat om een design met slechts 1 kolom, is het nog best leesbaar. In het tweede scherm hebben we responsive design toegepast. In deze mobiele versie hebben we de afbeeldingen verwijderd, de lettergrootte aangepast en de call to actions meer ruimte en een andere lay-out gegeven:

Val op

Je ziet dat er een groot aantal elementen zijn die het succes van je design gaan bepalen. Vergeet echter nooit dat je je eigen unieke stempel moet drukken op je nieuwsbrief. Je contacten moeten onmiddellijk kunnen herkennen dat het gaat om jouw nieuwsbrief. Laat gerust je creativiteit de vrije loop. Natuurlijk krijg je ook dit keer weer twee handige downloads mee. Wil je je eigen HTML-code schrijven voor je e-mailbericht? Weet dan dat e-mail clients anders omgaan met HTML dan website. Zorg dus dat je goed op de hoogte bent van de limieten van elke e-mail client.

Dit is slechts een samenvatting van het vierde werk van Flexmail. Om het volledige werk en de bijhorende gratis downloads te kunnen ontvangen,  dien je je hier in te schrijven. (http://nl.flexmail.be/12werken.php)