Responsive design: je e-mails klaarstomen voor mobile

15 november 2012, 08:29

In de afgelopen drie jaar is het gebruik van smartphones geëxplodeerd. Het wordt voor e-mailmarketers dan ook steeds belangrijker hun e-mails te optimaliseren voor mobiel gebruik. Daarbij is het belangrijk goed te letten op het gebruik van smartphones binnen je eigen doelgroep(en). Maar de cijfers spreken voor zich: steeds meer mensen hebben een of meerdere mobiele apparaten waarmee zij online kunnen en hun e-mails mee openen.

Een paar van die cijfers:

  • In de leeftijdgroep van 18 tot 24 zakte het gebruik van web-based e-mail in 2011 in de VS met 34% en steeg het gebruik van mobile e-mail met ruim 32%. – Comscore (Februari 2012)
  • Er wordt tegenwoordig meer e-mail mobiel gelezen dan op een desktop e-mailprogramma of via webmail. Volgens statistieken wordt 38% van alle e-mails nu op een mobiel apparaat geopend, 33% op de desktop en 29% in webmail. Litmus – (Oktober 2012)

Organisaties houden nog te weinig rekening met dit toenemende gebruik. E-mails en websites worden vaak nog opgemaakt voor desktop gebruik. Daarbij wordt vaak vergeten het design aan te passen voor het mobiele gebruik. Door responsive design toe te passen, los je dit probleem op en stoom je jouw websites en e-mails klaar voor mobiel gebruik.

Wat is responsive design?

Responsive design is een designtechniek waarbij gebruik wordt gemaakt van speciale CSS3 code genaamd “media queries”. Met deze media queries kan je gemakkelijk bepalen welke stijl wordt toegepast wanneer je e-mail of website wordt geopend op een digitaal apparaat zoals een smartphone. Een voorbeeld:

<style type=”text/css”>

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

/* mobile-specific CSS styles go here */

}

/* regular CSS styles go here */

</style>

Bij deze media query wordt gekeken naar de variabelen die jij formuleert in je code. In dit geval wordt er gekeken of je e-mail wordt geopend op een scherm en of de breedte van dat scherm groter of kleiner is dan 480px. Wanneer de breedte kleiner is dan 480px wordt in dit geval de CSS code voor het mobiele scherm ingeladen. Is de breedte groter dan 480px, wordt de normale CSS ingeladen.

Responsive design komt er dus op neer dat de inhoud en layout van je e-mail aangepast wordt aan de hand van bv. schermgrootte, schermresolutie en oriëntatie van het scherm (landscape of portrait). Zo kom je niet alleen de gebruikers tegemoet die je e-mails lezen op desktop of via webmail maar ook zij die je e-mails lezen op hun mobiele apparaat. Je draagt dus bij aan een betere user experience!

Verschil tussen responsive & fluid design

Ben je al wat langer met e-mailmarketing aan de slag en het design van e-mail(templates) dan weet je dat er ook vaak gebruik wordt gemaakt van fluid design bij het optimaliseren van e-mails voor meerdere apparaten. Wat is dan het verschil tussen fluid en responsive design?

Het belangrijkste verschil is dat fluid design gebruik maakt van percentages om content proportioneel aan te passen aan verschillende schermgroottes. Bv: width=”90%”.

Responsive design maakt gebruik van de CSS media queries om per schermgrootte (of schermtype, orientatie,…) een verschillende layout toe te passen. Je hebt daarbij dus veel meer controle over je layout dan bij fluid design.

Hoe pas ik responsive design toe?

Natuurlijk wordt pas echt duidelijk hoe responsive design werkt als je een voorbeeld ziet.

Content je volledige scherm laten vullen

Vaak hoor je dat je het design van een e-mail zo simpel mogelijk moet houden. Het gebruik van 1 kolom in e-mails wordt dan ook aangeraden. Daarbij is het ook belangrijk dat je content op alle apparaten schermvullend is om voor een nette uitstraling te zorgen. Je HTML-code ziet er dan bv. als volgt uit:

<table cellpadding=”0″ cellspacing=”0″ border=”0″ id=”mainContent”>

<tr>

<td><img src=”header.jpg” alt=”” class=”bodyImage” /></td>

</tr>

<tr>

<td class=”bodyContent”>Bericht</td>

</tr>

</table>

De classes die je meegeeft aan de tabelcellen komen terug in je media query. De classes mainContent, bodyImage en bodyContent zorgen ervoor dat je content de volledige breedte van je scherm beslaan. Je media queries zien er dus als volgt uit:

@media only screen and (max-width: 540px) {

table[id=mainContent] {

max-width: 600px !important;

width: 100% !important;

}

}

@media only screen and (max-width: 540px) {

img[class=bodyImage] {

height:auto !important;

max-width: 600px !important;

width: 100% !important;

}

}

@media only screen and (max-width: 540px) {

td[class=bodyContent] {

font-size: 14px !important;

line-height: 125% !important;

padding-right: 10px;

padding-left: 10px;

padding-top: 0 !important;

}

}

Wanneer zet ik dan responsive design in?

Voor je al je tijd en moeite stopt in die optimalisatie van je e-mails (en websites) is het goed om te weten voor wie je dat doet. Leest jouw doelgroep je e-mails wel op hun smartphone of tablet? Analyseer daarom eerst je klantenbestand en de statistieken van je e-mailcampagnes om te zien of de toepassing van responsive design wel zin heeft.

Vraag bijvoorbeeld aan ontvangers of ze de mobiele versie willen ontvangen via een wijzigingsformulier of een klik in de nieuwsbrief. Of vraag dit meteen bij hun aanmelding voor je nieuwsbrief.

Michael Linthorst (1976) is internet ondernemer en ondermeer CEO van Copernica BV. Copernica is krachtige marketing software voor e-mailmarketing, webpagina's, mobile en automatische campagnes. Meer dan 5.000 gebruikers vertrouwen dagelijks op de succesvolle werking van Copernica Marketing Software.

Categorie
Tags

9 Reacties

    Arjan

    Goed artikel! Ik denk dat vele bedrijven dit totaal over het hoofd zien en er niet bij nadenken dat een e-mail template design ook aangepast moet worden voor diverse apparaten.


    15 november 2012 om 09:10
    Geert

    Als je e-mailcampagnes een actief middel zijn voor je bedrijf, dan is het onderzoeken overbodig, denk ik. De groep mensen die hun e-mail mobiel inziet lijkt me groot genoeg.

    De kans dat mensen je e-mailcampagne bij het mobiel inzien van hun e-mail nu overslaan wanneer ze weten dat ie niet geschikt is, is groot.

    Wat ik zelf vaak heb, is dat ik een e-mail open, zie dat ie niet fatsoenlijk leesbaar is en het dan op gelezen laat staan. Kleine kans dat ik er op mijn desktop nog eens naar kijk.


    15 november 2012 om 09:27
    Michael Linthorst

    Geert, bedankt voor je feedback. Het lijkt me echter wel voor goed om ook te onderzoeken of de doelgroep wel e-mails opent op mobiele apparaten. Al was het alleen al om inzichtelijk te maken hoe hoog dit gebruik binnen jouw doelgroep ligt.

    Je hebt gelijk dat steeds meer mensen hun e-mail overslaan als ze al zien dat deze niet te lezen is op een mobiel scherm. Ik las onlangs nog een onderzoek waaruit bleek dat ruim 70% van de ontvangers een e-mail meteen verwijderden als deze er niet goed uitzag op mobiel.


    15 november 2012 om 13:19
    Henk

    Wat veel bedrijven ook vergeten is om de landingspage waar de email naar verwijst ook voor mobiel te optimaliseren.

    Je opent 1 deur maar maar vervolgens sta je voor een gesloten 2de deur.


    16 november 2012 om 09:23
    Peter Dijkgraaf

    Interessant artikel.

    Nu komt er wel een vraag bij me op.

    Is er een mogelijkheid om media queries met inline CSS mee te geven?

    Je geeft zelf aan in een eerder geschreven artikel dat wanneer css in de head wordt meegegeven, het niet door alle e-mailprogramma’s ondersteund wordt..

    Zitten we dan alsnog vast aan fluid techniek voor mail templates?


    28 november 2012 om 11:43
    Henri Kaper

    Goede opmerking van Peter Dijkgraaf.

    Oplossing kan zijn om geen media queries te gebruiken, maar de hoofdtabel deze CSS te geven:

    width: 100%;

    max-width: 600px;


    30 mei 2013 om 09:35
    Henri Kaper

    Correctie … alleen max-width: 600px;


    30 mei 2013 om 10:27

Marketingfacts. Elke dag vers. Mis niks!