Justin Khoo chez FreshInbox explique comment masquer une checkbox et un bouton radio dans un e‑mail. En résumé : il faut un display:none en ligne dans un attribut style. Mais il faut ajouter un !important sinon Gmail le filtre. Mais Yahoo filtre la propriété dès qu’il y a un !important. Donc il faut rajouter une classe et une règle dans une balise <style>.
C’est pour moi une illustration parfaite du jeu de la taupe qu’est l’intégration d’e‑mails. Du coup j’ai fait ce GIF animé.
La newsletter #emailweekly numéro 64 rend hommage à Satoru Iwata, PDG de Nintendo, disparu cette semaine. La version sans images est encore une fois excellente. Et le lien « View in Bowser » est un joli clin d’oeil.
Wistia a mis en ligne une conférence de Justine Jordan, directrice marketing chez Litmus : « The Hidden Talents of Email ». Je ne connaissais Justine que de nom, mais je suis conquis. Elle est drôle, intelligente, et elle livre une tonne de contenus et d’exemples intéressants en à peine une demi-heure. Et je suis émerveillé par la qualité des introductions des orateurs des conférences de Wistia.
Front Trends a mis en ligne la vidéo de la conférence de Mark Robbins, « Punched card coding – JavaScript functionality with CSS » (dont j’avais tweeté les slides). Il y explique la logique de création d’e-mails interactifs, avec notamment l’exemple d’un panier interactif complet utilisant 117 boutons radio.
Dans les questions/réponses, il explique qu’il y a passé trois mois, ce qui me semble un peu fou pour un e-mail. Mais c’est le genre de R&D qui permet d’apprendre des tas de choses (et du coup de faciliter la mise en place de cas plus simples).
Autre bonne nouvelle, il annonce à la fin de la vidéo que sa boîte est en train de travailler sur un équivalent de Can I Use dédié aux e-mails.
Nest a récemment envoyé des e-mails avec des slideshows interactifs :
Ils utilisent le même principe de détournement de checkboxes que j’utilisais dans mon exemple d’e-mail interactif.
Nicole Merlin a écrit un formidable article récapitulant les bonnes pratiques d’intégration moderne d’un e-mail optimisé pour mobile sans media queries. C’est, à peu de choses près, la façon dont j’intègre également des e-mails : colonnes en display:inline-block, commentaires conditionnels pour Outlook, et media queries pour ajuster la version desktop.
Le Journal du Net a publié les statistiques de consultation des webmails en France en mars 2015, telles que mesurées par Médiamétrie (j’en parlais un peu l’an dernier).
Litmus a mis en ligne il y a quelques semaines les vidéos de The Email Design Conference de 2014. La conférence Designing for Emotion in Email, par Jason Rodriguez et Kevin Mandeville, est visible gratuitement. Et ça tombe bien parce qu’elle plutôt chouette, avec plein d’exemples concrets.
J’ai particulièrement apprécié l’exemple suivant (à partir de 28m23s) :
Certains d’entre vous ont peut-être reçu cet e-mail de Fab. Ils ont littéralement envoyé un e-mail avec un chat.
Il n’y a rien d’autre dans cet e-mail. Nous aimons tous les chats mais… qu’est-ce que c’est ? pourquoi ?
Mais ils ont saisi l’opportunité de cette erreur. Et ils ont tenté de transformer ça en bienveillance de la part de leurs abonnés. La suite de cet e-mail contient aussi beaucoup de chats. Mais ils expliquent ce qu’il s’est passé. Et ils offrent à tout le monde 10 % de réduction sur tout le site.
Ils ont pris leur erreur, et ont créé cette opportunité pour eux. Et ils ont fait ça en reconnaissant qu’ils sont humains, qu’ils font des erreurs, qu’il y a bien quelqu’un qui envoie les e-mails et que ce n’est pas une espèce de machine géante. Et ça a créé cette connexion d’Homme à Homme.
Jason Rodriguez présente son reset de styles pour des e-mails. C’est plutôt complet et pertinent.
La version sans images de la newsletter #emailweekly numéro 13 est vraiment super, super, super cool. J’adore la transition provoquée par le chargement progressif des images entre les deux logos. Et j’adore le texte alternatif « Ahoy Mat’ey » qui n’apparaît qu’une fraction de seconde.
