C'est l'avenir de la conception d'e-mails

On a beaucoup parlé du fait que la conception des e-mails était bloquée dans le passé. Les concepteurs qui s'attaquent à leurs premiers projets déplorent l'utilisation de tableaux et de styles en ligne. Les spécialistes du marketing qui préparent leurs premières campagnes refusent de penser au-delà de la mentalité de lot et d'explosion.

Mais quelques expéditeurs intrépides refusent de laisser les technologies (parfois) obsolètes et les mentalités entourant la conception des e-mails les retenir. Ils repoussent les limites de la conception d'e-mails, en utilisant des techniques couramment utilisées dans la conception Web avancée pour surprendre, ravir et se connecter avec leurs abonnés.

Jetons un coup d'œil aux défis associés à la conception expérimentale d'e-mails et rassemblons certaines de nos campagnes d'e-mail futuristes préférées.

Marketing par courriel en 2020 Préparez-vous pour l'avenir du marketing par e-mail avec les idées de 20 experts de premier plan, ainsi que les résultats d'enquêtes de milliers de spécialistes du marketing et de consommateurs. Télécharger maintenant

La conception des e-mails n'a pas à être limitative

Lorsque la plupart des gens pensent au marketing par e-mail, ils pensent aux newsletters lourdes et ennuyeuses envoyées par des entreprises cherchant à vendre quelque chose. Et, si vous êtes chargé de créer une campagne par e-mail, vous êtes probablement en train de regarder une pile de tableaux HTML et de CSS en ligne et de compter les minutes jusqu'à ce que vous ayez fini de pirater un e-mail qui fonctionne bien partout.

S'il est vrai que les fondements de la conception d'e-mails sont un peu vieux, il n'y a vraiment aucune limite à ce que vous pouvez faire avec eux, avec un peu de créativité, de planification et de nombreux tests. Oui, les concepteurs d'e-mails doivent utiliser des conceptions basées sur des tableaux (merci, Outlook !), des CSS en ligne et nager à travers une mer de hacks, mais, comme le montrent les exemples ci-dessous, vous pouvez toujours retirer des choses étonnantes dans la boîte de réception.

Pour le prouver, voici quelques-uns de nos exemples préférés d'e-mails qui enfreignent les règles et repoussent les limites de la conception d'e-mails.

Un Carrousel dans un email ?

Il y a quelque temps, le détaillant britannique B&Q a envoyé un e-mail qui a enflammé l'industrie.

Dans cette campagne, les utilisateurs peuvent survoler ou appuyer sur des boutons et regarder les différentes sections de contenu glisser en douceur dans et hors de l'e-mail. Communément appelée carrousel, cette technique a été largement utilisée dans le monde du Web, mais est rare pour les campagnes par e-mail. Certains peuvent se plaindre que les carrousels sont inefficaces et simplement pour le spectacle, mais la campagne B&Q est un excellent exemple de la façon d'utiliser des techniques de pointe pour surprendre les abonnés par e-mail.

L'e-mail utilise un certain nombre de propriétés CSS3, ainsi qu'un ciblage intelligent, pour effectuer sa magie. En utilisant des transitions CSS, des animations, un z-index et la propriété overflow, les concepteurs ont conçu un e-mail intelligent qui ne demande qu'à être exploité.

Ce qui est encore plus impressionnant, c'est que tout se déroule parfaitement pour les clients de messagerie qui ne prennent pas en charge ces techniques plus avancées.

Couleurs folles et Star Wars

L'agence de messagerie britannique Action Rocket est à la pointe de la conception d'e-mails depuis un certain temps. Avec leur résumé hebdomadaire intelligemment intitulé des actualités par e-mail, Email Weekly, ils testent des techniques créatives qui pourraient éventuellement faire leur chemin dans les campagnes client.

L'un de nos exemples préférés est leur e-mail qui posait la question « De quelle couleur est cet e-mail ? ».

À l'aide d'animations d'images clés CSS, ils animent les couleurs d'arrière-plan de la section d'en-tête, ce qui crée un effet hallucinant et fascinant. C'est subtil au début, mais une fois qu'un abonné a compris l'animation, il ne peut plus s'en détourner.

Un autre excellent exemple d'Action Rocket est leur récent résumé inspiré de Star Wars qui a utilisé la propriété expérimentale -webkit-perspective, ainsi que les transformations CSS, pour recréer l'exploration d'ouverture emblématique du film de science-fiction préféré de tous.

Des infographies dans un e-mail ?

Alors que le bloc d'affichage des agences de messagerie envoie systématiquement de bons e-mails, c'est leur récent e-mail infographique qui a vraiment attiré notre attention.

Semblable aux couleurs d'arrière-plan de l'exemple Email Weekly, le bloc d'affichage utilise des animations d'images clés CSS pour donner un peu de vie à une campagne déjà bien conçue. Ce qui est vraiment génial, c'est que l'e-mail est magnifiquement réactif, empilant bien chaque section sur les appareils mobiles. La conception réactive et les icônes animées servent toutes à améliorer de bonnes données sur l'utilisation de la messagerie mobile.

Nous n'avons pas vu beaucoup d'infographies comme celle-ci dans un e-mail, ce qui le rend d'autant plus impressionnant et révolutionnaire. Nous aimerions voir plus d'exemples d'infographies, c'est pourquoi nous organisons un concours communautaire qui leur est consacré !

Vidéo HTML5 et visites interactives

Nous aimons mettre en pratique ce que nous prêchons, c'est pourquoi nous rendons nos e-mails agréables et réactifs, malgré le fait d'avoir une audience principalement sur ordinateur. C'est aussi le raisonnement qui sous-tend certaines de nos propres campagnes d'e-mails de pointe, comme notre arrière-plan vidéo HTML5 de la conférence sur la conception d'e-mails de l'année dernière (que nous organisons à nouveau cet été…).

Notre concepteur, Kevin, a utilisé un ciblage avancé des clients de messagerie pour améliorer progressivement un design par ailleurs simple. Si vous êtes curieux de savoir comment il a réussi exactement, il a écrit un article de blog détaillant le processus.

Et, pour célébrer le lancement de notre éditeur de code de messagerie, Builder, il est allé encore plus loin en créant une visite interactive directement dans un e-mail.

En utilisant des animations CSS, le hack de la case à cocher et une utilisation libérale de la propriété de contenu CSS, il montre certaines des fonctionnalités de Builder directement dans la boîte de réception, donnant aux abonnés un avant-goût du produit sans même avoir à se connecter. Il y a beaucoup du code qui l'alimente, mais vous pouvez le vérifier directement dans Builder (un peu comme l'e-mail Inception).

Des menus par e-mail plus savoureux

À l'instar de l'e-mail carrousel, le designer Jerry Martinez s'est inspiré du Web pour mettre en œuvre un menu de hamburgers pour les abonnés mobiles.

Les éléments de navigation sont toujours une astuce pour les concepteurs d'e-mails, en particulier sur mobile. Comme ils ont tendance à occuper une place importante lorsqu'ils sont empilés, ils peuvent détourner l'attention de l'incitation à l'action principale d'une campagne. Pour résoudre le problème, Jerry a conçu un élégant menu de hamburgers qui permet aux utilisateurs mobiles d'afficher de manière sélective les éléments de navigation.

Nous avons été tellement impressionnés par la solution de Jerry que nous avons invité les gens à montrer d'autres modèles de navigation créatifs dans l'un de nos concours communautaires…

Concours communautaires : à la pointe de la technologie

Nos concours communautaires sont l'endroit où nous mettons vraiment les gens au défi de trouver des idées folles. Chaque mois, nous leur donnons un thème et les laissons étendre leurs compétences. Notre premier concours, portant sur les utilisations créatives du texte ALT, a donné des résultats étonnants, comme Space Invaders dans un e-mail :

Pour notre deuxième concours, des personnes ont proposé des modèles de navigation intéressants. Nous avons été époustouflés par certains des résultats, comme le concept de navigation gluant de Rémi Parmentier :

Essayer quelque chose de nouveau ?

Bien qu'il soit passionnant d'essayer de nouvelles choses par e-mail, beaucoup de choses peuvent mal se passer si vous ne testez pas vos campagnes de manière approfondie. Les aperçus d'e-mails facilitent le test de n'importe quelle technique dans les clients de messagerie de bureau, de messagerie Web et mobiles.

Essayez Litmus gratuitement →