-

Hybrid coding: de kracht van fluid en responsive gecombineerd in je e-mail

Er zijn een hoop termen in omloop wat betreft e-mail- en webdesign. Je hebt vast wel gehoord van fixed, mobile first, responsive, fluid, liquid en adaptive. Maar ben je al bekend met Hybrid Coding? Hybrid Coding verenigt de sterke punten van fluid en responsive. Hybrid Coding is specifiek voor e-mail HTML.

In dit artikel zal ik niet uitleggen wat fluid, fixed, adaptive en responsive is en wat de voor- en/of nadelen van deze technieken zijn. Dit doe ik simpelweg om de reden dat hier al veel over geschreven is bij ons en bij anderen. Mocht je nog een korte uitleg willen? Dan raad ik je aan om dit filmpje te kijken, waarin binnen twee minuten duidelijk wordt uitgelegd wat de eigenschappen en verschillen tussen deze methoden zijn. Maar wil je als eerste lezen over Hybrid Coding? Lees dan snel verder!

RESPONSIVE IN E-MAIL

Binnen de e-mail branche zie je de responsive e-mail template steeds meer terugkomen. Dit wil echter niet zeggen dat dit allemaal op dezelfde manier wordt gedaan. Binnen de opbouw van je e-mail HTML kan je op verschillende manieren de uitlijning voor elkaar krijgen op desktop en mobiel. Zo kun je een e-mail bouwen met vaste breedtes en deze door middel van media queries met relatieve breedtes overschrijven en zo de e-mail optimaal weergeven op een kleiner scherm. Qua ontwerp heb je op deze manier een hoop mogelijkheden. Maar het nadeel hiervan is dat de e-mail binnen de Gmail App niet schaalt en dus de desktop-versie toont die weer minder goed leesbaar is op een kleiner scherm.

image
Bron: When someone says ”How does this look in the Gmail App?” Herkenbaar?

Om er dus voor te zorgen dat een e-mail template in de Gmail App leesbaar is, zal je iets moeten doen met relatieve (lees: percentages) breedtes in plaats van vaste breedtes. Maar ook dit is niet optimaal en kan beperkend werken. Daarnaast zul je toch een aantal vaste breedtes moeten instellen om ervoor te zorgen dat de e-mail template in andere e-mailclients correct wordt weergegeven.

Door gebruik te maken van max-width en min-width zorg je dat de e-mail sjabloon flexibel is en toch een paar vaste basisbreedtes heeft. Helaas gooit Outlook dan weer roet in het eten.

CONDITIONAL COMMENTS

Voor Outlook moeten we dan ook weer iets verzinnen. Gelukkig kunnen we daar gebruik maken van conditional comments. Hierin kunnen we voor Outlook vaste breedtes instellen, zodat Outlook de e-mail op een normale manier toont. Aangezien dit binnen conditional comments staat voor Outlook specifiek, wordt dit door andere e-mail programma’s niet gelezen en kun je daar weer prima gebruik maken van relatieve breedtes, min-width en max-width.

HYBRID CODING

Hybrid Coding is kort gezegd een combinatie van fluid en responsive in combinatie met conditional comments. Hierbij worden de sterke punten binnen deze technieken gecombineerd. Om te beginnen wordt er bij Hybrid Coding gebruik gemaakt van het fluid principe als standaard. Dit zorgt ervoor dat je e-mail leesbaar wordt getoond in e-mail programma’s waarin media queries niet of gedeeltelijk worden ondersteund, zoals de Gmail App. Hierna ga je bij Hybrid Coding de boel optimaliseren door middel van media queries en zorg je met conditional comments ervoor dat de e-mails nog steeds correct worden weergegeven in Outlook. Dit doe je door een tabel met een vaste breedte in een conditional comment om je content tabel heen te plaatsen.

DE HYBRID CODING FUNDERING.

Om een goed voorbeeld te zien van de code ga dan naar de fundering voor hybrid code op ons blog.

DE HYBRID CODING NADER GESPECIFICEERD

In bovenstaande Hybrid Coding code zie je dat er een specifieke class .container binnen een media querie staat. Apple Mail begrijpt namelijk max-width niet, maar leest wel CSS uit de head. Om ervoor te zorgen dat dit alleen gebeurt in e-mailclients die draaien op een Webkit engine, staat dit in een media querie.

De conditional comment is van toepassing op Outlook 2000 en hoger (2002, 2003, 2007 en 2013). Dit is gebaseerd op de engine waarop Outlook draait. Voor Outlook 2000 is dit MSO 9. Voor bijvoorbeeld Outlook 2013 is dit MSO 15. Gte staat voor ‘Greater than or equal’. Vanaf Outlook 2007 rendert Outlook e-mails volgens de Word Engine van Office. Outlook 2000 – 2003 renderen de e-mails op basis van een Internet Explorer die op de pc van de ontvanger aanwezig is.

GECENTREERDE TABELLEN EN HYBRID CODING

Wellicht ben je nu geïnspireerd om met Hybrid Coding aan de slag te gaan. De mogelijkheden zijn in ieder geval legio. In een volgende blogpost zal ik uitleggen hoe je met behulp van Hybrid Coding twee tabellen naast elkaar kunt plaatsen én deze ook nog eens gecentreerd onder elkaar kunt weergeven op een kleiner scherm zonder gebruik te maken van media queries én dus ook gecentreerd in de Gmail App!

Deel dit bericht

2 Reacties

Gerben Busch

Misschien goed om te weten, dat er CRM en e-mail specialisten zijn die al een jaar of 2 ‘mobile first’ ontwikkelen. En klanten al een tijdje laten profiteren van de gelukzalige combinatie van fluid/responsive. Ik noem geen namen.

Wilbert Heinen

Hoi Gerben,

Bedankt voor je reactie. Met alleen de combinatie van fluid en responsive ben je er nog niet. Je wilt namelijk voorkomen dat je e-mail zich ook fluid gedraagt in bijvoorbeeld Outlook. Dit bereik je door gebruik te maken van Conditional Comments voor Outlook specifiek.

Plaats een reactie

Uw e-mailadres wordt niet op de site getoond