Email marketing responsive : une méthode optimisée pour les mobiles

L’email marketing lu sur les mobiles prédomine

La newsletter est un outil marketing très utilisé depuis quelques années. Pour une entreprise, elle est un moyen extrêmement efficace de communiquer. Les gens s’y inscrivent régulièrement pour avoir des informations sur les dernières actualités d’un site, les derniers articles, les nouveaux produits de leur marque favorite, et bien d’autres encore.

Usant hier encore du simple langage html, l’email marketing est en passe d’opérer une profonde mutation. En effet, en 2013 plus de 80% des personnes qui possèdent un smartphone, utilise cet outil pour lire leurs emails.

A la vue de ce chiffre, il est clair que les entreprises doivent créer un emailing adaptable sur toutes les plateformes, et particulièrement les mobiles. L’enjeu est donc de taille. Aucune entreprise qui souhaite se faire connaître ne peut sacrifier ses clients avec un email marketing illisible sur un téléphone portable.

En 2012, le taux d’ouverture moyen des newsletters était de 30%. Si on rajoute à cela le fait que la newsletter est illisible sur un téléphone portable, l’entreprise court à la catastrophe. Peu de leurs abonnés prendront le temps de lire les informations envoyées. Pire, ils pourraient avoir envie de se désabonner totalement de la newsletter.

La façon dont s’affiche l’email marketing sur les mobiles (tablettes et smartphones) peut prendre plusieurs formes :

• l’affichage peut se faire au moyen d’une application mobile (comme le proposent Hotmail et Yahoo par exemple)
• l’email peut s’afficher grâce au logiciel installé sur le mobile
• l’email peut s’afficher sur le webmail

L’application pour la gestion des emails varie selon l’OS du mobile :

•  sur IOS, l’email adapte les visuels à la taille de l’écran
• sur Android, les images sont presque toujours bloquées et l’email n’est pas redimensionné.

Des solutions peuvent être mises en place pour éviter les problèmes d’affichage.

 

Emailing responsive : la méthode à suivre

L’email marketing adaptatif requiert l’utilisation de deux méthodes :

1)    Utiliser une feuille de style @media pour formater les styles et adapter l’affichage de la newsletter.

Pour cela il convient d’utiliser @media only screen and (max-device-width: 480px).

Cette feuille de style est prise en compte pour les tableaux uniquement, la taille de caractères s’adapte ainsi pour un écran de largeur inférieur à 480 pixels.

Exemple :

<style type= »text/css »>

    @media only screen and (max-device-width: 480px) {

        /* styles spécifiques au mobile */

    }

    /* autres styles éventuels ici */

</style>

 

2)    Sur IOS, la balise qui déverrouille le redimensionnement des caractères a au moins 13 pixels : -webkit-text-size-adjust:none

Voici une liste des principaux OS et leur compatibilité Media Query :

Amazon Kindle Fire : Oui

Amazon Kindle Fire HD :Oui

Android 2.1 Eclair : Non

Android 2.2+ : Oui

Apple iPhone : Oui

Apple iPad : Oui

Apple iPod Touch : Oui

BlackBerry OS 5 : Non

BlackBerry OS 6+ : Oui

BlackBerry Playbook : Oui

Microsoft Windows Mobile 6.1 : Non

Microsoft Windows Phone 7 : Non

Microsoft Windows Phone 7.5 : Oui

Microsoft Windows Phone 8 : Non

Microsoft Surface : Non

Palm Web OS 4.5 : Oui

Microsoft Outlook Exchange 3rd party app (Android) : Non

Gmail mobile app (toutes plateformes) : Non

Yahoo! Mail mobile app (toutes plateformes) : Non

 

S’il est très difficile de garantir un affichage identique sur tous les supports, on peut néanmoins tenter de systématiser une méthode d’intégration.

 

Intégration email responsive : recommandations et techniques pour le design

• L’email doit tenir sur une seule colonne (400 – 500 pixels). Cela évite de devoir scroller pour voir la fin d’une phrase.
•  Dans un email marketing, les principales informations doivent figurer dans les 200 à 300 premiers pixels. Ainsi, même si les gens ne lisent pas tout l’email, ils obtiennent l’information principale dès les premières lignes. A eux, ensuite, de voir s’ils souhaitent continuer la lecture ou non.
•  Prévoir des boutons et des liens adaptés à la  taille du doigt : 44*44. Il est toujours plus agréable pour les mobinautes de pouvoir cliquer une seule fois sur le bouton. Il est très fréquent que les boutons soient mal adaptés.
•  Eviter les éléments inutiles en mobilité (partage réseaux sociaux, page miroir…)
•   Prévoir une taille minimum de caractères de 13 pixels

 

Lors de la création de maquettes d’un email marketing responsive, il est préférable d’utiliser deux versions. L’une sera prévue pour le support d’un écran d’ordinateur. L’autre sera plus épurée car pensée pour le support mobile.

Un travail d’optimisation d’images pour le mobile sera sans doute nécessaire. Il est par exemple conseillé d’utiliser les images en arrière-plan pour les en-têtes dans la version mobile. Là encore, des affectations de style spécifiques à la version mobile permettront de donner un rendu spécifique pour des largeurs d’écran de moins de 480 pixels :

Exemple :

@media only screen and (max-device-width: 480px) {

… placez ici un style qui va définir l’image en arrière-plan uniquement pour la version mobile

}

La méthode d’emailing marketing responsive est donc une affaire de hiérarchisation et de spécifications de styles et de structure. Elle dépend entièrement du support utilisé pour lire la newsletter.

Il est conseillé d’appliquer autant que possible ces mesures de sélection. Cela permettra de garantir un affichage optimisé pour les nouveaux supports mobiles.