• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab
Frontend

Hacking HTML with CSS

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.

21/09/2017 5 MIN READ TAGS: CSS, emailing, hack, html BY: Matthieu POULLIN 0 COMMENT
SHARE
LIRE LA SUITE

Matthieu POULLIN

Ma première fois sur Pagekit !

Le RGPD / GDPR, c'est maintenant pour les e-commerçants !

VOUS POURRIEZ AIMER

Jeux JS13K 2018 – Post mortem – FR

Design Frontend La police : comment bien l’écrire ?

Développement Frontend BEM : organisez vos CSS !

Frontend Le sprite generator de compass

Jeux JS13K – Post Mortem – EN

L'actualité AdFab Défi au NDC hackathon : concevoir un produit en 2 jours (part. 2 : le développeur)

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect