Pourquoi rendre votre emailing responsive?
C’est un fait.
Les smartphones et tablettes ont totalement révolutionnés notre mobilité et cela impacte l’ensemble de nos habitudes de consommation d’Internet. En moyenne, nous consultons notre smartphone 150 fois par jour pour, en autre, vérifier notre boîte de messagerie : 45% des emails sont ouverts via nos téléphones ! C’est donc un point crucial à prendre en compte lorsque vous préparez votre campagne emailing ; ces derniers doivent être adaptés pour s’afficher correctement sur ces appareils mobiles.
En effet, si votre emailing ne s’affiche pas correctement sur mobile, 80% des destinataires l’effacent aussitôt et ils sont 30% à se désabonner. Vous comprenez donc l’urgence à vous adapter !
Et effectivement les avantages sont nombreux. Grâce à un emailing responsive vous pourrez :
- Améliorer votre taux d’ouverture. En effet, selon une étude réalisée par MarketingProfs, les emails responsive ont un taux d’ouverture supérieur de 21% !
- Développer vos ventes: 63% des destinataires sont plus décidés à acheter votre produit/service si le mail est affiché correctement.
- Et donc booster votre taux de conversion
- Réduire les désabonnements (voir les statistiques au-dessus)
Comment passer votre emailing en responsive?
Vous devez penser « responsive » lors des deux étapes de création de votre emailing.
** Le design **
Outre les aspects d’un emailing classique, il faut avant tout bien penser à l’expérience utilisateur. La navigation et l’ergonomie d’un emailing responsive doivent prendre en compte les spécificités des mobiles :
- Largeurs plus restreintes avec un affichage en format portrait ou paysage
- La souris est remplacée par le doigt donc cela impacte les éléments cliquables : pour vos boutons call-to-action, privilégiez une taille minimale de 44 x 44px et pensez à laisser plus d’espace autour des éléments pour permettre au doigt de « toucher ».
- Une seule colonne pour afficher le contenu
- Une typologie plus grosse : minimum 14 px pour le texte et 22 px pour les titres
Bien entendu, vous devez également prendre en compte les règles plus « classiques « qui s’appliquent à tous les template d’emailing.
- Le design doit être simple tout en captivant l’attention de l’internaute pour l’amener à lire l’intégralité du message. On estime que vous avez 8 à 10 secondes pour charmer le lecteur avant qu’il ne quitte votre emailing, soyez efficace !
- Les call-to-action doivent être présents et mis en avant pour servir l’objectif que vous vous êtes fixé !
- Faites attention à votre contenu. Vérifiez bien les erreurs grammaticales ou les fautes d’orthographe. Faites-le également relire pour vérifier sa bonne compréhension et sa fluidité.
- Concernant les images, la première précaution est de respecter un ratio texte/image de 60% d’images et de 40% de textes. En effet, certaines messageries bloquent les images donc il faut que votre emailing conserve un intérêt et une tenue même si ces dernières ne s’affichent pas. Enfin, bien entendu, il faut veiller à réduire la taille de vos images pour optimiser le temps de chargement.
** Le codage **
Pour vous simplifier le côté technique, il faut vous dire qu’un email responsive c’est le savant mélange d’une technique moderne associée à du code vintage !
- La technique moderne : on évoque la déclaration @media only screen and (max-width: 640px). Insérée dans vos balises <head> cette fonction va « demander » au navigateur d’afficher une mise en page précise si le terminal fait moins de 640px de large.
- Le code vintage : code organisé sous forme de tableaux HTML
Vous trouverez ci-dessous une liste des recommandations usuelles pour une bonne intégration de votre emailing, en intégrant certaines recommandations propres au responsive :
Mettez en forme votre contenu dans des tableaux HTML
- Utilisez le css inline car tous les clients mail ne prennent pas en compte les balises <style> se trouvant dans la section <head>
- Limiter la largeur de votre email à 600 pixels
- Banissez les images de fond
- Bannissez les formulaires
- Evitez les balises display ou float car elles ne sont pas prises en compte sur toutes les messageries.
- Renseignez les balises ALT de vos images pour être sûre qu’il y aura un texte de remplacement si les images ne sont pas affichées par le système de messagerie.
Et bien entendu, testez encore et toujours le rendu sur les différents supports en vérifiant si possible quels sont ceux les plus utilisés par votre cible !