Concevoir des e-mails réactifs : Techniques de design

Par Campaign Monitor

Tout comme les nombreux concepteurs de sites qui ont une approche orientée design dans leurs projets, nous allons, dans ce guide, parler de l'aspect visuel des newsletters optimisées pour le mobile, avant de plonger les mains dans le code. Cela devrait vous aider à prendre les bonnes décisions la prochaine fois que vous planifierez une newsletter, et vous faciliter la compréhension des techniques dont nous allons discuter ensuite.

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 :

PNG - 251.5 ko

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 :

PNG - 153.1 ko

À 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 :

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 ?

PNG - 179.7 ko

Maintenant que vous avez vu de quoi sont capables les feuilles de style pour mobiles, allons faire un tour dans le code.

Fiche technique

À propos de l'auteur

Campaign Monitor est une plate-forme d’e-mailing créée en 2004 par Ben Richardson et David Greiner, gérants d’une société de Web Design, à la suite de nombreuses demandes de la part de leurs clients pour gérer des campagnes d’envoi d’e-mails. Après avoir fait le tour des solutions existantes sur le marché, ils ont décidé de créer l’outil qui correspondait à leurs besoins.

Aujourd’hui, plus de 700 000 designers, agences et autres sociétés utilisent Campaign Monitor et de nouveaux clients les rejoignent régulièrement.
Ils continuent à ajouter de nouvelles fonctionnalités à leur produit et à le peaufiner mais leur objectif premier reste le même : rendre plus facile pour quiconque l’envoi et la gestion de jolies newsletters.

Articles du même auteur

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Web Mobile

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site