Il y a du nouveau sur le webmail mobile de La Poste et son interprétation des media queries depuis mon précédent article. Mais ce n’est pas mieux pour autant.

Précédemment, je remarquais que le webmail mobile de La Poste supprimait systématiquement la première media query au sein d’une balise <style>, mais tout en conservant quand même les règles à l’intérieur de cette media query. J’ai remarqué cette semaine que ce problème avait été corrigé. La première media query n’est donc plus supprimée.

Mais, parce que forcément il y a un mais, celle-ci est désormais préfixée par le préfixe ajouté automatiquement par La Poste. Ainsi le code suivant…

.toto { background:red; }
.tutu { background:blue; }

@media only screen and (max-width:600px) {
	.toto { background:white; }
	.tutu { background:black; }
}

@media only screen and (min-width:320px) {
	.toto { color:white; }
	.tutu { color:black; }
}

… sera transformé par le webmail mobile de La Poste en :

.wrapper_h8ufTw .toto { background:red; }
.wrapper_h8ufTw .tutu { background:blue; }

.wrapper_h8ufTw @media only screen and (max-width:600px) {
	.toto { background:white; }
	.wrapper_h8ufTw .tutu { background:black; }
.wrapper_h8ufTw }

@media only screen and (min-width:320px) {
	.toto { color:white; }
	.wrapper_h8ufTw .tutu { color:black; }

Autrement dit, les règles contenues dans la première media query ne fonctionneront pas sur le webmail mobile de La Poste. Pour palier à ça, ma recommandation du précédent article fonctionne toujours : ajoutez systématiquement une media query avec une règle factice avant vos vraies déclarations :

@media only screen and (max-width:0) { 
	body { margin:0; } 
}

Au passage, j’ai remarqué deux autres points sur l’interprétation des styles par le webmail mobile de La Poste :

• Si un bloc de styles se termine par une media query, l’accolade fermante de celle-ci sera supprimée (cf exemple ci-dessus).
• La première règle suivant une media query ne sera pas préfixée.

Jolie trouvaille vue cette semaine sur Twitter : l’application E-mail par défaut d’Android (aussi connue sous le nom de « pas Gmail, l’autre ») affiche le contenu de la balise <title> dans les notifications du système.

J’ai réussi à reproduire ce problème facilement sur une Nexus 7 sous Android 4.4.2. Cela ne concerne que cette application, et que l’affichage en notification. Ce texte n’est retrouvable nulle part ailleurs une fois dans l’application.

Veillez à avoir un contenu de <title> pertinent pour éviter d’afficher un « Document sans titre » ou « Responsive template ».

Contrairement à d’autres webmails, la version classique d’Outlook.com ne se débrouille pas trop mal quand il s’agit de préfixer les règles CSS contenues dans un e-mail. Par défaut, toutes les règles CSS seront préfixées d’une classe .ExternalClass, et tous les noms de classes ou d’identifiants seront préfixés par ecx. Ainsi le code suivant :

.toto { background:red; }
.tutu { background:blue; }

@media only screen and (max-width:600px) {
	table[class="toto"] { background:white; }
	table[class="tutu"] { background:black; }
}

… sera transformé en…

.ExternalClass .ecxtoto { background:red; }
.ExternalClass .ecxtutu { background:blue; }

@media only screen and (max-width:600px) {
	.ExternalClass table[class="ecxtoto"] { background:white; }
	.ExternalClass table[class="ecxtutu"] { background:black; }
}

La classe .ExternalClass est alors judicieusement apposée sur une <div> contenant l’e-mail, et tout fonctionne comme si rien ne s’était passé. Jusqu’ici tout va bien, et on a presque envie de remercier les développeurs de chez Microsoft d’avoir fait correctement leur travail. Là où ça se gâte, c’est dans la version web mobile d’Outlook.com.

La version web mobile d’Outlook.com procède exactement au même renommage et préfixage des règles CSS que la version classique du webmail. Sauf que les développeurs ont oublié d’ajouter la classe .ExternalClass quelque part dans l’interface. Cela signifie que plus aucune de vos règles CSS n’est applicable. Si vous souhaitez optimiser des e-mails pour mobile pour Outlook.com, il est donc impératif de jouer uniquement avec des styles en ligne.

D’un coup, comme ça, on n’a plus tout à fait la même sympathie pour les développeurs de chez Microsoft.

Les statistiques des webmails et applications mail sont à prendre avec de très grosses pincettes. Quand vous tombez sur des infographies comme celle-ci ou celle-ci, il est important de comprendre comment ces données sont mesurées.

Pour mesurer son audience sur un site web, c’est facile. Il suffit d’installer un outil adéquat côté serveur (comme AWStats), ou d’utiliser un outil côté client (comme Google Analytics). Dans un e-mail, c’est plus compliqué car on ne peut ni accéder aux statistiques serveur de son fichier HTML une fois expédié, ni utiliser JavaScript. Ainsi, pour mesurer l’audience d’un e-mail, on va utiliser un mouchard, un fichier hébergé sur un serveur auquel on a accès, avec un ou plusieurs paramètres permettant d’enregistrer les informations qu’on souhaite obtenir.  La plupart du temps, on utilise simplement une image.

Le problème de cette méthode, c’est qu’on va comptabiliser uniquement les webmails et applications mail affichant les images (par défaut, ou après une action utilisateur). Facebook utilise  une balise <bgsound> en complément pour tenter d’atténuer le problème (notamment sur Outlook). Mais ce problème est particulièrement frappant quand on consulte des statistiques comme celles de Email Client Market Share, la petite page de données mises à jour par Litmus. Les trois versions d’Apple Mail, qui affiche par défaut les images, se retrouvent dans le top 5.

Et surtout, on remarque un bond spectaculaire dans l’utilisation de Gmail entre novembre 2013 (3,02 % de parts de marché) et janvier 2014 (9,5 % de parts de marché). L’explication est simple : en décembre 2013, Gmail a activé l’affichage des images par défaut.

En janvier 2014, le Journal du Net a publié un classement des webmails préférés des français (où par « préférés » ils voulaient surement dire « les plus utilisés »). On retrouve donc dans l’ordre le webmail d’Orange,  Outlook.com, Gmail, SFR, Yahoo (suivis de, non cités dans l’article original, La Poste et Free). Ces chiffres viennent d’une étude Médiamétrie réalisée en novembre 2013. Pour obtenir ces chiffres, Médiamétrie a réalisé ce qu’ils appellent une «mesure panel». Ils ont recrutés 22 000 panélistes représentatifs de la population française, leur ont fait installé un logiciel enregistrant leur navigation web, puis ils ont traités et redressés les données. Cette méthodologie peut laisser perplexe quand à sa fiabilité, mais même s’il ne faut pas prendre ces chiffres pour argent comptant, ça permet quand même d’avoir une petite idée du marché français.

Sur la version mobile du webmail de La Poste, il y a un bug important dans leur analyse des styles, et plus particulièrement des media queries. Peu importe le contenu de votre balise <style>, la première media query sera toujours supprimée. Et pire, les règles à l’intérieur de cette media query seront conservées, sauf la première qui elle sera totalement ignorée.

Concrètement, cela signifie que le code suivant…

.toto { background:red; }
.tutu { background:blue; }

@media only screen and (max-width:600px) {
	.toto { background:white; }
	.tutu { background:black; }
}

@media only screen and (min-width:320px) {
	.toto { color:white; }
	.tutu { color:black; }
}

… sera transformé par le webmail mobile de La Poste en :

.wrapper_h8ufTw .toto { background:red; }
.wrapper_h8ufTw .tutu { background:blue; }
.wrapper_h8ufTw .tutu { background:black; }
.wrapper_h8ufTw }

@media only screen and (min-width:320px) {
	.toto { color:white; }
	.wrapper_h8ufTw .tutu { color:black; }
.wrapper_h8ufTw }

Cela peut s’avérer très problématique, car on se retrouve avec des règles appliquées par défaut alors qu’elles devaient l’être uniquement dans une media query. (Vous apprécierez au passage le préfixage buggé évoqué précédemment.)

Pour éviter cela, on peut insérer une première media query, en prenant le soin d’ajouter quand même à l’intérieur une règle (sinon la media query sera ignorée, et le bug quand même présent). Attention, comme ce bug est bien spécifique au webmail de La Poste, cela signifie que cette media query sera interprétée par d’autres applications ou webmails. Il est donc impératif d’ajouter un code bidon qui n’aura pas d’impact sur les autres. On peut par exemple cibler un max-width:0.

En reprenant le code de l’exemple initial, on obtient alors le code suivant :

.toto { background:red; }
.tutu { background:blue; }

@media only screen and (max-width:0) { 
	body { margin:0; } 
} 

@media only screen and (max-width:600px) {
	.toto { background:white; }
	.tutu { background:black; }
}

@media only screen and (min-width:320px) {
	.toto { color:white; }
	.tutu { color:black; }
}

Le code final transformé par La Poste sera alors :

.wrapper_h8ufTw .toto { background:red; }
.wrapper_h8ufTw .tutu { background:blue; }

@media only screen and (max-width:600px) {
	.toto { background:white; }
	.wrapper_h8ufTw .tutu { background:black; }
.wrapper_h8ufTw }

@media only screen and (min-width:320px) {
	.toto { color:white; }
	.wrapper_h8ufTw .tutu { color:black; }
.wrapper_h8ufTw }

La Poste, Orange, SFR et Voila ont la particularité d’être basé sur une même plate-forme de webmail, développée par Atos Wordline. C’est plutôt pratique, sauf que ça signifie qu’ils partagent aussi les mêmes bugs de cette plate-forme. Et en l’occurrence certains plutôt rigolos.

La plupart des webmails qui ne suppriment pas les balises <style> préfixent les règles CSS afin d’éviter tout conflit avec le reste de la page. C’est le cas de ces quatre webmails, qui préfixeront systématiquement les règles CSS par #message. Donc si vous écrivez une règle .toto, elle sera transformée en #message .toto.

Jusque là, c’est plutôt simple. Mais ça se complique quand on commence à utiliser des media queries. Dans une media query, le préfixe #message est toujours appliqué, sauf pour la première règle contenue à l’intérieur de cette media query. Ainsi l’exemple suivant…

.toto { background:red; }
.tutu { background:blue; }

@media only screen and (max-width:600px) {
	.toto { background:white; }
	.tutu { background:black; }
}

… sera transformé en…

#message .toto { background:red; }
#message .tutu { background:blue; }

@media only screen and (max-width:600px) {
	.toto { background:white; }
	#message .tutu { background:black; }
}

Cela signifie que la première règle .toto à l’intérieure de cette media query ne sera jamais interprétée, car elle est moins spécifique que la règle préfixée par #message au dessus. Pour palier à ça, il est alors impératif d’utiliser une règle !important à la fin de la première règle surchargée dans une media query. Dans l’exemple précédent, ça donnerait :

.toto { background:red; }
.tutu { background:blue; }

@media only screen and (max-width:600px) {
	.toto { background:white !important; }
	.tutu { background:black; }
}

Là où ça devient rigolo, c’est quand on teste ça sur mobile. Parmi ces quatre webmails, La Poste est le seul à bénéficier d’une version optimisée pour mobile. Le comportement décrit précédemment est sensiblement le même, sauf que c’est une classe comportant un identifiant dynamique qui est utilisée, par exemple .wrapper_h8ufTw, au lieu de l’identifiant #message. Mais la particularité qui prête à sourire, c’est qu’à l’intérieure d’une media query, la dernière ligne correspondant à l’accolade de fermeture de cette media query est également préfixée. Dans des navigateurs modernes, ça n’a pas d’incidence sur le bon fonctionnement des règles. Mais ça donne le joli code transformé par le webmail suivant :

.wrapper_h8ufTw .toto { background:red; }
.wrapper_h8ufTw .tutu { background:blue; }

@media only screen and (max-width:600px) {
	.toto { background:white !important; }
	.wrapper_h8ufTw .tutu { background:black; }
.wrapper_h8ufTw }

L’application Outlook.com sur Android affiche un extrait de l’e-mail dans les vues de liste d’e-mails. C’est plutôt pratique, sauf que contrairement aux autres applications qui font ça, le contenu affiché vient toujours de la version texte de l’e-mail (même si l’application est elle-même configurée par défaut pour afficher les e-mails en HTML).

Il faut donc bien veiller, lors du routage, à avoir le contenu souhaité en tout premier dans la version texte de l’e-mail.

Bonjour à tous ! J’ai le sentiment que l’intégration d’e-mails est une tâche conspuée, traitée comme un sous-domaine de l’intégration.  Et pour cause : les applications mails et les webmails n’ont pas beaucoup évolué depuis le début des années 2000. Ou pire : ils ont évolué dans le mauvais sens.

Mais ce n’est pas une raison pour mal intégrer ses e-mails. Ce blog est une tentative d’expliquer le savoir-faire nécessaire à l’intégration d’e-mails, les horreurs obligatoires, les atrocités imposées par les webmails, … Mais aussi les choses qui m’amusent.