Email marketing: nieuwsbrieven optimaliseren voor mobiel

Afgelopen tijd is ‘responsive design’ de nieuwe trend geworden bij het ontwikkelen van websites. Responsive design zorgt er voor dat een website automatisch wordt aangepast aan het formaat van het apparaat waarmee de website wordt bekeken. Een mooi voorbeeld hiervan is de onlangs door Pronamic gerealiseerde website van CDA. Ook voor email wordt het steeds belangrijker dat deze zijn geoptimaliseerd voor mobiele apparaten. Zo berichtte iPadClub onlangs dat de iPad het meest gebruikt wordt om te e-mailen.

Als ik naar de statistieken van de Pronamic nieuwsbrief kijk zie ik een duidelijk verschil in het aantal ontvangers dat onze nieuwsbrief op hun iPhone leest:

Onderzoek van onze email service provider wijst zelfs uit dat in 2011 al meer dan 20% van de emails werden gelezen op mobiele apparaten, waar dit in 2009 nog maar 4% was. Een ander onderzoek wijst uit dat in Europa 30% van de ontvangers haar email op de mobiel leest. Het is dus hoogste tijd om nieuwsbrieven hiervoor te gaan optimaliseren. In dit artikel de belangrijkste eigenschappen waar je rekening mee moet houden als je een nieuwsbrief template gaat ontwikkelen.

Gebruik media queries

De meeste grote email providers ondersteunen deze techniek ondertussen, of gaan dit binnenkort ondersteunen. Met media queries kun je net als bij responsive design voor websites, het ontwerp van je nieuwsbrief aanpassen aan de hand van het beeldscherm-formaat waarop de email wordt gelezen.

Voor mobiel gebruik is het ideaal als de volledige breedte van het beeldscherm wordt gebruikt. Met een media query kun je aangeven dat de nieuwsbrief op een desktop maximaal 600px breed mag zijn en op een mobiel apparaat 100% breed.

Kies een mobiel vriendelijke layout

Zoals hierboven ook genoemd is het gebruiken van de volledige breedte van een mobiel beeldscherm erg handig. Het is daarom ook aan te raden een layout te gebruiken die hier geschikt voor is. In de meeste gevallen is dit een layout van één kolom breed. Dit omdat de tekstregels in meerdere kolommen wel heel erg smal worden als deze op een smartphone worden gelezen.

Stijl de tekst, links en call-to-actions

Het stijlen van de tekst en linkjes voor mobiele apparaten is belangrijk omdat in ieder geval de iPhone gebruik maakt van een minimale tekst grootte van 13px. Voorkom dat je e-mail breekt op de smartphone door grotere letters, door hier specifiek een CSS-stijl aan toe te kennen. Met de volgende CSS code kan o.a. de tekst aangepast worden:

<style type="text/css">
div, p, a, li, td { -webkit-text-size-adjust:none; }
</style>

Daarnaast is het belangrijk dat links en call-to-actions duidelijk zichtbaar zijn. Bij een call-to-action wil je de lezer verleiden tot een actie. Zorg er voor dat deze duidelijk in beeld komt, bij voorkeur zoveel mogelijk bovenin de email.

Laat overbodige informatie achterwege

Bij het lezen van nieuwsbrieven op een mobiel apparaat zijn er vaak onderdelen die minder goed worden ondersteund worden. Daarom is het goed om deze elementen achterwege te laten. Denk bijvoorbeeld aan knopjes voor het delen van de nieuwsbrief via sociale media.
Door overbodige informatie achterwege te laten worden call-to-actions juist meer geaccentueerd.

Houd rekening met ‘retina’ beeldschermen

Met de komst van de retina beeldschermen die Apple in steeds meer van haar apparaten toepast is het goed om hier vast rekening mee te houden. Retina beeldschermen geven een twee keer zo scherp beeld als andere beeldschermen. Maak daarom de afbeeldingen ook twee keer zo groot als dat je ze wilt weergeven. Dan zorg je er voor dat afbeeldingen ook scherp worden weergegeven op retina beeldschermen. Door hier (alvast) rekening mee te houden is de nieuwsbrief beter voorbereid op de toekomst.

Afsluitende tips en handige links

Gerelateerde tips

Maak niet alleen de template van je nieuwsbrief mobiel vriendelijk, maar zorg er ook voor dat gerelateerde zaken mobiel vriendelijk zijn. Enkele tips waar je rekening mee kunt houden:

• Maak inschrijfformulieren op je website mobiel vriendelijk;
• Zorg voor mobiel vriendelijke landingspagina’s;
• Zorg voor mobiel vriendelijke ‘platte tekst’ nieuwsbrieven;

Handige links

Tot slot nog een enkele handige links:

• Handige infographic over de anatomie van een mobiele email;
• UPDATE 03-10-2012: Een mooi overzicht van mobiele email clients die media queries ondersteunen.