QQ Mail : tests & avis

Récemment, nous avons eu l’opportunité grâce à un de nos clients d’accéder à une boîte de messagerie email chinoise : QQ mail. L’idée étant de vérifier un rendu email suite à un feedback utilisateur. Nous avons profité de cette chance pour mener une série de tests et vous donner notre avis sur ce client email !

QQ Mail, un logiciel compliqué à débugguer.

Lorsque l’on parle de clients emails, on pense tout de suite à Gmail, Outlook, etc.
Cependant, en Chine, un des plus gros acteurs du marché est QQ. Il est donc important de s’assurer du rendu de ses emails sur cet environnement si l’on souhaite communiquer vers ce pays.

QQ mail est un client email sur lequel il est très difficile de mener des tests pour des non-chinois. En effet, afin d’ouvrir un compte chez eux, il faut un numéro de téléphone chinois pour recevoir les code d’activation de login.

En cherchant des informations sur Google concernant des clients emails « classiques » (pour nous) comme Gmail, Outlook ou autre on trouve facilement des renseignements. Que ce soit sur leur fonctionnement, ou bien sur d’éventuels problèmes de rendus auxquels d’autres personnes ont déjà fait face et pour lesquels des réponses ont été apportées, au pire en anglais.
Par contre, on faisant de telles recherches pour QQ, les réponses pertinentes qui sont trouvées le sont… en chinois. C’est normal, et en même temps, cela ne simplifie pas la vie des intégrateurs qui ne comprennent pas la langue.

Bref, vous l’aurez compris, il est difficile de trouver des informations sur le client email QQ en français ou en anglais, et je suis heureux de partager le fruit de mes investigations avec vous.

Les propriétés CSS et attributs HTML

Au niveau des propriétés de bases, QQ mail se comporte très bien. Pas aussi bien qu’un navigateur, mais en terme de fonctionnalité HTML pour l’email, on est clairement dans le haut du panier.

Des propriétés CSS les plus classiques (border, margin, padding, height, width, …) en passant par celles dont le fonctionnement n’est que moyennement supporté (border-radius, min/max-width, min/max-height, …), jusqu’aux plus avancées (box-shadow, text-shadow, box-sizing, border-image, …), tout se comporte très bien.
La gestion des background-image est bonne, ainsi que le positionnement, même lorsque l’on utilise deux images de fond simultanément !

Presque toutes les propriétés de texte passent sans problème, même les choses un peu exotiques comme les writing-mode. Un des seuls text-decoration qui ne passe pas est le text-decoration: blink. Mais comme ce n’est déjà pas une propriété CSS qui passe sur tous les navigateurs, ne lui jetons pas la pierre, Pierre.

Images

Les formats classiques d’images pour l’email sont supportés : .jpg, .png, .gif (avec les gif animés), mais il est à noter que QQ supporte également d’autres formats comme le .webp et .svg !

Concernant les transformations avancées, elle sont en grande partie supportées. La propriété opacity fonctionne, ainsi que visibility et transform mais filter n’est cependant pas prise en compte. Avouons-le, cela reste tout de même exceptionnel pour un client email.

Couleurs

Ici, ça se complique un peu. En desktop, tout se passe bien ; les déclarations de couleurs peuvent se faire de presque toutes les manières possible : hexadécimal sur 3, 4, 6 ou 8 caractères (avec la gestion de la transparence), textuelle (exemple : h1 {color: red;}) , rgb, rgba, hsl et hsla. Bref, un support très complet aussi bien sur mobile que sur desktop.
Pour les background-color, le support des gradient est présent.

Le dark mode n’est pas pris en compte dans la version desktop. Le client email web desktop force le rendu clair.

spécificité mobile

En mobile, il y a quelques spécificités à noter. Il y a une classe .mail_reader .readmail_item_contentNormal :not(a) qui vient coller un color: inherit et un background-color: inherit sur certains éléments, ce qui gêne fortement le support des couleurs. À noter également pour le mobile que l’attribut bgcolor ne semble pas fonctionner.

Les propriétés background-color et color sont supplantées par un background-color/color: inherit sur certains élements comme des div, mais se comportent correctement sur d’autres comme les table.

Un contournement possible pour utiliser ces propriétés sur une div ou un td est d’utiliser un ciblage css ou un !important

Besoin d'aide ?

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

Je prends contact

Autre point embêtant, le dark mode. En mobile, le dark mode est assez mal géré, et a souvent provoqué dans mes tests des difficultés de lecture. Cela vient du même comportement décrit ci-dessus, qui remplace les couleurs de fond dans certains cas.

Donc quelques points gênants à noter pour le rendu des couleurs sur mobile, sachant qu’il existe des work-around. Mais les intégrateurs emails sont habitués à trouver des solutions à ce genre de comportement bizarres.

Sélecteurs CSS

Les sélecteurs CSS se comportent bien tant qu’on ne rentre pas dans des sélecteurs complexes. Les choses comme #id, .class, .*, element element, element, element fonctionnent correctement. Par contre, des sélecteurs comme element>element ou [attribute=value] ne passent pas.

À noter que si certains sélecteurs plus avancés comme [attribute] fonctionnent sur desktop, le support est légèrement moins bon sur mobile, mais tout reste OK pour des sélecteurs de base.

Concernant les pseudo sélecteurs, le support est tout juste moyen ; des sélecteurs comme :first-child vont fonctionner alors que d’autres comme ::first-letter ne fonctionneront pas. Et malheureusement, le hover ne fonctionne pas non plus (enfin si, sur mobile, là où ça ne sert à rien puisque vous n’avez a priori pas de souris pour survoler les éléments…).

Technologies avancées

Carrousel

Le carrousel ne fonctionne pas. Sans doute car les sélecteurs exotiques sur les input ne sont pas pris en compte. Ce qui en plus, sur desktop, décentre l’ensemble. Rien de grave, mais le rendu est juste un peu moins bon (en plus de l’absence de fonctionnement) en fonction du code de votre carrousel.

Vidéo et audio

La vidéo semble presque fonctionner, mais il y a un message d’erreur de type “No video with supported format and MIME type found’ issue” pour la vidéo. Est-ce une question de support (testé sur du .mp4 et .ogg)? Ou un problème de cookie et/ou de cache? Dans mes recherches j’ai lu que nettoyer les cookies et vider son cache pourrait résoudre le problème. Mais vu la difficulté d’accéder à une boîte QQ et le fait que cela nous forcerait à repasser par les étapes de login, je n’ai pas pu tester cette possibilité. Et de vous à moi, je pense que de toute manière, la vidéo dans l’email, ce n’est pas encore d’actualité…

Pour l’audio, même type de problème. Le player audio s’affiche correctement, mais rien ne se déclenche lorsque l’on appuie sur le bouton play.

Formulaires

Sans grande surprise, les formulaires ne fonctionnent pas (get, post, etc.), même s’il est à noter que l’affichage des balises formulaire est bon.

Font distante

Les typos exotiques de type Google fonctionnent correctement.

Ancres

Les ancres internes ne fonctionnent pas. les ancres externes, elles, fonctionnent correctement.

Commentaires Outlook

Les commentaires conditionnels Outlook ne posent aucun soucis de fonctionnement à QQ mail.

Conclusion et avis

QQ mail est très clairement un client mail facile à satisfaire. Son support des propriétés CSS est bien meilleur que le plupart des clients emails dont nous avons l’habitude, et les quelques soucis rencontrés sur mobile peuvent se contourner.
À noter que les applications IOS et Android n’ont pas pû être testées, leur comportement pourrait être encore différent !

Donc si vous devez prendre en compte QQ mail pour vos envois, gardez en tête le souci des couleurs sur mobile, et tout devrait bien se passer. Vous aurez plus de problème sur Outlook 😉