De onontkoombaarheid van responsive e-mail design

Als je regelmatig je e-mail leest op je telefoon, dan weet je dat het soms een verschrikkelijke ervaring kan zijn. Te kleine letters, te brede kolommen, lay-out die niet goed wordt weergegeven en ga zo maar door. Als je als bedrijf nieuwsbrieven via e-mail verstuurt, dan moet je het je mobiele lezers natuurlijk niet moeilijker maken dan nodig. Maar hoe zorg je dat je nieuwsbrief of marketing e-mail zo leesbaar mogelijk wordt weergegeven? Responsive e-mail design is de oplossing, maar het wordt helaas nog relatief te weinig toegepast.

Waarom optimaliseren voor mobiel?
Tegenwoordig wordt 15-60% van alle e-mails geopend op een mobiel apparaat (afhankelijk van de doelgroep). De verwachting is dat rond 2017 ongeveer 80% van alle e-mails mobiel bekeken zal worden. Dit betekent dat het voor marketeers net zo belangrijk is geworden dat hun e-mails goed leesbaar zijn op mobiele apparaten als op de traditionele e-mail clients zoals Outlook en Gmail. Door de explosieve groei van het gebruik van mobiele apparaten is een groot deel van het lezerspubliek (en uiteindelijk de meerderheid) niet goed te bereiken als e-mails niet geoptimaliseerd zijn voor kleinere schermen.

Websites worden al op grotere schaal geoptimaliseerd voor mobiel. Waar vroeger nog vaak een aparte mobiele versie met vaststaande afmetingen werd ontwikkeld, zie je tegenwoordig steeds meer ‘responsive design’ websites. Responsive, omdat de website zich aanpast aan de resolutie van het scherm waarop hij geopend wordt. Omdat responsive design werkt met functionaliteit van HTML5 is het eenvoudig inzetbaar voor e-mailmarketing alsmede voor websites. Toch is het nog niet doorgedrongen tot de mainstream, terwijl hier een hoop winst valt te behalen. Tevens is het zo dat je bij websites ten allen tijde rekening  moet houden met de gebruikte browser. Bij e-mail is dit principe niet anders; echter heb je hier te maken met verschillende e-mail cliënts. Er zijn diverse technieken om responsive design toe te passen binnen e-mail marketing. De meest bekende en tevens meest ondersteunde techniek maakt gebruikt van media queries.

In 4 stappen naar responsive e-mail design

Stap 1: het ontwerp
Allereerst dien je een ontwerp te hebben. Stel je maakt of beschikt reeds over een e-mail voor de desktopomgeving. Je bouwt bovenaan zes navigatiebuttons in, die op een desktop eenvoudig zijn weer te geven en aan te klikken met een muis. Daaronder plaats je een aantal contentblokken met daarin afbeeldingen en tekst.

Stap 2: prioritering van inhoud
Bepaal in het ontwerp, samen met de contentowners, de prioriteiten van de navigatie & contentblokken. Deze prioritering heb je nodig bij de volgende stap omdat er minder ruimte beschikbaar is op kleinere schermen, waardoor je concessies zal moeten doen.

Stap 3: bepalen responsive design
Op een smartphone kunnen de navigatiebuttons een probleem vormen; er is minder ruimte en ze worden bediend met een vinger in plaats van een muis. Als de buttons te klein worden weergegeven, dan gaat dat zeker ten koste van je doorklikratio. Met responsive design code kun je er nu voor zorgen dat er bijvoorbeeld slechts drie buttons in plaats van zes worden weergegeven, afhankelijk van de schermgrootte. Hierdoor kunnen de buttons relatief groter worden getoond, waardoor ze eenvoudiger met de vinger kunnen worden aangeklikt. Dit geldt ook voor contentblokken. Gebruik hierbij dus de prioritering die je hebt gemaakt in voorgaande stap.

Stap 4: bouwen & testen
Als de prioriteiten van de inhoud zijn vastgesteld kan het (al dan niet bestaande) ontwerp worden ontwikkelt. De ontwikkelaars zetten het ontwerp om in een werkend e-mail template. Door een keuze te maken in de te gebruiken techniek (bv. media queries) kan je vooraf ook bepalen welke zaken je naderhand moet testen. Om voor jouw doelgroep de beste gebruikerservaring te bieden is van essentieel belang dat je e-mail design correct functioneert in de voor jou belangrijke e-mail clients.

Conclusie
Op het moment dat je zorgt voor een optimale leeservaring door je e-mail design te schalen, vergroot je feitelijk de interactie met je doelgroep. Je biedt de lezer je content altijd in de meest optimale vorm en dat draagt direct bij aan een hogere conversie. Is de gebruikservaring prettiger, dan is de drempel lager om door te klikken. Je begeleidt mensen als het ware richting conversie. Is de gebruikservaring niet goed, dan zal je daar je potentiële klant al verliezen. Hoe goed je content ook is. En zeg nou zelf; hoe lang spendeer jij aan het lezen van een binnenkomende (marketing) e-mail?

Deze blogpost is geschreven door Fedor Achterkamp, ‎Project Manager Digital Marketing, Trimm.