Litmus Snippets
Litmus lance une rubrique « Snippets », avec des bouts de code plus ou moins réutilisables à partager. C’est une bonne idée, et je suis agréablement surpris de la simplicité de certains exemples.
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
Le support de CSS pour des e‑mails interactifs
FreshInbox a sorti un tableau récapitulatif du support de CSS pour des e-mails interactifs. C’est vraiment une excellente ressource, avec plein de détails sur certaines bidouilles nécessaires pour faire fonctionner telle ou telle propriété. Et c’est surtout à jour (contrairement au guide de Campaign Monitor qui est en jachère depuis mai 2014), aussi bien en termes d’applications testées (avec notamment les applications mobiles de Yahoo ou Outlook) que de propriétés (avec notamment les transformations, animations et transitions CSS).
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
Protéger les navigateurs d’attaques CSS Cross-Origin
Je viens de tomber sur Twitter sur une étude de 2010 sur des attaques CSS Cross-Origin. C’est assez passionnant à lire. Et sans surprise, parmi les exemples d’attaques possibles, deux concernent des webmails : Yahoo et, à l’époque, Hotmail. Voici l’exemple de Yahoo :
Yahoo! Mail est un service populaire d’e‑mail basé sur le web. Ses cookies de session persistent jusqu’à deux semaines si les utilisateurs ne se déconnectent pas manuellement. Un attaquant peut voler des lignes de sujets et faire des requêtes de jetons falsifiés à partir des étapes suivantes :
- Envoyez un e‑mail avec comme objet :
');}- Attendez quelque temps que la victime reçoive d’autres messages.
- Envoyez un autre e‑mail à la victime avec comme objet :
{}body{background-image:url('- Invitez la victime à visiter attacker.com en étant connectée à Yahoo! Mail. La page d’attaque ressemble à la suivante :
<html> <head> <link rel="stylesheet" href="http://m.yahoo.com/mail"> <script> function steal() { if(document.body.currentStyle) { alert(document.body.currentStyle["backgroundImage"]); } else { alert(getComputedStyle(document.body, "").backgroundImage); } } </script> </head> <body onload="steal()"> </body> </html>Nous utilisons
background-imageplutôt quefont-familydans cette attaque pour illustrer la variété de propriétés CSS qui peuvent être utilisées. La page attaquante appelle la version mobile du site en chargeanthttp://m.yahoo.com/mailplutôt quehttp://www.yahoo.com/mail. Pour gagner de la bande passante, le site mobile a tout les espaces supprimés de son HTML, y compris les sauts de lignes. Cela permet à la portion de CSS de l’attaque de réussir dans plus de navigateurs, d’où le JavaScript détecte quelle méthode pour récupérer le style généré est supportée.Le fragment de HTML volé contient les lignes d’objets de chaque e‑mail envoyé à la victime entre les deux messages d’attaques. Il contient aussi un jeton caché, impossible à deviner, pour chaque message. Ces jetons permettent à l’attaquant de supprimer des messages via CSRF.
Ce type d’attaque était possible parce que les navigateurs interprétaient n’importe quel type de contenu (ici du HTML) lors de l’inclusion de styles. Ça a évidemment été corrigé depuis.
En tant que développeur ou intégrateur, c’est tentant de haïr Gmail, Yahoo ou Outlook.com parce qu’ils filtrent plein de propriétés CSS de base. Mais les conséquences de la moindre faille due à la moindre de ces propriétés seraient désastreuses pour les utilisateurs de ces services. D’un point de vue sécurité, je suis bien plus rassuré par un Gmail qui filtre tout que par des Orange ou SFR laxistes laissant place parfois à des choses aberrantes.
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
Comment masquer une checkbox et un bouton radio dans un e‑mail
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é.
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
EmailWeekly #64 et l’hommage à Satoru Iwata
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.
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
The Hidden Talents of Email
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.
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
Punched card coding
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.
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
Les e-mails interactifs de Nest
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.
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
Créer un e-mail responsive sans media queries
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.
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
Les statistiques des webmails en France en mars 2015
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).
- Orange (11,89, 25,8%) (12,442 millions, 26,8%)
- Gmail (11,24 millions, 24,4%) (au lieu de 3 en 2013, 8,637 millions, 18,6%)
- Outlook (8,9 millions, 19,3%) (au lieu de 2 en 2013, 8,966 millions, 19,3%)
- SFR (4,29 millions, 9,3%) (5,186 millions, 11,2%)
- Yahoo (3,95 millions, 8,6%) (5,185 millions, 11,2%)
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
Designing for Emotion in Email
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.
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
Revisiting Style Resets in Email
Jason Rodriguez présente son reset de styles pour des e-mails. C’est plutôt complet et pertinent.
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
La version sans images d’EmailWeekly #13
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.
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
Comment le poids d’un e-mail affecte la délivrabilité ?
EmailOnAcid a fait plein de tests pour comprendre comment le poids d’un e-mail affecte sa délivrabilité. En résumé : il est préférable de conserver le poids de son HTML sous la barre des 100 Ko, et le poids des images n’a pas d’importance.
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
Video in email
StyleCampaign fait le tour des solutions pour intégrer de la vidéo dans un e-mail (ou au moins faire semblant). Il n’y a pas de recette miracle, et le support des vidéos HTML5 dans les e-mails est encore anecdotique. Mais n’empêche que même avec un GIF (de 1,7 Mo, certes), certains font de chouettes e-mails.
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
Office 365 et ses nombreux caprices pour les designers d’e-mails
James White fait le tour des points vraiment pénibles de Office 365 (Outlook Web Access) pour l’intégration d’e-mails. Sa phrase d’introduction résume bien le sujet :
Après avoir creusé le sujet, j’en arrive à la conclusion que l’application Office 365 OWA est pire que Outlook 2007 ou 2013 en terme de support des standards.
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
Créer un design responsive centré sans media queries
Campaign Monitor explique comment créer un e-mail responsive propre, sans media queries, en se basant sur la propriété CSS display:inline-block plutôt que sur des tableaux.
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
How to Build Kickass Emails
Kevin Mandeville, de chez Litmus, a mis en ligne les slides de sa conférence « How to Build Kickass Emails ». C’est monstrueux (dans le bon sens du terme), et c’est très très complet. C’est même un peu drôle. Et sa page dédiée diffusée juste après la conférence est elle aussi (en plus d’être une excellente idée) bourrée de liens utiles.
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
What you can learn from Basecamp’s redesigned email newsletter
Campaign Monitor revient sur le nouveau design des e-mails de Basecamp. Comme souvent chez Basecamp, c’est simple et efficace. J’aime particulièrement l’objet de l’e-mail qui a généré le plus d’ouvertures.
Cet article est une archive du blog précédemment hébergé sur emails.hteumeuleu.fr.
CSS triangles
En février dernier, Mark de chez Email Code Geek expliquait comment créer des triangles en CSS pour des e-mails. C’est pas si différent que pour le web, à l’exception du code spécifique à Outlook.