HTeuMeuLeu

« Thinking Outside the <table> » à The Email Design Conference 2016

Le mois dernier, j’ai eu l’honneur de donner une conférence à The Email Design Conference de Londres intitulée « Thinking Outside the <table> ». C’est un mélange de certains de mes précédents articles, comme Super Mail Forward, Flexbox dans un e‑mail ou la technique des Fab Four, mais avec une nouvelle narration et de nouveaux contenus.

J’ai publié mes slides bruts en anglais. Et voici une retranscription en français de ma conférence (une version en anglais est aussi disponible ici).


Je suis un intégrateur Web mais j’intègre aussi des e‑mails. La question qu’on me pose le plus souvent quand je dis ça à d’autres intégrateurs est « Comment va ta santé mentale ? ». Probablement parce qu’ils pensent à leur dégoût de devoir encore utiliser des tableaux pour faire de la mise en page, d’avoir à écrire des styles en ligne et autres bizarreries propres aux e‑mails. Mais je me suis toujours dit qu’il y avait bien plus à faire si on arrivait à dépasser ces premières impressions.

Aujourd’hui, je veux vous présenter trois exemples de choses que j’ai fait dans l’année passée qui illustrent ce qu’il peut se passer quand vous commencez à « penser en dehors de la <table> ».

Thinking Outside the table

Lire la suite

Est-ce qu’un e‑mail doit avoir le même rendu partout ?

Non.

C'est tout pour moi. Merci de m'avoir lu. Appréciez cet hommage à la plus grande réussite de Gmail en 2016.

C’est tout pour moi. Merci de m’avoir lu. Appréciez cet hommage à la plus grande réussite de Gmail en 2016.

Lire la suite

Accessible Email

Je l’avais posté sur Twitter en mars dernier, mais je le reposte ici parce que c’est important. Accessible Email est un outil gratuit en ligne permettant de vérifier l’accessibilité de vos newsletters.

How bigdog is revolutionizing marketing with interactive email

Campaign Monitor a publié en octobre dernier un article sur les dessous d’e-mails interactifs, et notamment celui-ci de PRET A MANGER que j’avais déjà repéré. J’adore voir le brouillon qui a servi à la conception initiale.

Un brouillon d'e-mail griffonné sur papier

Ce qu’il faut savoir sur la nouvelle version d’Outlook.com

L’an dernier, Microsoft a annoncé son intention de remplacer son webmail Outlook.com par une version équivalente à son autre webmail Office 365. Le mois dernier, Microsoft a précisé que cette nouvelle version d’Outlook.com était en cours de déploiement partout dans le monde. Si cette nouvelle version n’est pas encore déployée pour tous les comptes Outlook en France, vous devriez pouvoir y accéder en vous créant un nouveau compte @outlook.fr dès aujourd’hui.

La nouvelle version 2016 d'Outlook.com

Je teste régulièrement mes intégrations d’e‑mails sur ce webmail (et sa version Office 365) depuis un an. Voici un petit compte-rendu de mes observations, et des bonnes et mauvaises nouvelles que ce webmail apporte.

Lire la suite

Le positionnement absolu dans un e‑mail

Mark Robbins a partagé une technique très intéressante pour simuler du positionnement absolu dans un e‑mail, la propriété position:absolute étant filtrée un peu partout. En résumé : en utilisant des margin dans des éléments à taille nulle (avec un max-width:0; max-height:0), on arrive au même résultat.

La technique des « Fab Four » pour créer des e‑mails responsive sans media queries

Je pense avoir trouvé une nouvelle façon de créer des e‑mails responsive, sans media queries. La solution implique la fonction CSS calc(), et les trois propriétés width, min-width ou max-width.

Ou comme je me plais à les appeler une fois toutes réunies : les « Fab Four » (en CSS).

calc() & width & min-width & max-width.

Lire la suite

Snowball Surprise: Shaking the Email

Un exemple d’animation un peu kitsch mais amusante chez FreshInbox : comment « secouer » un e-mail en ajoutant une animation sur le conteneur principal d’un e‑mail.

Gmail App on Android tries to shrink your email with ‘munged’ classes

Le mois dernier, le blog Mosaico a fait un travail formidable de recherche dans le code source d’Android. L’auteur a découvert ce qui supposément peut être associé au comportement de Gmail forçant le redimensionnement d’e-mails.

Dans certains cas, Gmail va ajouter une classe .munged (en anglais selon Wikipedia, « une série de changements potentiellement destructifs ou irrévocables ») à toutes les <table> et <td>. Cette classe va appliquer un width:auto !important;, causant les dommages qu’on peut imaginer.

Super Mail Forward, cinq mois après

J’ai publié une traduction en anglais de mon retour sur la création de Super Mail Forward, un e-mail transférable évolutif. Cinq mois après, il y a deux changements principaux.

AOL a corrigé le bug de remplacement des images en background dans une balise <style>. J’ai donc trouvé une autre bidouille pour activer des styles sur AOL. Ou plus précisément, pour ne pas que des styles s’activent sur AOL. En fait, une balise <style> contenant une image de fond à l’URL non supportée (par exemple background:url('#');) sera totalement supprimée. Dans l’exemple suivant, ces styles s’appliqueront donc partout (ou presque), sauf sur AOL.

<style type="text/css">
   .step1 { background:url('#'); }
   .step1 .W { background:#fff!important; }
   .step1 .X { background:#f8d81f!important; }
   .step1 .Y { background:#d89f37!important; }
   .step1 .Z { background:#000!important; }
</style>

Microsoft a commencé à remplacer Outlook.com par le même webmail qu’Office 365 (aussi appelé Outlook Web App). Ce webmail ne supporte pas les sélecteurs d’attributs. Pour cibler des styles uniquement sur ce webmail, on peut donc écrire le sélecteur suivant…

<style type="text/css">
   [owa] .toto { … }
</style>

…qui sera interprété comme :

<style type="text/css">
   .rps_123a .x_toto { … }
</style>