E-mail is één van de disciplines binnen marketing die de laatste jaren in een nieuwe fase van volwassenheid terecht is gekomen. Niet langer meer geldt ‘one size fits all’, maar ‘a size that fits’. Dat geldt voor zowel de content als de opmaak. Ruim vijftien jaar geleden heeft fluid design al z’n intrede gedaan, maar het werd niet direct omarmd. Desondanks mogen we blij zijn dat hier destijds een begin mee is gemaakt. Want van links naar rechts scrollen om een e-mail goed te lezen; daar wordt niemand blij van. Inmiddels vormen adaptive (adaptief) en responsive (responsief) design in veel gevallen de nieuwe standaarden. En sinds kort is daar ook hybrid (hybride) coding. Wij merken dat er nog steeds veel verwarring bestaat over de verschillende technieken voor het opmaken van e-mails. Daarom een uitleg.

Adaptive design: verschillende e-mails

Adaptive design is de stille vennoot van responsive design; het is minder bekend en wordt minder vaak toegepast. Het verschil tussen deze twee vormen is voor het blote oog moeilijk waar te nemen.

Adaptive design introduces media queries to target specific device sizes, like smaller monitors, tablets and mobile.

De voornaamste reden dat adaptive design niet veel wordt toegepast, is omdat het een heel tijdrovende klus is; voor ieder formaat scherm wordt een aparte e-mail opgemaakt.

 

Adaptive responsive design hybrid coding

 

Responsive design: één e-mail die zich aanpast

Responsive design is, naar mijn idee, een beetje het containerbegrip voor e-mails die geschikt zijn voor mobiele apparaten. Het wordt het vaakst genoemd, maar in sommige gevallen wordt eigenlijk scalable of fluid design bedoeld. Waar responsive design echt om draait is:

Responsive design is een manier van ontwerpen waarbij geprobeerd wordt gebruikers van verschillende apparaten en schermformaten een zo optimaal mogelijke gebruikerservaring te bieden. Door de indeling – en de content – te ontwerpen aan de hand van de beschikbare ruimte, ontstaat een ervaring die beter past bij de manier waarop een website wordt bezocht (Tim Daalderop, Level level).

Dit alles gebeurt op basis van CSS media queries – de lay-out van de e-mail en grootte van afbeeldingen, tekst en/of buttons worden aangepast op basis van de grootte van het scherm. In sommige gevallen is het zelfs mogelijk om bepaalde aspecten op mobiel weg te laten of te verwisselen. Kijk hier voor negen voorbeelden van responsieve e-mails.

 

http://youtu.be/21wMw4MkQdg

 

 

Hybrid coding: goede weergave voor alle clients

En dan zijn we bij een nog nieuwere vorm van design aangekomen; hybrid coding.

Hybrid coding brengt de wereld van fluid en responsive design samen. Fluid design dient als uitgangspunt, maar er worden bepaalde technieken gebruikt voor een responsief resultaat. De vaste en relatieve breedtes zijn binnen hybrid coding heel belangrijk. Voor een optimale weergave in alle clients (met name Outlook) moet ook worden gekeken naar ‘conditional coding’.

Hybrid coding brengt dus de wereld van fluid en responsive design samen. Dit is nodig omdat bijvoorbeeld de Gmail app of Outlook clients voor responsive design het nodige roet in het eten gooit. Een bepaald deel van de code wordt binnen deze twee varianten genegeerd, waardoor het design niet wordt aangepast. Lange tijd hebben wij zelf een creatieve oplossing gebruikt voor het verspringen van kolommen in Outlook van onze eigen nieuwsbrief. Gelukkig is hier nu een ‘officiële’ oplossing voor. Benieuwd hoe u dat doet?

Welke variant is de juiste?

Net als met veel andere zaken is er niet één antwoord op de vraag welke vorm van HTML u het beste kunt toepassen. De juiste keuze is geheel afhankelijk van het gebruikersmoment, uw doelgroep en het doel van uw e-mail. Op het moment dat u een bevestigingse-mail verstuurt met alleen tekst, is een e-mail met fluid design vaak al voldoende. Voor uw welkomst- of cross- en upsellcampagnes, waar waarschijnlijk veel afbeeldingen in worden gebruikt, is het verstandig responsive design of misschien zelfs hybrid coding toe te passen. Tekstblokken en afbeeldingen schuiven netjes onder elkaar, zodoende blijft de logica van uw e-mail behouden en beperkt u het afbreukrisico. Kijk voor de juiste keuze goed naar uw statistieken. Houd daarom altijd in uw achterhoofd hoe de consument uw e-mail leest. En gelukkig bent u niet alleen marketeer, maar ook een consument.

Wilt u meer informatie over de verschillende technieken? Neem dan vrijblijvend contact met ons op.

Abonneer je op "In Contact"

De nieuwsbrief van 4DMS, met inhoud over de thema's die ons - en onze klanten- in het dagelijkse leven bezig houden.
  • Met het verzenden van dit formulier ga je akkoord met het abonneren op de nieuwsbrief " In Contact" van Impress - 4DMS. Jouw gegevens zullen wij verwerken volgens ons Privacy Statement.
  • Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.