Rouge Interactif

Email : repousser les limites imposées par les messageries

L’impressionnante progression de l’équipement de smartphones (déjà 55% de Français en possèdent et cela s’accélère : 5 téléphones vendus sur 6 sont des Smartphones !) et l’inversion des tendances en matière de lecture d’emails (23% sont ouverts sur un smartphone en 2014, +16% par rapport à 2013, -9% sur desktop) nous pousse à toujours mieux optimiser l’affichage des emails sur mobile.

Les technologies embarquées sur smartphone (HTML 5 et CSS 3 notamment) permettent de faire voler en éclats les standards imposés ces dernières années sur desktop.

Seulement voilà, après avoir attendu que le HTML 5 et CSS 3 soient standardisés, de grands acteurs du marché continuent de brider des fonctionnalités qui pourtant explosent en termes d’usage.

Rassurez-vous, il existe quelques astuces pour contourner ces limites en attendant que ces fonctionnalités deviennent compatibles !

Quelques explications :

Première illustration : l’email Responsive sur Gmail et Inbox

Gmail est le 2ème service de messagerie en ligne en France et bénéficie de la puissance d’innovation de Google : il y a quelques mois apparaissaient les rangements par onglets thématiques (principale, réseaux sociaux, promotions) et plus récemment Inbox by Gmail, qui promet de « simplifier la vie » de ses utilisateurs en proposant une autre façon de parcourir ses emails reçus.

Pourtant ni Gmail ni Inbox ne sont pas compatibles avec les « Media Queries », essentiels pour proposer un email Responsive, adapté au format d’affichage du Smartphone.

La solution de contournement : gérer l’email de façon « fluide », c’est-à-dire que l’email ne change pas de structure mais s’adapte en % à la largeur de l’écran en étant redimensionné.

Cela impose de fixer une largeur maximale pour l’affichage sur desktop puis de gérer le redimensionnement des blocs en pourcentage.

Exemple de code :
style = « width : 90%; max-width : 640px; height : auto; »

Deuxième illustration : la vidéo sur iOS

La dernière version de l’OS d’Apple (iOS 8) ne permet plus à l’application native (Mail) d’interpréter la balise vidéo HTML 5.
Résultat : impossible d’afficher et d’exécuter une vidéo à l’intérieur de l’email !

La solution de contournement : afficher un gif animé dévoilant une partie de la vidéo, la dernière image invitant à voir la suite en cliquant sur l’image.
Ensuite, il suffit d’envoyer le lien sur la vidéo hébergée sur YouTube ou de présenter la vidéo sur votre site pour inciter le mobinaute à continuer sa visite.

Comme on l’a vu, les restrictions techniques des supports sur lesquels vont être consultés les emails nécessitent de faire preuve d’imagination !
Google n’exclut pas de passer aux Media Queries*, et il est fort probable qu’Apple réintègre la balise vidéo dans une prochaine mise à jour de son OS, à surveiller donc.

Chez Rouge Interactif, nous aimons les challenges et nos équipes de développement apprécient particulièrement ce moment où, après une tape sur l’épaule, on leur soumet un nouveau défi !

Sources :

*http://www.emaildesignreview.com/email-industry-insight/google-inbox-ama-when-will-we-get-responsive-design-media-query-support-in-gmail-2377/

http://www.socialmedia-et-marketing.fr/infographie-chiffres-tendances-du-m-commerce-en-2015/

http://fr.slideshare.net/hubinstitute/hubday-mobile-marketing-association-barometre

http://pignonsurmail.typepad.fr/pignonsurmail/2015/02/ouverture-des-emails-en-france-en-2014.html