Lors de la troisième édition de dotCSS (conférence dédiée aux CSS), Kevin Mandeville (@KevinMandeville) était venu défendre son amour de l’emailing.
Je vais remettre en avant son speak en tant que dévelopeur chez litmus
On ne va pas se mentir, faire des emailing ne fait pas l’unanimité en général.
Mais Kevin Mandeville met en avant quelques évolutions et quelques techniques applicables au emailing pour rendre ça plus intéressant.
Quelques rappels
Les clients mails sont nombreux, mais on peut tout de même se focaliser sur trois moteurs de rendu qui regroupent 90% des utilisateurs.
- Webkit
- Outlook
- Gmail
D’ailleur c’est à cause de Outlook que nous utilisons une structure en table et c’est à cause de Gmail que nous utilisons le style inline.
Sauf que…
Gmail a annoncé le support des css embed et des media-queries.
(https://blog.google/products/gmail/better-emails-tailored-to-all-your-devices)
Email Responsive sans media-queries
Plusieurs techniques ont été présentées, mais on retiendra surtout la « Fab four technique« .
Cette technique se base sur la min-width / max-width / width.
– min-width : définira la taille de la colonne en desktop,
– max-width : définira la taille de la colonne en mobile,
– width : sera plus grande que la min-width ou plus petite que la max-width, donc soit la min-width ou la max-width est appliquée.
Mais du coup comment mettre en place la width ?
width:calc((Breakpoint Value — 100%) * Breakpoint);
Pour être plus clair, voici les exemples présentés :
Pour un « breakpoint » de 480px
Pour un parent de 500px (2 colonnes)
.block {
display:inline-block;
min-width:50%; 250px => WINNER
max-width:100%; => 500px
width:calc((480px — 100%) * 480); => -9600px
}
Du coup la width est négative, la min-width est appliquée.
Pour un parent de 400px (1 colonne)
.block {
display:inline-block;
min-width:50%; 200px
max-width:100%; 400px WINNER
width:calc((480px — 100%) * 480); => 38400px
}
Dans ce cas, la width est positive, c’est donc la max-width qui est appliquée.
Et voilà comment faire du responsive sans media-queries
Dynamiser un email
L’exemple proposé est de mettre en place live Twitter feed directement dans l’email.
La solution est astucieuse : il propose d’utiliser l’attribut « content » pour gérer tous les contenus et de mettre en place tout ça dans une feuille de styles externe, qui elle, serait régénérée en fonction des différents tweets.
De cette façon, à chaque consultation, le client mail ira chercher la feuille de style avec les « content » mis à jour.
Petit exemple du CSS hébergé sur le serveur:
#tweet-1 .name::before {
content: "Kyle Gardner";
}
#tweet-1 .handle::after {
content: "@kyleagardner";
}
#tweet-2 .name::before {
content: "John Doe";
}
#tweet-2 .handle::after {
content: "@johndoe";
}
...
Résultat
Petit soucis, cela ne marchera que pour les clients mail qui utilisent webkit.
Dans le cas contraire, le fallback proposée est d’afficher une image générée sur le serveur.
Email interactif
Vous avez sûrement déjà vu ce hack qui utilise la pseudo-selector « :checked » (pour savoir si une checkbox/radio est cochée ou non) afin d’écouter un click sans javascript.
L’intérêt semble assez bas de pour des applications classiques. Mais du coup, c’est vraiment applicable aux emailing.
Pour rappel voici le hack pour changer le background d’un label par exemple :
//CSS
label div {
height: 50px;
width: 50px;
background: red;
}
input:checked + div {
background: blue !important;
}
//HTML
<label>
<input type="checkbox" />
<div></div>
</label>
Résultat:
On peut tout à fait se servir de cette technique pour toggle des images en cliquant sur les labels, et donc créer un slider directement dans le corp de l’email, juste en css :
//CSS
input {
display: none;
}
input + img {
display: none;
}
input:checked + img {
display: block !important;
}
input + img + label + span {
margin: 10px 5px;
display: inline-block;
cursor: pointer;
}
//HTML
<label>
<input type="radio" name="gallery" />
<img src="http://lorempixel.com/300/300/animals" width="300" height="300" />
<label>
<input type="radio" name="gallery" />
<img src="http://lorempixel.com/300/300/sports" width="300" height="300" />
<label>
<input type="radio" name="gallery" />
<img src="http://lorempixel.com/300/300/abstract" width="300" height="300" />
<label>
<input type="radio" name="gallery" checked />
<img src="http://lorempixel.com/300/300/food" width="300" height="300" />
<span>food</span>
</label>
<span>abstract</span>
</label>
<span>sports</span>
</label>
<span>animals</span>
</label>
Résultat:
Je vous laisse avec cet exemple :
https://litmus.com/builder/c0bfd8a
Conclusion
Les limitations de l’emailing nous forcent à être ingénieux, et parfois de très bonne idées en ressortent.
