L’épineux problème du Responsive Design dans les emails : merci Gmail pour ce casse-tête non résolu

Email et design adaptatif sur mobile, une bataille toujours pas gagnée en 2024.

Salut, salut ! Aujourd’hui, nous allons plonger dans les abysses mystérieuses du responsive design pour les emails et autres newsletters. Comment ? Quoi ? En 2024 on en est encore à se poser ce genre de question ?

Et bien oui. Il s’agit d’un sujet qui, bien que complexe, mérite toute notre attention étant donné les volumes d’ouverture sur mobile. Promis cette fois-ci il ne sera même pas question de Microsoft Outlook. Ce dernier n’est pas le seul à nous jouer de mauvais tours. À ce jeu-là Google est très fort aussi, alors accrochez vous à votre siège car nous allons naviguer à travers les méandres des différentes versions de Gmail.

Le nœud du problème : quand Gmail s’en mêle

Lors d’un échange récent avec un client, un problème a été soulevé concernant un rendu inadapté sur mobile. Le souci ? Des media queries non prises en compte. Heureusement nous avions une piste pour débuter l’enquête :

“ Nous nous sommes aperçus que le nouveau template ne se comportait pas correctement sur Android Gmail en mobile. En effet, la taille de police est très petite, la largeur d’affichage correspond à la version desktop et non mobile. Nous n’avons pas ce problème sur iPhone. ”

Client inquiet du rendu Gmail mobile

Dans notre aventure du jour, notre protagoniste est donc bien Google (a.k.a. EvilCorp) et son service mail : Gmail. Le géant de la vallée, malgré sa stature de leader à la pointe du numérique, ne manque pas de nous donner des sueurs froides. La prise en compte du support de certaines propriété CSS diverge selon les contextes. Mais comment identifier le contexte ?

La quête des environnements : on peut se tromper de Gmail mille fois mais pas…

“J’ai un bug sur Gmail ! ” : si vous voulez faire pleurer un intégrateur email, prononcez ces mots sans aucune autre information.

C’est un peu comme dire “Mon navigateur ? C’est Google” (source : un tonton quelque part pendant un repas de Noël). Ici il n’y a pas de distinction entre l’outil et le service (ou l’entreprise).

Bref.

Gmail c’est avant tout un service de messagerie électronique fournis par Google. Gratuit pour les particuliers et payant pour un usage pro (Google Workspace). Ce service vous permet donc d’avoir une adresse email avec laquelle vous allez envoyer et recevoir des courriers électroniques.

Et comme Google est sympa (non ceci est une blague, personnellement je ne les trouve pas cool du tout), il propose un outil pour utiliser votre adresse email et “qué s’appelerio” un client de messagerie (ou client mail).

Vous me voyez venir ? Non, toujours pas ?

Et bien selon les contextes d’usages nous allons avoir le choix parmi les clients de messagerie :

• une version Web utilisable depuis un navigateur : Firefox, Safari, Chrome… (faites-moi plaisir installez ET utilisez Firefox), nous parlerons alors de webmail.
• des applications pour téléphone portable : une version pour les téléphones qui tournent avec Apple iOS et une autre pour ceux utilisant Google Android, le tout disponible dans le store ad-hoc (comme le capitaine)

Super, nous avons le choix des armes. Vraiment trop choupi, merci.

Sauf que chaque option fait l’objet d’un développement qui lui est propre et à ce jeu toutes ne sont pas égales. Ce qui rajoute une couche de complexité à notre puzzle.

À noter, le problème de responsive design constaté ne se pose pas sur les versions “bureau” (desktop), notre focus reste donc rivé sur les environnements d’ouverture mobile.

Des adresses email gmail pour Gmail ? Et bien non, ce serait trop simple voyons !

Pour définir le contexte, nous ne pouvons malheureusement pas nous fier qu’à un seul élément qui serait l’environnement d’ouverture.

Lorsque nous parlons d’ouvrir un email via Gmail, la nature de l’adresse utilisée joue un rôle crucial également :

• Une adresse personnelle Gmail : exemple@gmail.com ou un compte pro Gmail (Google Workspace) liée à un domaine
• Une adresse provenant d’un fournisseur de service mails qui propose l’option Gmailify (Yahoo! Mail ou Hotmail.com)
• Une adresse provenant d’un fournisseur autre

C’est en combinant ces différents cas avec les environnements d’ouverture que le véritable défi se dessine. Certaines configurations ne prennent toujours pas en charge les media queries, et pas seulement !

Source : interprétation en français de l’illustration présente dans l’excellent article en plusieurs épisodes de Rémi Parmentier sur le sujet Gmail. Si vous cherchez des explications techniques plus poussées, n’hésitez pas.

Les cas d’usage fâcheux : le style n’est pas pris en compte et le rendu n’est pas bon

J’imagine que vous avez déjà lu les articles cités en sources juste au-dessus ? Comment ça non ? Alors essayions de simplifier et d’aller à ce qui vous intéresse. Dans quel(s) cas allez-vous être embêté ?

Il existe principalement deux scénarios problématiques, le troisième tout en bas de la liste concerne du “legacy” que nous ne considérerons pas :

1. Une adresse Gmail ouverte via la webmail dans un navigateur depuis un smartphone
2. Une adresse non-Gmail ouverte via l’application Gmail sur un téléphone Android. Ce que les #EmailGeeks nomment GANGA

Si vraiment vous vous trouvez dans l’un de ces deux cas, c’est que vous cherchez les problèmes alors il y a de fortes chances que votre email ne s’affiche pas correctement. Il devrait fortement ressembler à la version “desktop” alors que vous êtes bien sur un smartphone. Et en plus il n’est pas impossible que certains styles (propriétés CSS) ne soient pas appliqués du tout.

L’impact réel sur mes campagnes : c’est grave Docteur ?

Spoiler alert: peut-être pas autant que vous l’imaginez.

Besoin d'aide ?

Lire du contenu ne fait pas tout. Le mieux, c’est d’en parler avec nous.

Je prends contact

Pour le savoir il faudrait déjà répondre à ces deux questions :

• Combien d’utilisateurs / abonnés de ma base cela représente ?
• Est-ce que cela empêche vraiment la consultation et l’action ?

Pour la première question, il n’y a malheureusement pas de données d’autorité fiables et consolidées à ma connaissance. Pour la seconde, cela ne devrait pas non.

OK, je vous entends ronchonner d’ici et vous êtes motivé pour essayer d’évaluer l’impact sur votre base d’utilisateur. Alors essayons de poser un petit problème de math :

Comment mesurer l’impact sur ma base ?

Prenons un exemple hypothétique :

Nous réalisons une campagne email envoyée à une base de données de 1000 adresses. Parce que nous faisons les choses super bien, notre taux d’ouverture est de 100% et avec une répartition égale entre desktop et mobile (50/50 je vous aide).

Parmi les ouvertures mobiles, imaginons que 35% seraient avec des adresses Gmail.

Questions :

• Combien d’adresses gmail ouvrent via la webmail gmail ?
• Combien d’adresses non gmail ouvrent via l’app gmail ?

Vous avez 5 minutes… pas plus…

C’est bon vous avez trouvé la réponse ?

Comment ? Vous ne parvenez pas à trouver la répartition dans votre outil de gestion de campagnes tip top dernier cri ?

Honnêtement est-ce bien grave ?

Vous pourriez supposer que la répartition est équitable et ce serait un biais important. Toujours est-il, le résultat est bien une part peu représentative. Vous feriez mieux de vous soucier de l’accessibilité de votre email ou de la rédaction du message en lui-même plutôt que d’investir du budget pour répondre à ce casse-tête technique.

Casse-tête qui va générer des patchs de code qui seront voués à disparaitre lorsque Google fera une mise à jour. Vraiment, lisez l’article de Litmus cité plus haut, le spongy hybride c’est loin d’être le futur !

La réponse reste floue et hasardeuse.

Comprendre les usages pour minimiser

Moi ce qui m’interroge vraiment, c’est de comprendre les usages. Pourquoi je consulte mes mails Gmail sur mobile depuis un navigateur ? Pourquoi j’utilise Gmail comme app avec une adresse autre que Gmail ?

Nous pourrions émettre plein d’hypothèses du style :

• je n’ai pas réussi à configurer mon compte Gmail via les options de messagerie par défaut de mon téléphone
• j’aime tellement l’app Gmail que je l’utilise avec mon autre adresse
• je consulte une adresse mail secondaire que je ne souhaite pas avoir dans ma boite principale
• …

Moi l’hypothèse que j’aime bien (parce que je suis vilain et tordu) serait la suivante :

Les équipes opérationnelles (marketeurs, designers, intégrateurs…) testent leurs campagnes et créent elles-mêmes ce contexte très spécifique. Pour faire des essais de rendu sur différents environnements d’ouverture sans passer par une solution comme Email On Acid ou autre, elles passent directement par leur téléphone pro ou perso. Téléphone qui a déjà une adresse principale configurée. Donc pour contourner et ne pas changer cette configuration, la solution est de tester via webmails ou via une app secondaire.

Un peu comme un annonceur qui fait du retail BtoC et qui teste tout en interne sur desktop Windows avec Outlook (mince j’avais promis que je ne le citerai pas, désolé c’est plus fort que moi).

Coucou l’allégorie de la caverne de Platon. Croire une réalité qui ne serait qu’une projection.

Vous n’êtes pas vos abonnés !

Vous n’avez pas le même usage dans le même contexte.

Arrêtons de perdre du temps et de faire des surcharges de code ou débauches techno-solutionnistes pour un problème qui n’existe que dans de très rares cas. Je suis sûr que vous avez des problèmes bien plus importants et urgents.