Avec la montée des téléphones mobiles – selon Litmus, l’iPhone est actuellement le premier client email, et Android est dans le top 5 – les emails sont de plus en plus adaptés aux petits écrans. Mais plutôt que de forcer un email à s’adapter aux mobiles, ne vaut-il mieux pas, lors du design de notre email, considérer les attentes des utilisateurs de mobiles avant tout?

Parmi les erreurs courantes lorsque l’on passe d’ordinateur à mobile, on peut trouver entre autres : un texte trop petit et illisible, des tailles d’images non adaptées, des boutons sur lesquels il est impossible de cliquer… Tout ceci rend l’expérience utilisateur plutôt mauvaise. Si l’on garde l’idée du mobile en tête, notre approche sera différente, et nos emails seront lisibles et cliquables quel que soit l’appareil sur lequel on les lit.

Il existe deux approches qui permettent d’optimiser un email pour les mobiles. La première consiste à construire l’email selon un design fluide et simplifié, qui fonctionnera sur tout type d’écran: c’est ce que l’on appelle un design fluide. La seconde permet de construire un email au design différent selon l’écran sur lequel il s’affiche: c’est le design responsif.

Les règles à suivre pour un design parfait sur mobiles

  • Augmentez la taille de la police: un minimum de 14 px pour le corps de votre email permettra une lecture facile, sans besoin de zoomer.
  • Examinez votre contenu: Avez-vous vraiment besoin de tous vos liens, images et texte ? Assurez-vous que votre email est concis, et ne l’alourdissez pas avec trop d’information.
  • Faites-vous remarquer: Liens et boutons “call to action” doivent être bien visibles et facilement cliquables. Augmentez taille de police et hauteur de ligne pour permettre au lecteur de cliquer facilement.

Pour un design fluide

Pour construire un email fluide sans peine, gardez votre design simple, et tenez-vous en à une colonne. Cela vous permettra d’avoir une structure simple qui fonctionnera sur tout support et avec tout client email, sans demander de compétences top avancées. Pensez également à inclure de larges images, titres et boutons.

Observez cet exemple de design fluide pour un email d’invitation à un événement:

Exemple de design fluide

Puisque l’information est contenue dans une seule colonne, le changement de format n’aura pas d’impact sur l’apparence générale de l’email. La police est lisible et les boutons et icones sont assez grands pour que l’utilisateur puisse facilement cliquer sur les liens. L’information est courte est concise, et l’email contient peu d’images.

Pour un design responsif

Si votre email contient plus d’information, son design en sera plus complexe et pourra contenir une deuxième colonne. Dans ce cas, un design responsif semble la meilleure option. Cependant, vous devrez avant tout envisager le design que vous souhaitez sur mobile. Dans un email comme celui-ci-dessous, la deuxième colonne devra passer sous la première, pour éviter à l’utilisateur de devoir scroller verticalement.

Exemple de design responsif

Ici aussi, les boutons et le texte sont bien lisibles, et le contenu s’empile proprement. Le design responsif permet aussi de remplacer certains éléments dans la version mobile. Observez l’en-tête de l’email: la bannière originale a été remplacée par une bannière optimisée pour mobiles.

En design responsif, le principal souci est que les emails ne sont pas toujours compatibles avec tous les clients emails, et vous devrez parfois repenser votre design. Testez scrupuleusement vos emails pour vous assurer qu’ils s’affichent parfaitement sur tout support.

Que choisir?

Avant tout, décidez quel type de design convient le mieux à votre email. Un design fluide sera parfait pour communiquer efficacement un message simple à votre audience: Par exemple une confirmation de participation a un événement, ou les dernières nouvelles de votre entreprise. Un design plus complexe sera utile si vous souhaitez communiquer plus d’information, comme par exemple une newsletter ou une invitation à un événement.

Tandis que le design responsif demande plus de temps, de ressources et de compétences, il reste la meilleure option car il vous offre plus de choix en terme de design. Mais si vous souhaitez vous en tenir à un email simple qui demande moins d’effort, alors le design fluide est pour vous ! Dans les deux cas, vous devrez parfaitement tester votre email, et vous assurer que votre message est assez clair pour impliquer votre audience.

Si vous souhaitez obtenir des conseils pour vos campagnes d’emails, contactez-nous à engage@stoneshot.com.