Responsive Design : faites rentrer vos emails dans toutes les cheminées

Il est inutile de vous rappeler combien il est important, lorsque vous concevez une campagne d’emailing, de vous assurer qu’elle s’affiche correctement sur l’ensemble des terminaux en circulation. Quel effet pourriez-vous avoir avec un email efficacement conçu mais difficilement lisible sur la moitié des smartphones existants ? Peu de chance en effet que vous ayez l’impact escompté ! Les chiffres parlent d’eux-mêmes. Aujourd’hui, 65 % des emails sont d’abord ouverts sur un appareil mobile. Et avec 75 % des lecteurs susceptibles de supprimer les emails qui ne s’affichent pas correctement sur leur écran, vous comprendrez l’importance de s’attacher au design de votre campagne pour qu’elle touche correctement votre lectorat. En un mot : il faut la concevoir pour qu’elle s’adapte aux différents environnements

Rien de bien sorcier pour autant. Quelques astuces simples sur la conception d’emails au format responsif peuvent vous permettre d’optimiser vos emails afin qu’ils puissent être lus correctement depuis tous types d’écrans, mobiles comme fixes.

 

Ne cherchez pas l’effet de style : restez simple !

Quand vous commencez à mettre en page votre email, la simplicité est de rigueur. Votre design global doit être simple pour s’afficher sur un maximum d’appareils et de résolutions d’écran différents. Simple est synonyme d’épuré : retirez tous les éléments inutiles de votre mise en page qui peuvent certes faire l’effet d’un sapin de Noël illuminé mais n’apportent rien dans les faits. Définissez les aspects essentiels de votre mise en page, et tenez-vous-y pour rester focalisé sur le message central de votre message.

Cela s’applique également à l’utilisation des images. Assurez-vous que votre email n’est pas encombré d’illustration ou de photos : restez clair, même dans le texte. Votre message doit être précis, s’appuyant sur des paragraphes courts et concis que les destinataires pourront analyser facilement et rapidement. N’hésitez pas à tester la quantité de texte adéquate pour votre lectorat, pour définir notamment la longueur à partir de laquelle vous perdez l’attention de vos prospects.

Dans l’email ci-dessous, diffusé par Square, les images et blocs de texte qui le composent vont droit au but. Le message clair et précis s’affiche simplement sur un appareil mobile et permet ainsi à son destinataire de le comprendre, même dans la rue ou à la caisse d’un magasin. A contrario, l’email d’Amazon, en utilisant de nombreux éléments différents – multiples tailles de police, liens, boutons, images …  –  n’est absolument pas optimisé pour un petit écran.

 

      

 

Adoptez une mise en page sur une seule colonne

Autre astuce s’appuyant sur un constat simple : la plupart des appareils mobiles actuels disposent d’un écran vertical et sont par conséquent utilisés verticalement. Difficile par conséquent d’afficher sur ces écrans des messages au design large. Les emails conçus sur plusieurs colonnes posent alors un problème d’affichage sur les écrans plus petits. Pour s’afficher pleinement, il faut alors rétrécir l’email jusqu’à ce qu’il perde toute lisibilité… Il y a alors de fortes chances pour qu’il soit effacé sans avoir été lu.

Pour remédier à cela, concevez vos emails sur une colonne unique. Vous vous assurez alors que les navigateurs et les services webmails affichent le contenu de vos emails correctement, en respectant la mise en page et les proportions. Un email en colonne simple offre les mêmes caractéristiques que les applications mobiles natives : l’utilisateur fait défiler le message vers le haut ou vers le bas, rendant son expérience plus simple et plus intuitive.

Exemples :

                                      

 

Cet exemple de Ryanair montre à quoi ressemble un email à multiples colonnes sur un écran plus petit. Le client email redimensionne automatiquement les images et le texte pour s’adapter à l’écran, mais cela rend l’email difficile à lire, contrairement à la newsletter de Product Hunt, qui utilise une colonne unique. L’email est facile à lire, même sur les supports mobiles.

 

                           

 

Rendez votre call-to-action clair et facile à déclencher

Un élément crucial lors de la création d’un email est le call-to-action (CTA), inséré pour encourager leurs destinataires à passer à l’acte en cliquant sur un bouton ou une image. Il est alors important, lors de son intégration dans le message, de prendre en compte les différents écrans et plateformes sur lesquels votre email pourra s’afficher pour assurer qu’il fonctionne dans la plupart des cas.

Cela suppose qu’il soit de taille respectable pour que vos clients ou prospects puissent facilement cliquer dessus, même à partir d’un écran de petite taille. Faites en sorte également qu’il se distingue du reste du message. Pour cela, appuyez-vous sur une couleur qui contraste avec le reste du message. Il sera d’autant plus facilement identifié.

Duolingo et Airbnb, par exemple, utilisent ci-dessous des « Call to actions » qui attirent l’œil et peuvent être activés quel que soit la taille de l’écran sur lequel leur message s’affiche.

      

 

Et surtout, n’hésitez pas à tester la création de vos campagnes avant de les déployer. Essayez plusieurs scénarios. Observez la mise en page sur différentes tailles et résolutions d’écrans. Vous serez ainsi en mesure de faire évoluer vos messages en fonction des premiers résultats pour assurer un meilleur affichage et, par conséquent, une plus grande efficacité. Selon la tradition, peu importe la taille de la cheminée : le Père Noël parvient toujours à déposer les cadeaux aux pieds du sapin. Pourquoi en serait-il différent pour vos campagnes ?