De afgelopen 3 jaar is de manier waarop we e-mail lezen ingrijpend veranderd. Waar we voorheen thuis en op kantoor de laptop of pc gebruikten om ‘even de mail te checken’, ontvangt tegenwoordig 47% van de internetgebruikers de elektronische post op hun smartphone, die op elk moment van de dag is te raadplegen (bron: Litmus). Deze groep zal de komende tijd alleen maar blijven groeien en de verwachting is dan ook dat in 2014 het aantal vaste internetverbindingen wordt ingehaald door mobiele aansluitingen. Om ervoor te zorgen dat je geen potentiële klanten misloopt of verliest, is mobiele optimalisatie dus van belang. In dit artikel zal ik een aantal tips geven om je e-mailcampagne gereed te maken voor mobiel gebruik.

Eerste indruk

Bij het ontwerpen van een HTML-e-mail komt meer kijken dan alleen vormgeving. Vandaag de dag moet een commerciële e-mail voldoen aan allerlei strikte eisen om de consument te voorzien in een aangename gebruikersbeleving. Zo geeft 80% aan e-mails te verwijderen wanneer deze niet duidelijk leesbaar zijn op een on-the-go device. Daarnaast blijkt dat de eerste indruk zeer belangrijk is. 97% van de e-mails wordt slechts 1 keer geopend; een tweede kans krijg je niet (bron: Litmus). De lezer wordt dus steeds kritischer als het gaat om een goede beleving, ongeacht op welk apparaat de mail wordt bekeken.

Responsive Design

Een van de meest voorkomende oplossingen die ervoor zorgt dat e-mails acceptabel op een smartphone worden weergegeven, is Responsive Design. Deze ontwerpmethode maakt gebruik van een flexibele grid-structuur waarbinnen componenten op verschillende manieren kunnen worden vormgegeven aan de hand van een zogenaamde ‘@media query’. Afhankelijk van welk device en welke resolutie er worden gebruikt, zal de juiste lay-out worden getoond. Zo kunnen kolommen op elkaar worden gestapeld als de schermbreedte 480 pixels of kleiner is; de breedte van een mobiel scherm. Op deze manier is de tekst prettig te lezen zonder te hoeven zoomen. De Mail-app op de iPhone hanteert een minimale font size van 13 pixels, waardoor een te klein lettertype automatisch wordt vergroot. Hierdoor loop je het risico dat woorden niet meer in een kolom passen, dus zorg altijd voor voldoende marge. Afbeeldingen zijn soms moeilijk zichtbaar op een telefoon. Ik raad je dan ook aan deze te schalen naar de volledige breedte van het scherm.

Optimaliseren voor mobiel

Optimaliseren voor touchscreens

Met de opkomst van touch devices navigeren we steeds vaker met onze duim in plaats van gebruik te maken van invoerapparaten zoals de muis. Omdat het raakvlak van een duim groter is dan een cursor, moeten we rekening houden met voldoende afstand tussen hyperlinks. Een knop lokt meer uit om op te klikken – of eigenlijk tappen – dan een tekstuele link, die misschien niet duidelijk is opgemaakt. Let dus op dat call-to-action-buttons prominent aanwezig zijn, zodat de ontvanger er simpelweg niet omheen kan. Ook moeten we bedacht zijn op moderne schermen met een hoog PPI (pixels per inch). Voor een retina-display, dat uitgaat van een 2 keer zo grote pixeldichtheid dan een gebruikelijk beeldscherm, hoort elke afbeelding het dubbele formaat te zijn van de uiteindelijke weergave in de e-mail. Zo zorg je ervoor dat illustraties er niet vaag uitzien op de laatste generatie Apple-beeldschermen.

Testen

Het laatste advies dat ik wil meegeven is testen, testen en nog eens testen. Net zoals er verschillende internetbrowsers zijn voor websites, bestaan er ook diverse webbased clients en stand-alone clients voor e-mail die elk de markup op hun eigen manier interpreteren. Het is onmogelijk om je nieuwsbrief in elk e-mailprogramma er hetzelfde uit te laten zien, maar we kunnen er wel voor zorgen dat de inhoud leesbaar is. Door te optimaliseren voor mobiele schermen vergroot je het gebruikersgemak en zal men eerder doorklikken. Zo verbeter je de interactie met de lezer door per device de beste ervaring van de e-mail te bieden, wat uiteindelijk leidt tot een hogere conversie. Houd je ontwerp dus simpel en leg de focus vooral op de content.

Heb je nog vragen naar aanleiding van dit artikel? Ik hoor het graag! Je kunt hieronder een reactie achterlaten.

Delen
Reacties

Er zijn nog geen reacties.

Reageer

Praat mee over dit onderwerp