Responsive e-mail vormgeven voor mobiel

Vormgeven is emotie overbrengen. Bij vormgeven voor mobiel komt echter ook nog een stuk usability om de hoek kijken. Waar moet je rekening mee houden als je besluit om je e-mailtemplate responsive aan te bieden? En op welke punten verschilt het afhandelen van e-mail via een mobiele telefoon eigenlijk met het afhandelen van e-mail via de desktop?

E-mail afhandelen via mobiel, de realiteit

Het is vrijdagmiddag. Ik zit in de bus vanaf mijn werk terug naar Utrecht. Moe van de week bedenk ik wat ik dit weekend zal gaan doen. Ik pak mijn nieuwe iPhone 5 en besluit een heerlijk relaxed nummer op te zetten. Ontspanning is waar ik aan toe ben! Genietend van mijn lange beeldscherm open ik mijn privémail en wandel door de nieuwe mailings heen. Ik open de nieuwsbrief van mijn hockeyclub Kampong. De bus stopt bij een middelbare school en een aantal jongeren stappen de bus in. Ze trekken mijn aandacht met veel rumoer en lachende gezichten. Goed, waar was ik ook alweer? O ja, ik was de nieuwsbrief van mijn hockeyclub aan het doornemen.

Ondertussen rijdt de bus een tunnel door. Het licht wordt uit mijn scherm weggenomen waardoor het lezen erg moeilijk wordt. De kleurstelling van de nieuwsbrief is dusdanig monotoon dat ik meer gefocust raak op de weerkaatsingen op mijn beeldscherm dan de inhoud van de mailing. Daarnaast bevat de mail zo veel content dat ik besluit de mailing te verwijderen. Door naar de volgende mail!

Ik open de nieuwsbrief van Bjorn Borg. Ik zie één grote pay-off. Felle kleuren en typografische elementen trekken mijn aandacht. Er wordt 50% korting gegeven! Tof, ik ben namelijk gek op hun boxershorts en toevallig loop ik zo toch praktisch langs de winkel. Gelijk maar even profiteren dan.

Hoe begin je?

Als je e-mail leest op je mobiel, zijn er dus een aantal cruciale elementen die verschillen van het lezen op de desktop. Iemand die e-mail op de mobiele telefoon afhandelt:

• Bevindt zich niet altijd op een vaste plaats.
• Is vaak snel afgeleid.
• Wordt in meerdere mate beïnvloed door weersomstandigheden en omgevingslicht.

Houd daarom in het ontwerpproces al rekening met de mogelijkheden m.b.t. geotargeting en e-mail. Verpak de boodschap zo compact mogelijk en breng genoeg contrast aan in je design. Ook het tijdstip van versturen heeft invloed. Verstuur je je mail ‘s avonds, dan is de kans groot dat de mailing wordt gelezen in lagere lichtomstandigheden. En overdag in een omgeving waarin de lichtomstandigheden snel kunnen varieren zoals de eerdergenoemde bus. Wanneer de ontvanger een mailing bekijkt dat niet contrastvol genoeg is, dan is deze minder goed leesbaar. Gevolg: verwijdering.

Wanneer je begint aan een nieuw design, begin dan eerst met de mobiele versie en bouw deze uit naar een vormgeving voor tablets en daarna voor desktops. Een bottom-up i.p.v. een top-down benadering. Op deze manier begin je met een frisse blik en limiteer je jezelf niet tot een bestaand design in het achterhoofd. Elementen elimineren of omzetten is namelijk een stuk moeilijker dan elementen van de grond af aan ontwerpen. Bij een top-down benadering is de kans groot dat je elementen in je design behoudt die voor werken op mobiel niet wenselijk zijn. Zoals bijvoorbeeld (moeilijk aanklikbare) radiobuttons in formulieren die voor het lezen op een mobiele telefoon beter in een drop-down box vormgegeven kunnen worden.

Minimalisme is key!

Ga minimalistisch te werk. Een mailing is geen website. Wanneer iemand  op zijn mobiel je mailing leest dan heeft deze geen behoefte aan een navigatiebalk. Waarom zou je bijvoorbeeld een header en footer gebruiken? Wat wil je dat de gebruiker ermee doet? Het gaat immers om de call to action. Verwijder dus onnodige (header- en footer) content. Wees creatief en denk out of the box.

Elimineer ook twee- en driekolomsopmaak en zet de items onder elkaar. Je scrollt er op mobiel immers doorheen. Bedenk welke call to action je aan het licht wilt brengen en stem je volledige mailing daarop af.

Heroverweeg het aantal artikelen of nieuwsbriefitems. Hoe meer keuze, hoe minder interessant. Stuur liever elke week twee aanbiedingen of items dan één keer in de maand acht stuks. Houd altijd het 5-seconden model van e-mail voor ogen. Middels de @media query kan je bepaalde items automatisch weglaten op mobiel.

Gebruik van afbeeldingen, een aantal tips

Naast mijn opleidingen Multimedia Academie en Interactieve Media ben ik een aantal jaren werkzaam geweest als campagne ontwikkelaar en grafisch vormgever. In mijn huidige functie verwerk ik deze disciplines nog steeds, maar dan voor alle E-Village-uitingen. Vandaar een aantal tips die jullie verder kunnen helpen:

• Zorg voor een overzichtelijke vormgeving. Laat elementen ademen door niet te zuinig te zijn met het gebruik van (wit)ruimtes.
• Verwijder tierlantijnen. Zorg dat je huisstijl goed herkenbaar is, maar verwijder beeldende kenmerken die in de weg zitten.
• Zorg dat je afbeeldingen scherp zijn. Retina displays hebben een hoge pixel-dichtheid en vereisen hogere resoluties (ppi) om een afbeelding scherp weer te geven.
• Probeer afbeeldingen zo min mogelijk te schalen. De meeste afbeeldingen verliezen hun context wanneer ze worden geschaald. Overweeg snijden en vervangen van afbeeldingen of juist verwijderen wanneer de afbeelding niet bijdraagt aan de call to action, of leesbaarheid binnen je mailing.
• Houd rekening met de export-settings tijdens exporteren van afbeeldingen. Zorg ervoor dat de grootte (het aantal KB’s van de afbeelding) zo laag mogelijk wordt, maar de afbeelding nog wel prima zichtbaar is. De ontvanger gebruikt tegenwoordig nog vaak een 2- of 3G verbinding dus het binnenhalen van data kost de ontvanger tijd en geld. Een hoog MB-verbruik kan ook leiden tot opt-out.
• Zet horizontale afbeeldingen om naar verticale op het 480px. breekpunt en vermijd animated .GIF’s in je mailing. Deze werken namelijk in veel gevallen niet op mobiel.

Lettertype

• Gebruik een leesbaar lettertype met een minimum van 13pt. Dit is de minimale leesgrootte voor de iPhone. Kleinere lettertype-groottes worden automatisch vergroot en kunnen daardoor het design beïnvloeden.
• Het schuingedrukt weergeven van lettertypes bemoeilijkt de leesbaarheid. Zeker wanneer het lettertype een schreef bevat. Pas dus op met artistiek typografiegebruik.

Call to action

In de basis heeft de lezer altijd drie opties: doorklikken, scrollen of verwijderen. Houd dit gegeven tijdens het vormgeven van een responsive email goed in je achterhoofd. Je wilt natuurlijk eerst dat de ontvanger doorklikt of verder scrollt en pas wanneer blijkt dat er totaal geen interesse is, de email verwijdert. Idealiter is een gebrek aan interesse de enige reden waarom je mail verwijderd wordt.

• Call to action’s moeten gemakkelijk aangeklikt kunnen worden. Maak ze dus groot. De ontvanger moet immers met de hand navigeren.
• De plaats op het beeldscherm waar ‘de vouw’ zich bevindt, verschilt wanneer de gebruiker de content in landscape- of portretmodus bekijkt. Zorg ervoor dat de gewenste call to action altijd zichtbaar is, al is het een deel daarvan.
• Laat duidelijk zien waar jij wilt dat de ontvanger klikt. Verduidelijk indien mogelijk met tekst en vertel waar de ontvanger naartoe wordt gestuurd.  Vul op de landingspagina zoveel mogelijk gegevens van de ontvanger alvast in. Promotiecodes, N.A.W. gegevens, etc. Vertel dit ook aan de lezer: “Wanneer je dooklikt zijn je gegevens alvast ingevuld”. Dit draagt bij aan de beslissing om door te klikken.
• Wanneer een apparaat een beeldschermresolutie heeft van minder dan 480 pixels dan is de kans erg groot dat het een mobiele telefoon is. Gebruik dan ook dat gegeven om een telefoonnummer op te nemen waardoor de lezer met één klik telefonisch aan meer informatie kan komen. Klik hier om direct te bellen, ook dat is aanroepen tot actie.

Tjonge, wat een werk. Is dit het waard?

Responsive design vergt investering in tijd en geld, toch zal het in de meeste gevallen de statistieken (als bijv. openratio en doorklikratio) gigantisch verhogen. Vergelijk eens de statistieken van je recent verstuurde mailings. Welk percentage heeft geopend op mobiel? Is er een relatie met het niet doorklikken naar bepaalde landingspages?

Daarnaast draagt het uitblinken in responsive design bij aan je branding. Gebruik jij de nieuwste technieken en maak je het je klanten gemakkelijk om via hun mobiel met je in contact te komen, dan heb je zeker een streepje voor. Persoonlijk vind ik niets erger dan een mailing via mijn mobiel lezen die hier totaal niet voor geoptimaliseerd is. Een irritante en onbruikbare ervaring. En daar is een mailing ook niet voor bedoeld, toch?