Concevoir des e-mails réactifs : Techniques de design
Par Campaign Monitor
Le truc, c’est que nous allons créer deux gabarits CSS pour la même newsletter : un gabarit qui passe bien dans les webmails et les clients de messagerie de bureau, et un autre qui peut être lu facilement sur les petits écrans des terminaux mobiles. Par exemple, voici un e-mail HTML dans Outlook :
Juste en dessous, le même e-mail chargé dans l’application Mail sur l’iPhone d’Apple. Comme vous pouvez le voir, il y a des différences significatives entre ces deux gabarits. La version mobile est plus épurée, elle est moins chargée visuellement et elle est aussi lisible qu’une version pour ordinateur. Cela est dû à l’utilisation de CSS spécifiques :
À titre de comparaison, l’image de droite montre la même newsletter sans la CSS spécifique. Vous voyez comme le texte est minuscule et illisible ? Eh bien, c’est comme ça que s’affichent des millions de newsletters reçues sur des terminaux mobiles.
Gabarits et éléments adaptés au mobile
Concevoir pour mobile, cela ne se limite pas à essayer d’écrire des CSS spécifiques pour le mobile. Il y a d’autres points à prendre en compte :
- Les gabarits à colonne unique d’une largeur maximum de 500 à 600 pixels fonctionnent mieux sur des terminaux mobiles. Ils sont plus faciles à lire, et en cas de problème d’affichage c’est généralement bien moins catastrophique.
- Les liens et les boutons doivent avoir une taille minimum de 44 par 44 pixels selon les recommandations Apple. Rien n’est moins pratique qu’une foule de liens minuscules sur des écrans tactiles.
- La taille minimum pour les textes est de 13 pixels. Gardez ceci en tête lorsque vous appliquez des styles sur du texte, car tout texte écrit plus petit sera agrandi et risque de détruire votre mise en page. Vous pouvez aussi passer outre ce comportement dans votre CSS (mais avec précaution).
- Avant tout, gardez un message concis, et placez les éléments importants en tête d’e-mail si possible. Il est plus difficile de faire défiler une page sur des kilomètres avec un écran tactile qu’avec une souris.
- Si possible, utilisez
display:none;pour masquer les éléments non-pertinents de votre mise en page mobile. Par exemple les boutons de partage sur les réseaux sociaux seraient sans doute très acceptables dans un client de messagerie pour ordinateur, mais ne sont pas toujours faciles à utiliser sur des terminaux mobiles.
Lorsque vous maquettez un e-mail HTML ou un gabarit, notre conseil est de créer deux ébauches ou deux structures : une pour le rendu dans un webmail de bureau et l’autre pour le mobile. Gardez en tête l’emplacement où votre bouton d’action va apparaître sur l’un et l’autre : est-il immédiatement visible quand l’e-mail est ouvert ? Ou le destinataire doit-il faire défiler la page afin de le voir ?
Maintenant que vous avez vu de quoi sont capables les feuilles de style pour mobiles, allons faire un tour dans le code.
« Concevoir des e-mails réactifs » est une série de huit articles :
http://www.campaignmonitor.com/guides/mobile/design/