Mobiele apparaten zijn niet meer weg te denken uit het dagelijks leven. Of het nou gaat om navigatie, entertainment of communicatie, smartphones en tablets hebben een vaste plek ingenomen. Was het voorheen nog normaal om een computer nodig te hebben voor het bestellen van allerlei zaken, voor gamen of voor het lezen en versturen van e-mails: dat is nu allemaal anders.

Om op dat laatste dieper in te gaan: sinds smartphones en tablets gemeengoed zijn geworden, hebben ze een steeds groter aandeel in het e-mailverkeer. Sinds eind 2013 heeft mobiel een aandeel van meer dan 30% in de opens en kliks volgens de Nationale E-mail Benchmark 2014:

email-marketing-opens-mobiel-benchmark-ddma-2014

Dit heeft zeker gevolgen voor e-mail marketing. Het succes van het medium e-mail valt of staat met hoe de e-mails getoond worden in e-mail clients, en hoe mensen ermee interacteren. Waren het voor 2007 (het lanceerjaar van de eerste Apple iPhone) nog slechts een handvol e-mail clients, tegenwoordig zijn het er heel wat meer. In plaats van alleen Outlook, Apple mail en een paar webmail clients zijn daar ook de mobiele e-mail clients bijgekomen. En niet alleen die mobiele e-mail clients, ook de enorme variatie aan resoluties zorgt ervoor dat nieuwsbrieven en campagnes flexibel moeten zijn.

In dit blogartikel laat ik ter inspiratie 3 voorbeelden van mobiele e-mail marketing zien. Hierbij worden design- en code-technieken gebruikt die in e-mail marketing bekend staan als responsive e-mail design.

In het geval van responsive e-mail design is het uiterlijk van de e-mail afhankelijk van het gebruikte apparaat, en is daar specifiek op in te spelen als het gaat om bijvoorbeeld de resolutie. Dit is zelfs inclusief het weglaten of juist tonen van bepaalde afbeeldingen, het veranderen van de grootte van het lettertype, enzovoort. Hier worden in de CSS, een onderdeel van de code waar de e-mail uit bestaat, zogenaamde media-queries voor gebruikt.

Fluid design is een basisvorm van een zich aanpassende e-mail: in dit geval worden percentages gebruikt (in plaats van ‘harde’ pixels) voor de breedte van tabellen en afbeeldingen. Dit is vooral nuttig voor e-mails met veel tekst en weinig afbeeldingen, gezien het gebruik van percentages voor afbeeldingen niet altijd handig is. Daarnaast is het niet handig voor grote schermen: als een e-mail dan 98% van de breedte van een 24-inch scherm mag gebruiken, wordt de e-mail wel heel breed.

Voor meer over responsive en fluid e-mail design, lees dit artikel op Litmus.com.

1. Anthropology

Anthropology heeft e-mail marketing voor mobiel goed in de vingers. Een mooi voorbeeld is het volgende design, dat opbouwt naar een climax terwijl de ontvanger aan het scrollen is op z’n smartphone.

anthropology-email-marketing-mobiel-responsive

De e-mail is niet te lang om suf te worden, maar precies lang genoeg om op smartphones de spanning op te bouwen. Leuk bedacht en uitgevoerd door Anthropology! Het simpele design zorgt er bovendien voor dat het op een groot scala aan smartphones prima zal werken zonder dat er veel bijzondere HTML- en CSS-code nodig is.

2. ASOS

ASOS is een Britse online fashion retailer met vele merken voor mannen en vrouwen. Het is een puur consumentenmerk waarvan de doelgroep vooral van mobiele e-mail clients gebruik maakt, in tegenstelling tot B2B-bedrijven.

Dit heeft ook gevolgen voor hun e-mails: deze moeten er niet alleen sowieso goed uit zien, gezien het om fashion gaat: ze moeten er op alle apparaten goed uit zien. Gelukkig heeft ASOS dat goed voor elkaar. In onderstaand voorbeeld is responsive e-mail design ingezet, waarbij niet alleen de layout van de e-mail wordt aangepast, maar ook een afbeelding vervangen.

asos-mobiele-email-marketing-responsive-design

Ook de afbeelding die in de normale versie helemaal linksboven staat (het rood-zwarte ‘final clearance / up to 70% off) wordt in de mobiele versie niet getoond. Een prima toepassing van responsive e-mail design!

3. British Airways

De Britse luchtvaartmaatschappij British Airways heeft letterlijk veel klanten ‘on the go’. Ook voor hen geldt dat mobiel een prioriteit is, en dat e-mails er op smartphones goed uit moeten zien. Het volgende responsive voorbeeld laat dat zien.

british-airways-mobile-email-marketing-design

De e-mail is in de mobiele versie versimpeld. Geen navigatie linksboven (Home | Flights | Hotels) meer, geen online versie link bovenin en kleinere titels in de blauwe balken. Daar staat tegenover dat de CTA’s (call-to-actions) zoals ‘Book now >’ meer contrast hebben gekregen: in plaats van donkergrijs op een grijze achtergrond zijn het in de mobiele versie ‘echte’ buttons geworden. Slim gedaan, want in fel zonlicht of als iemand de helderheid van zijn smartphonescherm niet al te hoog heeft staan is weinig contrast funest voor de zichtbaarheid en leesbaarheid van een e-mail.


Download alle 10 voorbeelden

Bent u op zoek naar meer voorbeelden van mobiele e-mail marketing? Download dan hier alle 10 tips:

  1. Anthropology
  2. Asos
  3. British Airways
  4. Dominos
  5. Expedia
  6. HTC
  7. Virgin Trains
  8. GoPro
  9. Sony Playstation
  10. Litmus

 


E-mail marketing nieuws in uw inbox ontvangen? Schrijf u in voor de nieuwsbrief! Vergroot uw e-mail marketing kennis met onze blogartikelen, white papers en video’s.

MailPlus e-mail marketing software proberen? Dit kan 30 dagen gratis met een responsive template en gratis support! Vraag nu een account aan en ga direct aan de slag!