HTeuMeuLeu

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

Les webmails « préférés » des français en novembre 2016

Le Journal du Net a publié une nouvelle version de son classement des « webmails préférés des français », où par « préférés » ils veulent toujours dire « les plus utilisés ». Le dernier classement datait de mars 2015, et la comparaison est intéressante. Les mesures ont été prises en novembre 2016 via une mesure panel de Médiamétrie.

  1. Gmail, 12,8 millions de visiteurs uniques (contre 11,24 en mars 2015)
  2. Orange, 12,6 millions de visiteurs uniques (contre 11,9 en mars 2015)
  3. Outlook.com, 9,4 millions de visiteurs uniques (contre 8,9 en mars 2015)
  4. SFR, 4,4 millions de visiteurs uniques (contre 4,29 en mars 2015)
  5. Yahoo, 4 millions de visiteurs uniques (contre 3,95 en mars 2015)

Pour la première fois, Orange perd sa place de numéro un au profit de Gmail.

Quel doctype faut-il utiliser dans un e‑mail ?

Le doctype est la toute première ligne de n’importe quel document HTML. Mais savez-vous quel doctype utiliser et pourquoi ? Voici ma tentative d’expliquer tout ce qu’il faut savoir sur les doctypes pour des e‑mails HTML.

Lire la suite

Le démineur dans un e‑mail

Réalisé par Camille Palu de TABLE TR TD, ce démineur dans un e‑mail fonctionne vraiment (avec décompte du temps, écran de victoire…). Comme beaucoup d’e-mails interactifs, ça utilise principalement des cases à cocher, et ça ne fonctionne quasiment que dans Apple Mail. Mais c’est quand même un belle démo technique.

Gmail va supporter la balise <style>, les media queries, les classes et plein d’autres trucs

La nouvelle secoue la communauté des développeurs et designers d’e-mails depuis hier : Google va supporter le Responsive Design « plus tard ce mois-ci ». Ça signifie support des balises <style>, des media queries, des attributs class et id en HTML. Google a mis en ligne des pages pour expliquer le support de CSS, et aussi une liste des media queries et propriétés CSS supportées.

Et la liste est particulièrement intéressante, avec notamment des propriétés CSS avancées comme background-blend-mode, columns, mix-blend-mode, object-fit, object-position, …

C’est vraiment une excellente nouvelle, et un immense bouleversement dans le monde de l’intégration d’e-mails. Certains annoncent déjà la fin de l’utilisation des styles en ligne (au profit uniquement de la balise <style>) et des méthodes fluide/hybride ou la technique des Fab Four. Mais je ne pense pas, car il reste encore un paquet de clients e-mails ne supportant ni les balises <style>, ni les media queries. (Coucou le nouvel Outlook.com !)

Mes principales interrogations à l’heure actuelle sont les suivantes :

  • Quelles versions de Gmail seront concernées ? L’annonce de Google indique que ça concerne « Gmail et Inbox by Gmail ». Mais j’expliquais le mois dernier que le support de CSS dans Gmail est bien plus nuancé que ça. Est-ce que ça concernera aussi les versions de Google Apps for Work et les comptes tiers dans Gmail sur Android ?
  • Quid du support des valeurs en CSS ? Est-ce qu’on pourra toujours utiliser calc(), linear-gradient(), etc. Est-ce qu’on aura également toujours le support de sélecteurs comme :hover, :first-child, etc. ?

Réponse d’ici deux semaines.

Essayer de comprendre le support de CSS de Gmail

« Est-ce que ça fonctionne dans Gmail ? » est une question récurrente dans le monde de l’intégration d’e‑mails. Mais la réponse dépend vraiment de la version de Gmail que vous utilisez. Et ça peut être difficile à comprendre car il y a plein de facteurs à prendre en compte. Voici ce que je pense avoir compris jusqu’à présent.

Lire la suite

Accessibility in Email

Mark Robbins a commencé à écrire une série d’article sur l’accessibilité dans les e-mails. Il y a pour l’instant une introduction et un article sur la sémantique. Mark a également donné une conférence sur l’accessibilité lors d’un meetup Email On Acid Insights en début de mois. C’est un sujet important, et c’est bien qu’on commence à entendre parler comme ça.

Tout le monde sera bientôt sur le nouvel Outlook.com

Lu sur Twitter : d’après un tweet du compte @Outlook concernant le nouvel Outlook.com, « tout le monde aura migré d’ici la fin de l’été au plus tard ». Soit d’ici le 21 septembre. Aux États-Unis, tous les comptes sont passés au nouvel Outlook.com depuis la fin de l’an dernier. En France, les nouveaux comptes y sont par défaut depuis quelques mois. En mars dernier, je notais quelques points à savoir sur la nouvelle version d’Outlook.com.

« 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