En 2017, le design réactif n’est plus une question de «pourquoi», mais de «comment». Et cette règle ne s’applique pas seulement aux sites internet. L’email mobile est constamment à la hausse, donc, si vous n’avez pas encore commencé l’optimisation de vos emails version mobile, il est temps de s’y mettre!

88% des conseillers pensent que le design réactif peut rendre les emails du monde de la finance plus efficaces !

Source: 2017 StoneShot Digital Marketing Survey

Cela peut sembler être une simple affirmation, mais en vérité,  les conseillers ont très peu de patience pour les emails qui ne fonctionnent pas de suite. En fait, s’ils ne s’affichent pas correctement, les chances de finir dans la corbeille deviennent elevées.

45% des conseillers de la finance suppriment immédiatement les emails qui ne s’affichent pas bien sur leurs mobiles.

Source: 2017 StoneShot Digital Marketing Survey

Notre dernier sondage sur le marketing numérique a révélé qu’environ 70% des professionnels de l’investissement vérifient leurs emails sur un mobile. Les grands emails de bureau sont généralement illisibles et désordonnés sur ces écrans compacts, ce qui met votre courrier électronique à risque d’être supprimé. Le design réactif offre une expérience utilisateur positive et maximise l’engagement du public – deux choses qui devraient être prioritaires lors de l’envoi d’informations.

La conversion des modèles d’emails existants en version mobile n’est pas simple, mais ça vaut le coup. Lorsque l’on convertis vers un modèle mobile, il y a quatre étapes que notre équipe considère: analyse, design, codage / test et déploiement. Nous vous invitons à utiliser ces étapes pour commencer à penser au design de vos propres emails.

Analyse

La première étape consiste essentiellement à « tâter le terrain ». Prenez le temps de comprendre le raisonnement derrière le design mobile-réactif d’un email existant. Analysez votre public: combien de contacts consultent leurs emails sur leurs mobiles? Quels mobiles utilisent-ils? Analysez vos emails existants pour décider de quelle façon ces derniers devront changer pour s’adapter et comment cela affectera l’image de votre marque.

Une autre grande question qui doit être répondu avant le début du travail est de savoir si les compétences requises pour concevoir et coder un email mobile-réactif sont disponibles en interne ou si vous devez externaliser le travail (et créer un budget). Tous les détails du projet devraient être finalisés avant de passer à l’étape suivante.

Design

Les emails statiques conçus pour être vu sur ordinateurs de bureau sont généralement très larges (650+ pixels), contiennent de petits liens et textes, et sont constitués de mises en page compliquées. Ces fonctionnalités ne se traduisent pas bien pour une utilisation mobile ou tablette puisque le texte devient illisible, les petits liens difficiles à cliquer et les utilisateurs devront se déplacer horizontalement (beurk…). Dans l’ensemble, cela crée une trés mauvaise expérience pour l’utilisateur.
Le design revisité, en tenant compte des capacités technologiques mobile-réactives, est essentielle pour une compatibilité toutes plateformes efficace. Au cours de la phase de re-conception, vous allez regrouper deux designs: une version de bureau conçue et pensée pour mobiles, ainsi qu’une version mobile et tablette optimisée spécifiquement pour les écrans plus petits. Voici quelques notions à considérer lors du design:

  • Arranger le contenu en « blocs empilables »
  • Placer tous les éléments importants dans la partie supérieure de l’email car le défilement est plus difficile sur un écran tactile qu’avec une souris
  • Ajuster uniquement le contenu le plus essentiel pour réduire l’encombrement inutile sur les petits écrans
  • Avoir des formulaires, des boutons et des liens compatibles avec écran tactile
  • Créer une bannière d’en-tête haute résolution spécifique au mobile si nécessaire
  • Augmenter la taille de la police pour faciliter la lecture
  • Garder un design aussi simple et propre que possible pour augmenter les vitesses de chargement
  • Assurez-vous que les nouveaux modèles sont toujours sur le thème de la marque

Codage et test

Avec les nouveaux designs mobile-réactifs en place, il est maintenant temps de se lancer dans les affaires: le code. Le codage d’email mobile peut être un défi car il implique un changement radical de pensée par rapport au codage traditionnel. Il est beaucoup plus difficile à coder qu’un site Web réactif, d’ou l’interêt de bien réfléchir lorsque vous décidez si ce travail sera fait en interne ou sous-traité.

Un autre obstacle au codage des emails est le framework. Les frameworks Web, tels que Zend et Ruby on Rails, ne fonctionneront pas dans tous les fournisseurs de messagerie, et jusqu’à présent, aucun framework d’email entièrement réussi n’a été publié. Chez StoneShot, nous avons créé notre propre framework de design mobile, car c’était le seul moyen de garantir l’exactitude.

Pour des détails techniques plus complets, consultez ce guide Litmus.

Une fois le codage terminé, testez rigoureusement votre email sur tous les périphériques et les fournisseurs de messagerie. Les chances sont que votre code ne fonctionnera pas parfaitement partout, alors mettez le paquet sur les phases de tests !

Déploiement

Félicitations! Votre email a survécu aux tests. Il est temps de le lancer. Un de fait, place aux autres ! La prochaine étape consiste à vérifier les taux d’ouverture et de clics de votre email et des les comparer à vos rapports précedent.

Dans le monde du design mobile-réactifs, gardez toujours en tête que vous travaillez dans deux environnements: le bureau et le mobile. Dès le début de la conception, gardez la version mobile a l’ésprit: disposition en blocs, contenu concis, code simple, etc. Votre public vous en remerciera!


Pour plus de conseils et d’infos sur la réussite du marketing mobile, jetez un coup d’oeil à ces articles:

Si vous avez besoin d’aide pour l’une des étapes de la construction d’un email mobile-réactif, StoneShot propose des services personnalisés pour répondre à vos besoins. Pour plus d’informations, envoyez-nous un email à engage@stoneshot.com