Le design responsif n’est plus une question de “si” mais de “comment”. Et pas seulement pour les sites web. L’email mobile domine le marché, et si vous n’avez pas encore sauté dans le train de l’optimisation mobile, il est encore temps!

Notre dernière étude de marketing digital a révélé que près de 70% des professionnels de l’investissement lisent leurs emails sur un appareil mobile. Les larges emails conçus pour ordinateurs sont en général illisible sur ces écrans compacts, ce qui augmente les risques que votre email soit directement supprimé. Le design responsif offre une meilleure expérience utilisateur et maximise l’implication de votre audience – une priorité lorsque l’on envoie une communication.

Convertir des templates au responsif n’est pas une tâche facile, mais cela en vaut la peine. Lorsque l’on passe au responsif, il y a quatre étapes que notre équipe doit prendre en compte : Analyse, Redesign, Codage et Test, et enfin Formation et Déploiement. Nous vous invitons à appliquer ces étapes afin d’établir une stratégie concernant vos propres emails, et commencer à « penser responsif ».

Analyse
Avant de commencer, prenez le temps d’analyser la raison pour laquelle vous voulez créer une version responsive pour votre template d’email. Faites des recherches sur votre audience : Quelle part de vos contacts lisent leurs emails sur un appareil mobile? Quel appareil utilisent-ils? Analysez vos templates existant pour déterminer la part du design qui doit changer, et comment cela affectera vos directives en terme d’image de marque. Avant de commencer le travail il est également bon de savoir si vous disposez des compétences nécessaires au sein de votre équipe, ou si vous devrez sous-traiter ce service (et donc définir un budget). Tous ces détails doivent être réglés avant de passer à l’étape suivante du projet.

Redesign
Les email statiques, conçus pour un écran d’ordinateur, sont en général très larges (plus de 650 pixels) et ont une mise en page compliquée, ce qui fonctionne mal sur tablette ou téléphone : le texte devient illisible, les petits liens « uncliquables », et les utilisateurs doivent faire défiler le texte horizontalement (horreur!). Globalement, une très mauvaise expérience utilisateur. Mais nous allons remédier à tout ça.

Un design révisé, qui prend en compte les possibilités de la technologie responsive, est vital pour une compatibilité multiplate-forme. Lors de l’étape de redesign, vous devrez créer deux designs : une version représentant l’affichage sur ordinateur en gardant à l’esprit qu’il devra y avoir une version mobile , et une autre représentant l’affichage sur les petits écrans de téléphones et tablettes. Lorsque vous faites votre redesign, gardez les choses suivantes en tête :

  • Organisez votre contenu dans les blocs empilables
  • Placez les éléments de design importants dans le haut de votre email car le scrolling est plus difficile sur écran tactile qu’avec une souris
  • Débarrassez-vous de tout contenu superflu pour éviter l’encombrement sur petits écrans
  • Utilisez des call-to-action imposants et des boutons faciles à cliquer sur appareils tactiles
  • Créez un en-tête spécifique pour la version mobile si nécessaire
  • Agrandissez la police d’écriture pour améliorer la lisibilité
  • Gardez le design aussi simple que possible pour améliorer la vitesse de chargement
  • Assurez-vous que le design reste cohérent par rapport à votre image de marque.

Codage et Test
Une fois votre nouveau design terminé, il faut passer aux choses sérieuses: le code. Le codage d’email responsif peut être délicat car cela implique de repenser totalement le codage traditionnel. C’est en fait plus difficile que de coder un site web responsif. Tenez compte de ceci lorsque vous déciderez ou non de sous-traiter.

En codage d’email responsif, le « framework » représente un obstacle supplémentaire. Les frameworks web tels que Zend ou Ruby on Rails ne fonctionneront pas sur tous les services de messagerie, et à ce jour, il n’existe toujours pas de framework open-source absolument fonctionnel pour les emails responsifs. Chez StoneShot, nous avons créé notre propre framework responsif sur-mesure : c’est le seul moyen de garantir une fiabilité à toute épreuve.

Quelques conseils de plus: Blackberry v6 et Yahoo sont plus capricieux avec le code responsif et il vous faudra donc appliquer des modifications spéciales. Puisqu’un code trop chargé est plus long à envoyer et télécharger sur appareils mobiles, essayez de maintenir votre code aussi simple que possible et évitez les tables imbriquées.

Une fois le codage terminé, testez votre email rigoureusement sur tous les appareils et services de messagerie. Il est très probable que votre code ne fonctionne pas toujours parfaitement, alors ne rechignez pas avec l’étape de test !

Formation et Déploiement
Félicitations! Votre email a survécu à l’inquisition. C’est maintenant l’heure du lancement. Voilà un email responsif de fait, et beaucoup d’autres à suivre. L’étape suivante est de récupérer vos taux d’ouverture et de click et de les comparer à vos chiffres de référence.

En progressant dans le mode du design responsif, rappelez-vous toujours que vous travaillez dans deux environnements distincts : ordinateur et mobile. Gardez une optique « mobile » en tête lorsque vous créez votre design : lay-outs en block, contenu concis, code simple etc. Votre audience vous en remerciera.

Si vous avez besoin d’assistance pour l’une de ces étapes, StoneShot offre des services sur mesure qui satisferont vos besoins. Pour plus d’information, écrivez-nous à engage@stoneshot.com.