HTeuMeuLeu

Comment Gmail a arrêté de supporter les animations CSS

Le saviez-vous ? Jusqu’à il n’y a pas si longtemps, Gmail supportait les animations CSS. Enfin, en quelque sorte. Jusqu’en juin 2016, la version desktop du webmail de Gmail supportait les déclarations @keyframes en CSS. Vous pouviez donc déclarer l’animation suivante dans une balise <style> dans le <head> de votre e‑mail, et Gmail la gardait telle quelle.

@keyframes foo {
    from { background:red; }
    to { background:black; }
}

Lire la suite

L’accessibilité des e‑mails par l’exemple

On parle de plus en plus d’accessibilité dans les e‑mails ces dernières années, et c’est une très bonne chose. Mais je tombe toujours régulièrement sur plein d’e‑mails peu accessibles. En donnant des formations ou des conférences, je me suis rendu compte que montrer, et pas seulement expliquer, la différence que peut faire un e‑mail accessible était un excellent moyen pour sensibiliser des gens au sujet. Voici quatre conseils pour améliorer l’accessibilité dans l’intégration d’e‑mails, illustrés par des vidéos.

1. Toujours préciser l’attribut alt.

L’attribut alt de l’élément img est obligatoire depuis HTML 4. Cela signifie que chaque image d’un e‑mail doit avoir un attribut alt, même si celui-ci est vide (alt="").

Lire la suite

Outlook.com supporte désormais les images de fond en CSS

La nouvelle, rapportée par Justin Khoo chez Email on Acid, est aussi géniale qu’inattendue. Le webmail Outlook.com supporte désormais les images de fond en CSS. Cela inclut la propriété background, mais aussi ses déclinaisons background-image, background-repeat, background-size, background-position, background-color, background-origin, background-attachment. Et même (d’après mes tests) background-blend-mode.

Jusqu’à présent, la seule façon d’inclure des images de fond dans Outlook.com était via l’attribut background en HTML. Ça avait l’inconvénient d’obligatoirement répéter une image de fond et de ne pas pouvoir en choisir le positionnement ni la taille. Mais surtout de devoir être utilisé sur une <table> ou un <td>. Cette mise à jour de Microsoft (peut-être la plus importante d’un point de vue CSS depuis l’existence d’Outlook.com) est donc un pas dans la bonne direction, retirant une des dernières raisons d’utiliser des tableaux de mise en page dans les e-mails.

Corriger les problèmes de mises à l’échelle de Outlook (120 dpi)

Courtney Fantinato a donné une excellente conférence sur les problèmes de mises à l’échelle d’Outlook. (C’est ce qu’on retrouve communément dans Email on Acid ou Litmus sous l’appelation « Outlook 120 dpi »). Elle vient d’en faire un article très clair et didactique. En résumé, pour corriger les problèmes liés à des niveaux de mises à l’échelle personnalisés dans les Outlook sur Windows, il faut :

  1. Ajouter l’espace de nom de Microsoft Office sur la balise <html> : <html xmlns:o="urn:schemas-microsoft-com:office:office">.
  2. Ajouter la balise de définition des PixelsPerInch pour les images.
    <!--[if mso]>
    <xml>
      <o:OfficeDocumentSettings>
      <o:AllowPNG/>
      <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
  3. Utiliser des dimensions en pixels en CSS plutôt que via des attributs HTML. (Par exemple, privilégier <table style="width:600px;"> plutôt que <table width="600">.)

 

Les images de fond et l’application e-mail de Samsung

Excellente trouvaille par Courtney Fantinato : l’application e-mail de Samsung sur Android n’affiche les images de fond si et uniquement si on écrit l’adresse de l’image entourée de guillemets simples. Des guillemets doubles ou pas de guillemet du tout ne fonctionneront pas.

background-image: url('background.jpg');

Le tout nouveau guide du support de CSS dans un e‑mail

Campaign Monitor a mis à jour son colossal guide du support de CSS dans un e‑mail, qui n’avait pas été mis à jour depuis 2014. C’est une ressource absolument précieuse à consulter et partager.

Je regrette un peu la nouvelle mise en page que je trouve moins lisible.

L’e‑mail interactif de Microsoft qui ne fonctionne sur aucun client mail de Microsoft

Justin Khoo a repéré un e-mail interactif de Microsoft. Modernité oblige, l’interactivité en question en fonctionne sur aucun client mail de Microsoft (à l’exception d’Outlook sur Mac qui, utilisant le moteur WebKit, fait toujours figure d’exception).

Email Camera

Cet article est la retranscription d’une présentation donnée à Litmus Live 2017 à Londres le 29 août lors de la session #EmailHacks présentée par Kevin Mandeville. Vous pouvez trouver mes slides ici et la démo de « l’Email Camera » ici. Une version en anglais de cet article est disponible.

J’aime beaucoup les jeux vidéo. Je suis un grand fan de Nintendo, en particulier du Game Boy. (Oui, on dit un Game Boy.) J’adore le Game Boy. C’était ma première console quand j’étais petit. Et maintenant j’en collectionne plein.

En 1998, Nintendo sort le Game Boy Camera. C’est une caméra numérique montée sur une cartouche de jeu. Elle peut prendre des photos en quatre niveaux de gris dans une résolution de 128 × 112 pixels. Et elle comprenait des jeux, filtres et était compatible avec le Game Boy Printer. Le Game Boy Camera transformait le Game Boy en machine à selfie ultime.

Il y a quelques mois, je trainais sur le Slack des #emailgeeks. À un moment, Kevin Mandeville a mentionné le Game Boy Camera. Et Jacques Corby-Tuech a répondu quelque chose du genre : « Un Game Boy Camera dans un e-mail. »

Ça a immédiatement fait tilt. Il fallait que je fasse ça. Si quelqu’un devait faire un e-mail inspiré par le Game Boy Camera, il fallait que ce soit moi. En plus, j’avais déjà le sentiment qu’utiliser la caméra dans un e-mail était possible depuis que j’avais vu cette démo sur CodePen.

C’est une démo de colorisation d’image dynamique qui utilise la pipette colorimétrique système et qui permet de changer la couleur de la voiture dans la photo. Et ça n’utilise pas du tout de JavaScript. C’est juste du HTML et CSS. C’est possible en grande partie grâce à l’élément suivant.

<input type="color" />

Ce qui est bien avec un <input type="color">, c’est que ça utilise la pipette colorimétrique système. Et les navigateurs compatibles affichent généralement un aperçu de la couleur sélectionnée.

Un exemple de pipette colorimétrique dans Chrome sur macOS

En utilisant un peu de CSS et des sélecteurs propriétaires comme ::-webkit-color-swatch et ::-webkit-color-swatch-wrapper, on peut retirer les bordures et marges intérieures de l’élément. Puis, en appliquant encore quelques styles, on peut redimensionner cet élément en plein écran. Et puis on peut placer une photo en dessous. Et en utilisant la propriété CSS mix-blend-mode:hue, on arrive au résultat souhaité.

Qu’est-ce que ça a à voir avec des e-mails et le Game Boy Camera ?

Et bien, il s’avère qu’on peut faire quelque chose d’équivalent avec l’élément suivant.

<input type="file" />

Un champ de type file permet de déposer des fichiers sur le Web. Et il y a deux choses particulièrement chouette à son égard :

1. Sur iOS ou Android, on peut importer un fichier directement depuis son appareil, ou utiliser l’appareil photo directement depuis là où on est pour prendre une photo.
2. Sur iOS, après avoir pris une photo, on obtient une toute petite miniature de 18 × 18 px.

À nouveau, en utilisant des sélecteurs propriétaires comme ::-webkit-file-upload-button, on peut masquer le bouton « Choisir un fichier ». On peut aussi tronquer l’élément pour ne laisser visible que l’image, et l’agrandir en utilisant une transformation CSS.

Un peu plus tard, le jour où le Game Boy Camera a été mentionné sur Slack, j’ai posté la vidéo suivante.

Voici la démo complète disponible sur CodePen. Ça fonctionne bien dans Apple Mail sur iOS. Essayez et amusez-vous bien !

Le dernier bug d’Outlook.com (ou comment supprimer les marges sous les images)

Le mois dernier, Microsoft a introduit une nouvelle fonctionnalité dans Outlook.com et Office 365 qui a causé plein de problèmes aux intégrateurs et intégratrices d’e-mails. Il y a eu pas mal de discussions autour du sujet, que ce soit sur Slack ou les forums de Litmus. Ça m’a obsédé ces deux dernières semaines. Voici tout ce qu’il faut savoir sur ce bug et ma quête pour en trouver une solution.

Lire la suite

Faut-il arrêter d’écrire ses styles en ligne dans des e‑mails ?

Jusqu’à l’an dernier, Gmail était l’un des plus gros clients mail ne supportant (presque) que des styles en ligne. Les webmails de Yahoo, AOL, Outlook.com et, oui, même les versions d’Outlook (de 2007 à 2016 sur Windows) utilisant le moteur de Word supportent les balises <style> depuis longtemps. La mise à jour de Gmail en 2016 a tout changé en ajoutant enfin officiellement le support de balises <style> et d’attributs class et id. Alors en 2017, faut-il arrêter d’écrire ses styles en ligne dans des e‑mails ?

La question est réapparue le mois dernier quand Kevin Mandeville de Litmus a partagé son retour expliquant pourquoi Litmus n’a pas utilisé de styles en ligne dans sa première newsletter de l’année. Si ça a beaucoup de sens pour Litmus et leur audience, et s’ils ont fait un bon travail pour s’assurer d’un bon rendu dégradé, je ne suis pas sûr qu’il soit encore temps de recommander à tout le monde d’arrêter d’utiliser des styles en ligne.

Voici quelques points à prendre en compte, avec des pours et des contres.

Lire la suite