Cette année, contrairement à 2014, LunaWeb a opté pour des vœux au format papier, du beau papier, bien découpé, très coloré. En plus d'un envoi postal et parce que oui, nous sommes une agence web, nous nous devions d'accompagner cette jolie carte par un email responsive à la hauteur de la version physique.
Nous avions alors deux possibilités : réaliser un email statique bien classique ou sortir un peu des sentiers battus en proposant un email animé. Après quelques discussions, nous avons opté pour la deuxième solution.
Notre choix fait, comment réaliser notre email ?
Nous aurions pu le faire grâce à des gifs animés comme nous l'avions fait pour nos vœux 2014, ou encore en intégrer directement de la vidéo. Malheureusement, pour supporter les écrans à haute densité de pixel (Retina) et avoir la meilleure qualité possible, l'email peut vite devenir très lourd à télécharger. Sans compter sur un support assez faible de la vidéo HTML5 et l'impossibilité de la lancer automatiquement sur iOS par exemple.
Après avoir écarté ces deux solutions, notre choix s'est donc porté sur le format SVG. De cette manière nous pouvions à la fois réaliser une animation fluide et légère, "Retina ready" et jouer en prime la carte #trendy pour bien débuter l'année 2015.
Email responsive + SVG, mais Email quand même...
L'intégration d'email est un art à part entière, une sorte de machine à remonter le temps direction les années 90 : bienvenue dans un voyage à travers les tableaux "<table>", les commentaires conditionnels MS Office "<!-->", le CSS inline et Parker Lewis.
Comme l'écrivait Florentin, le support des technologies "avancées" HTML/CSS des clients mails tel que Outlook, Lotus Notes, etc. est très limité.
Nous sommes contraints d'utiliser des tableaux pour la mise en page et d'écrire les styles CSS directement sur le code HTML afin d'être sûrs que l'affichage de l'email soit correct sur tous les clients. Y compris Outlook 2007 et 2013, qui utilisent le moteur de rendu html de Word. Autrement dit, grosse ambiance dans le rendu CSS.
En pratique, voici à quoi peut ressembler un email.
Si vous souhaitez en savoir plus sur les joies de l'intégration d'email, jetez un oeil à la conférence "sortons l'intégration d'e-mails de la préhistoire" présenté par Rémi Parmentier lors du dernier Paris-Web.
Amélioration progressive
Sur le web, on peut faire de la dégradation élégante, c'est à dire partir de la version la plus aboutie sur les navigateurs performants pour ensuite se diriger vers une version élégamment dégradé sur les navigateurs les moins performants. Mais l'email nous oblige à faire l'inverse et utiliser uniquement l'amélioration progressive. En d'autres mots, partir de la solution la plus simple et la mieux supportée par les clients mails limités (desktop & webmail), pour ensuite l'améliorer sur les clients mails plus récent et performant (Apple Mail, Thunderbird...).
Pour plus de détails, vous pouvez jeter un oeil aux statistiques données par Campaign Monitor sur le support des technologies web.
Le cas de notre e-mail
Notre objectif était d'envoyer un email responsive utilisant des SVG, qui plus est animé.
Les tests
Notre périple à commencé ici, l'idée était simple : inclure un SVG dans un email, l'animer via des keyframes, et voir si ça fonctionne.
Résultat, l'animation fonctionnait bien sur Thunderbird, Outlook 2011 et Apple Mail.
Seulement, nous avions besoin que tous nos destinataires puissent recevoir un email qui s'affiche correctement, y compris, par exemple, avec Outlook 2000.
La mise en place
En gardant à l'esprit notre contrainte de compatibilité et d'amélioration progressive, notre email se composait de 5 images, incluses dans des tableaux qui s'adaptent à la largeur de l'écran en dessous de 600px de largeur.
A cette étape, nous avions un email statique, responsive et fonctionnel, seulement nous devions mettre en place nos SVG.
Ne pouvant jouer sur un "display:none;" / "display:block" entre les GIF et les SVG, dû à un mauvais support CSS, nous avons décidé d'ajouter notre SVG en background-image sur le wrapper de l'image GIF lorsque le support du client mail nous le permettait.
En pratique, voici comment nous avons procédé à la mise en place de cette petite ruse de coyotte.
Si on détecte que notre cible a un écran HD et que le moteur de rendu est Webkit, alors nous ajoutons notre SVG en background-image à notre wrapper contenant le GIF, ce dernier est caché via la propriété "visibility: hidden". L'objectif ? Cacher l'image tout en gardant son ratio pour pouvoir ajuster notre SVG, qui va s'adapter à la largeur du client mail.
L'animation dans tout ça...
Nos SVG mis en place, il était temps de s'attaquer à leur animation. Nous avons décidé de les animer via SMIL (Synchronized Multimedia Integration Language).
Notre choix s'est naturellement porté sur l'utilisation de SMIL, car nous ne pouvions pas utiliser de JavaScript pour animer le SVG e-mail oblige... Et comme nos SVG étaient intégrés en "background-image" nous ne pouvions les animer grâce aux @keyframes CSS.
Comme indiqué précédemment, nous avons décidé de cibler uniquement les navigateurs Webkit car le support d'animation SMIL sur un SVG servit en background-image n'est pas bon sur Firefox.
Dans l'exemple ci-dessus, notre texte contenu dans le tag <g>, va être animé en passant d'une opacité de 0 à 100, puis effectura une légère translation verticale.
Comme vous pouvez le voir, l'animation via SMIL est très simple, nous déclarons un premier tag "<animate>", nous lui indiquons sur quel attribut l'animation doit se cabler, ici "opacity", nous lui demandons de passer son opacité de 0 à 100 en 0.3 secondes et de garder sont état final (opacité à 100%). Parallèlement à ça, nous effectuons une seconde animation en utilisant le tag "<animateTransform>" qui cette fois effectuera une translation verticale de 0 à 50.
En prime grâce au SMIL nous avons la possibilité d'avoir une gestion d'enchainement des animations grâce à l'attribut "begin", de cette manière j'indique à l'animation de débuter une fois que la précédente animation "animationTitle2" est finie.
</html>
Et voilà, le résultat !
Notre email est fonctionnel sur nos clients mail cible, et propose une expérience utilisateur enrichie grâce aux animations de SVG, si le support nous le permet.