HTeuMeuLeu

How To Target Email Clients

« Comment cibler les clients mails » est un site mis en place par Dylan Smith avec une liste d’exemples fournie par Mark Robbins pour cibler les clients mails spécifiquement.

Gmail compte 1,5 milliards d’utilisateurs

Vu le mois dernier :

1,5 milliards de personnes utilisent Gmail chaque mois, et 5 millions d’entreprises payent pour utiliser Gmail au travail au sein de G Suite.

En 2016, c’était 1 milliard.
En 2012, c’était 425 millions.

Garfield Mail

Vu sur Twitter :

Aujourd’hui j’ai appris qu’avant Google, G-Mail était un service gratuit du site de Garfield pour des « emails with cattitude ».

Je découvre aussi et ça me fait bien rire. Comme indiqué dans le tweet, le site est toujours visible sur Archive.org.

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).