Mobiele e-mail marketing en flexibele lay-outs

Door Frans van Bellen, Vormgever @ Blinker BV

Smartphones zijn tegenwoordig overal. Iedereen heeft een iPhone, nog meer mensen hebben een Android-toestel en de gemiddelde jongere gaat de deur niet uit zonder zijn of haar Blackberry. Welk toestel ook je voorkeur heeft, de kans is groot dat je ontvanger zijn mailbox altijd bij de hand heeft. Dit vergroot natuurlijk de kans dat men je mail ziet, maar brengt ook problemen met zich mee.

De problemen

De “e-mail pauze” waarbij je lezer één of twee keer per dag op zijn gemak op de pc alle e-mail bekijkt, is vervangen door meerdere snelle momenten. Als er even niets te doen is, werpt men een vluchtige blik op de inbox waarbij men een korte mededeling of snelle actiemail nog wel leest. Maar hierbij neemt men niet de tijd je zorgvuldig samengestelde nieuwsbrief te lezen.

Deze nieuwsbrief is waarschijnlijk ook gemaakt met de pc in gedachte en niet met het veel kleinere scherm van de smartphone, waar je e-mail er een stuk minder aantrekkelijk uitziet. Als men de nieuwsbrief al opent, want het e-mail icoon op de smartphone moet concurreren met de icoontjes voor Twitter, Facebook en Angry Birds.

Best practices

Omdat mensen de e-mail op mobiel vaak anders lezen en de weergave verschilt, bestaan daarvoor ook andere best practices. Hierover is al veel geschreven en gezegd. Een erg goede samenvatting hiervan is onlangs geplaatst op het weblog van Litmus.

De oplossing

Een e-mail die voldoet aan deze best practices heeft natuurlijk weer een ander probleem: deze werkt minder goed in Outlook en andere desktop clients. Daarom hebben wij een nieuwe methode bedacht, die zorgt dat dezelfde e-mail op mobiel een ander uiterlijk krijgt:

Als men de e-mail in Outlook opent, is het een standaard nieuwsbrief. Deze bevat bovenaan een aantal servicelinks, een header, een hoofdkolom met verschillende nieuwsartikelen en een zijbalk met korte tekstkoppen. Dezelfde e-mail ziet er op de iPhone echter compleet anders uit:

  • De servicelinks bovenaan zijn teruggebracht naar de drie belangrijkste opties
  • Het belangrijkste nieuwsartikel is vergroot
  • De call-to-action link is prominenter in beeld gebracht
  • De overige nieuwsartikelen zijn ingekort naar een titel en link
  • De zijbalk is weggelaten

Op deze manier past de nieuwsbrief zich aan naar de beste gebruikservaring in elke situatie.

Hoe werkt het?

Elke e-mail client spreekt zijn eigen dialect. Deze techniek maakt gebruik van een taaltje dat de meeste e-mail clients niet begrijpen: Css3. De meeste smartphones begrijpen deze taal echter wel, waardoor de gemaakte aanpassingen op een smartphone prima werken. Het gaat dan met name om de volgende code:

@media only screen and (max-device-width: 480px)

Deze code kunnen we vertalen als “Doe het volgende alleen als je een mobiel apparaat met een scherm van 480 pixels breed bent”. Hierna kunnen we code invoegen. Die code zorgt er voor dat bepaalde onderdelen van het template groter of kleiner worden, of zelfs compleet wegvallen. Door een andere schermbreedte op te geven, kan men zo ook optimalisaties maken voor andere formaten toestellen of zelfs voor tablets zoals de iPad.

Dus..

Door de opkomst van smartphones veranderen de spelregels voor het opstellen van de ideale e-mail. Als je goed nadenkt over de situatie en omstandigheden van je ontvanger kun je hierop inspelen en zorgen dat je altijd de juiste informatie op de juiste manier aanbiedt.

Hoe zit het bij jouw lezers?

Wil je achterhalen hoeveel nieuwsbrieflezers je nieuwsbrief openen op hun mobiel? De Litmus e-mail analyse van Blinker biedt je inzicht. Daarbij analyseren we ook hoe de mensen je e-mail lezen, op welke e-mail client men jouw mails leest, wie hem print en welke ontvangers de mail doorsturen. Blinker voert de e-mail analyse volledig voor je uit.

Meer informatie

Heb je vragen naar aanleiding van dit artikel? Of wil je meer tips en informatie over mobiele e-mail design? Laat het ons weten! We beantwoorden je vragen graag. Bel 079 – 363 70 60 of mail naar info@blinker.nl.

Dit artikel is geschreven door:

Frans van Bellen
Vormgever
frans @ blinker.nl
T: 079 – 363 73 94

,

  1. #1 door Evert Albers (@evert_) op 28/03/2012 - 15:09

    Dit betekent dus ook dat je die kolommen niet meer in tables mag definieren?

  2. #2 door Frans van Bellen op 28/03/2012 - 15:35

    Omdat sommige e-mail clients nog altijd verouderde standaarden gebruiken is het aan te raden wel tables te gebruiken. Door dan in de css-code de breedte aan te passen en “display: none;” toe te voegen kan je de specifieke elementen verbergen

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log Out / Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log Out / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log Out / Bijwerken )

Verbinden met %s

Volg

Get every new post delivered to your Inbox.

Join 1.346 other followers

%d bloggers like this: