088 - 120 34 00

2012, het jaar van de slimme e-mail?

Met onder andere de introductie van de derde generatie iPad’s zal de stijging van het aantal ontvangers dat hun e-mail op een mobiel apparaat opent blijven toenemen. Maar hoe kan je daar nou het beste op inspringen? En hoe kan je zorgen dat een e-mail er op elk apparaat, of dat nou een pc, een smartphone of een tablet is, zo uit ziet als jij dat wilt? In deze blog heb ik geprobeerd om het niet al te technisch te maken, maar toch een kijkje te geven in de mogelijkheden om hiermee aan de slag te gaan.

Sterke groei mobiele openers in 2011

Het aantal mobiele internetters groeit gigantisch, en daarmee dus ook het aantal mensen dat hun e-mail mobiel leest op hun smartphone of tablet. Dit is natuurlijk geen nieuw gegeven, maar toch blijven de cijfers indrukwekkend. Een klein voorbeeldje van de stijging zoals wij die bij een willekeurig e-mail label zien:

Openpercentages 2011 en 2012

Hierbij is heel duidelijk te zien dat naast het aantal e-mail ontvangers dat de e-mail mobiel opende ook het aantal apparaten waarop dit gebeurt is toegenomen. In een jaar tijd is het aantal opens op mobiel dus bijna vertienvoudigd. Kijkend naar de iPad 3 en de HP tablets die dit jaar zullen uitkomen, is de verwachting is dat dit in 2012 verder zal stijgen. Op het gebied van conversies verwacht ik ook een grote verschuiving zodra er een stabiele versie is van iDeal op je mobiel. Kortom, als je dat nog niet deed, is dit het moment om je campagnes ook voor mobiel te gaan optimaliseren!

Hoe anticipeer je hier nou op?

Ik kan je, vanuit mijn werkervaring als e-mail marketeer, vertellen dat er geen grappen gemaakt mogen worden over hoe vervelend het is dat je e-mail op elk mobiel device er anders uit komt te zien. Er zijn kleine trucjes om de schade beperkt te houden (zoals ik hier al eens eerder beschreef) maar alsnog lost dit het probleem niet op. Door middel van in-line codes (CSS) kan je een e-mail vormgeven, alleen reageren alle apparaten hier weer net iets anders op. Het ene apparaat pakt net dat ene stukje CSS code niet mee, de andere interpreteert je kunsten weer net anders dan jij verwacht. Kortom, frustratie alom tijdens het maken van je e-mails. Wat je eigenlijk wilt, is dat de e-mail zichzelf aanpast aan wat wél kan, in plaats van dat jij als e-mail marketeer honderden dingen moet uitsluiten die juist niet moeten gebeuren. En die oplossing is er in de vorm van Fluid Template Design.

Wat is Fluid Template Design?

Fluid Template Design is geen nieuwe techniek in internetland, maar gezien de technische limitaties die je hebt bij het gebruiken van html en CSS in een e-mail en de restricties die de diverse e-mail clients hebben ingesteld hiervoor, kan dit niet zo eenvoudig worden toegepast als op bijvoorbeeld je eigen website. Fluid Template Design is een techniek waarmee je tabellen en afbeeldingen geen vaste breedte geeft middels een aantal pixels, maar op basis van een percentage. Het wordt dus bijvoorbeeld width=”100%” in plaats van width=”600”. Door deze percentages te gebruiken past de breedte van de e-mail zich dus aan naar dat percentage van de beschikbare breedte op het scherm. Door dit consistent door te voeren in je e-mailtemplate kan je zo dus zorgen dat je volledige e-mail zich aanpast aan je scherm.

Vervolgens heb je nadat je tabellen en je afbeeldingen zich in de breedte aanpassen ook nog te maken met de diverse schermgroottes, de verhoudingen in de grootte van de afbeeldingen en de grootte van de lettertypes die je gebruikt per scherm. Om dergelijke zaken ook te kunnen beheersen voor schermen die verschillen in afmeting kan je gebruik maken van de zogenoemde mediaqueries.

Mediaqueries? Wat zijn dat nou weer voor een dingen?

Een mediaquery is een soort hoofdstuk binnen je CSS code. Hoofdstuk 1 is voor schermbreedtes van a tot b, Hoofstuk 2 is voor schermbreedtes van b tot c, et cetera. Deze ‘hoofdstukken’ plaats je in het -gedeelte van een e-mail. Binnen die hoofdstukken kan je dan aparte CSS codes opgeven voor de content van de e-mail. Om snel te testen in welke mediaquery bijvoorbeeld je iPhone valt kan je alle mediaqueries die je hebt gedefinieerd een andere kleur tekst meegeven. Als je dan bijvoorbeeld groene, rode en blauwe letters aangeeft voor de verschillende mediaqueries, en op je iPhone ontvang je de mail met rode letters, weet je welke CSS codes je moet aanpassen om de juiste lettergrootte op je iPhone-scherm te kunnen instellen. Zo kan je alle apparaten testen en bepalen hoe dit er op elk apparaat uit komt te zien.  Om te voorkomen dat je zelf allerlei mediaqueries met resoluties moet opzoeken zal ik de afmetingen die ik het meest ben tegengekomen hier even voor je opsommen:

  • Schermen met een maximumbreedte van 480 pixels: hieronder vallen de meeste smartphones zoals de iPhone en diverse Android toestellen.
  • Schermen met een breedte tussen de 590 en 1280 pixels: hieronder vallen de meeste tablets zoals de iPad.
  • Schermen met een minimumbreedte van 1280 pixels: hieronder vallen de meeste desktops en ander schermen die groter zijn dan de tablets.

Hier een voorbeeld van een mediaquery zoals wij deze in één van de e-mails die we hebben gemaakt hebben opgebouwd:

Voorbeeld van een stukje mediaquery

Dit is de mediaquery voor schermen met een maximumbreedte van 480 pixels, waaronder dus de meeste smartphones zoals bijvoorbeeld de iPhone vallen.

Hierin zijn de diverse classes gedefinieerd waarin wij de fontgrootte per onderdeel vaststellen, evenals waar nodig de hoogte van de zinnen (line-height).

In een mediaquery kan je nog veel meer opgeven, zoals ook gegevens voor tabellen, cellen en afbeeldingen.

 

 

 

Bekende struikelblokken goed op te lossen

Helaas zijn er ook nog flink wat toestellen, e-mailprogramma’s en -websites die de CSS code uit de van je e-mail negeren, en daarmee dus je mediaqueries. Hieronder vallen onder andere, zo bleek tijdens onze tests, sommige web-based e-mail clients en ook diverse Android toestellen. Er is hier gelukkig wel een oplossing voor, maar het is moeilijk uit te leggen. Het zit zo: Om toch te zorgen dat je e-mails ook hiervoor kunt bewerken kan je de gehele e-mail het beste gewoon in-line CSS-codes meegeven, maar ook een class (een verwijzing naar een stukje CSS code in de betreffende mediaquery). Zo kan je dus ook de grootte van je lettertype in-line meegeven zodat dit ook in orde is op apparaten die geen CSS-code in de ondersteunen. Je kan dan voor apparaten die wel de CSS-code in de en dus de mediaqueries accepteren de in-line stijlregels weer overrulen door ze allemaal de waarde !important te geven. Daarmee zal je apparaat de CSS-codes uit de belangrijker achten dan datgene dat in-line aan stijling is meegegeven. Zo creëer je dus een template die zowel voor e-mailprogramma’s die CSS-codes in de toestaan te gebruiken is, evenals voor clients die dit niet toestaan.

Handige tips om rekening mee te houden met het ontwerpen van deze e-mails

Je zult tegen veel zaken aanlopen bij het ontwerpen voor ontvangst op een mobiel apparaat. Hierbij twee tips die je moet onthouden:

  1. Voorbeeld van hoe je niet wilt dat tabellen reageren Maak altijd e-mails bestaande uit één kolom. In e-maildesign ben je gelimiteerd tot het gebruiken van geneste tabellen. Bij meerdere kolommen met percentages als breedte en verschillende hoeveelheden content kunnen deze onafhankelijk van elkaar gaan schalen en daardoor verschillende verhoudingen aannemen per kolom, wat een rommelig beeld geeft. Zie de afbeelding hiernaast voor een voorbeeld daarvan. De groene lijn die ik even heb toegevoegd toont duidelijk aan dat de kolommen hun eigen gang gaan met het schalen van de content. Je wilt natuurlijk dat dit netjes recht onder elkaar staat.
  2. Gebruik altijd duidelijke knoppen of tekstlinks die niet te dicht op elkaar staan. Dit omdat met name op een telefoon je vinger ten opzichte van de schermgrootte heel groot is, en je dus dingen die vlak bij elkaar staan mogelijk tegelijk raakt of niet goed kan aanraken. Dat is funest voor de gebruikservaring van je e-mail.

En als er in de toekomst een nieuw soort mobiel apparaat uitkomt of de resolutie veranderd?

Dat is dus het grote voordeel van het opbouwen van e-mails op deze manier. Je kan in de toekomst indien nodig een nieuwe mediaquery toevoegen en alle classes en andere elementen die je gebruikt aanpassen naar wens en dan past je e-mail zich ook op het nieuwe apparaat aan.

Leuke verbeteringen die je ook nog kunt toepassen

Met de steeds strengere abonnementen van telecomproviders die hun klanten datalimieten opleggen is het handig om gebruik te maken van LiveImages. Dit zijn afbeeldingen die kunnen laden afhankelijk van het device waarop geopend wordt. Zo kan je dus een kleinere versie van de afbeelding sturen naar een mobiele ontvanger, zodat het minder van het datalimiet van die persoon kost. Ook zijn deze images te gebruiken op basis van locatie of tijdstip waarop iemand het opent. Daarmee heb je de mogelijkheid een aanbieding te specificeren op bijvoorbeeld Arnhem, of mensen een afbeelding te tonen dat de actie helaas is verlopen na een bepaald tijdstip. Zo is het nog beter mogelijk om mensen tegemoet te komen in hun wensen en verwachtingen. Het zou bijvoorbeeld vervelend zijn dat je een geweldige aanbieding in de mail krijgt, doorklikt en op de website moet lezen dat de actie voorbij is. Die teleurstelling kan je op deze manier voorkomen.

2012, het jaar van de slimme e-mail?

Deze technieken zijn niet allemaal even nieuw, maar met al deze technieken gecombineerd ben je in staat om ‘slimme e-mails’ te maken. Door deze slimme e-mails juist in te zetten ben je in staat om te anticiperen op de groei van mobiele ontvangers, evenals in te spelen op het apparaat waarop zij de e-mail openen of de locatie en tijd waarop zij dit doen. Kortom, veel mogelijkheden die het komende jaar steeds belangrijker zullen worden naarmate het gebruik van e-mail op je mobiel zal blijven toenemen.

Wil je jouw online marketing samen met ons naar een hoger niveau tillen? Laat dan je gegevens achter, dan nemen wij contact met je op!

onze partners