Le guide ultime de la conception de courrier électronique
Alors que beaucoup de communications en ligne ont été transférées vers les médias sociaux, le courrier électronique reste une partie très importante de toute campagne de marketing en ligne. Et quand on pense aux e-mails marketing, on pense généralement au courrier électronique HTML plutôt qu’au texte brut.
Concevoir pour le courrier électronique est un peu comme concevoir une simple page Web, mais vous devez tenir compte de certaines différences clés. Vous devez également garder à l'esprit que le courrier électronique est un moyen de communication plutôt que de communication.
Les gens reçoivent souvent des e-mails à un rythme écrasant, et pas toujours lorsque cela leur convient. Cela signifie que vous n'avez qu'une fraction de seconde pour attirer leur attention avant de passer au message suivant dans leur boîte de réception (contrairement à un site Web qu'ils ont choisi de visiter à un moment donné).
Mais tant que vous gardez cela à l'esprit, à savoir que vous n'avez qu'un instant pour attirer l'attention de votre lecteur, vous aurez une expérience beaucoup plus facile et plus fluide dans la conception de courriels efficaces.
Mobile ou buste
Tant de personnes accèdent aux courriels depuis un appareil mobile (près de la moitié des courriels sont ouverts dans les applications mobiles), il est inutile de passer beaucoup de temps à concevoir de beaux courriels qui ne s’affichent pas correctement sur ces appareils.
Après tout, si l’e-mail ne semble pas correct lorsqu’il le vérifie sur son téléphone, quelles sont les chances que vos abonnés le regardent à nouveau au bureau? Je parierais assez mince. En fait, la plupart d'entre eux vont probablement supprimer le courrier électronique, ou pire, se désinscrire.
Il y a deux façons de concevoir la conception pour mobile. Vous pouvez créer des e-mails qui sont redimensionnés pour s'adapter à l'écran du lecteur, ce qui peut parfaitement convenir à certains designs simples. Ou vous pouvez créer une conception de courrier électronique réactive qui s'adaptera à différentes tailles d'écran.
Les deux approches présentent des avantages et des inconvénients. Les e-mails redimensionnés sont assez faciles à coder et ont tendance à fonctionner sur pratiquement tous les périphériques. Mais ils fonctionnent mieux avec des conceptions de courrier électronique très simples qui peuvent être consultées à des tailles nettement inférieures à celles des postes de travail.
Les conceptions réactives sont beaucoup plus complexes à coder et ne sont pas prises en charge par tous les navigateurs mobiles (bien que le support devrait continuer à s’améliorer à l’avenir).
Design réactif
Les conceptions réactives sont susceptibles d'être plus pratiques pour la plupart de vos e-mails HTML que les mises en page simplement redimensionnées. En effet, sur de très petits écrans, les e-mails simplement rétrécis deviendront certainement très difficiles à lire.
Nous avons déjà discuté de l'importance des e-mails mobiles, mais voici quelques points à prendre en compte lors de la conception de ces e-mails. Ce sont les éléments qui doivent être déclenchés pour les mises en page mobiles et peuvent être adaptés aux versions grand écran de vos e-mails.
- Votre mise en page devrait être assez étroite: quelque part dans la gamme de 500 à 600 pixels est standard. Cela les rendra plus lisibles à la fois sur les ordinateurs de bureau et les appareils mobiles, avec moins de chance que votre mise en page soit complètement redimensionnée.
- Assurez-vous que vos polices sont suffisamment grandes. Soyez conscient de la taille minimale des polices pour différentes plates-formes afin que vos polices ne soient pas mises à niveau (ce qui pourrait affecter votre mise en page). Par exemple, iOS utilise une taille de police minimale de 13 pixels.
- Les zones cliquables doivent être faciles à utiliser. Cela signifie les rendre suffisamment grands et isolés des autres liens pour qu'un utilisateur puisse facilement les activer dès le premier essai (car vous risquez de ne pas en avoir une seconde).
- N'hésitez pas à utiliser display: none pour cacher des éléments inutiles sur vos mises en page mobiles. Ce qui est convivial sur un ordinateur de bureau ou même une tablette devient un fouillis gênant sur un smartphone. Moins est certainement plus sur les écrans plus petits.
Il est utile de prendre le temps de dessiner des wireframes pour vos versions de messagerie mobile et de bureau avant de commencer à coder. Portez une attention particulière à l'endroit où votre appel à l'action et d'autres informations importantes apparaissent sur la version mobile en particulier.
Considérations typographiques
Bien que de nombreux concepteurs se concentrent sur le contenu graphique des e-mails HTML, la typographie est encore plus importante que sur de nombreux sites Web. Après tout, compte tenu du nombre de clients de messagerie empêchant le chargement des images au départ, certains destinataires de vos e-mails peuvent ne voir que la typographie.
Envisagez d'utiliser des formats de grand format pour une meilleure lisibilité, quelle que soit la taille de l'écran. Gardez également à l'esprit les longueurs de ligne sur différentes tailles d'écran et assurez-vous qu'elles ne sont pas trop longues (ce qui peut compliquer le déplacement de l'œil d'une ligne à l'autre sans perdre sa place) ou trop courtes plus de défilement nécessaire).
Veillez à utiliser des en-têtes et autres mises en forme typographiques pour rendre votre contenu de courrier électronique plus lisible, en particulier si vos messages contiennent plus de deux paragraphes.
Dans l'ensemble, la typographie par courrier électronique n'est pas très différente de la typographie Web en général, en plus de la partie mentionnée précédemment, selon laquelle il est plus probable que vos lecteurs voient la première et / ou la seule chose.
Différents e-mails à des fins différentes
Il y a beaucoup de différents types de courriels que vous envoyez vers vos listes d'abonnés (ou de conception pour les clients). Chacun remplit son propre objectif et chacun doit être conçu de la manière la plus appropriée.
Lettres d'information
L'un des types de courrier électronique les plus courants est la newsletter. Celles-ci consistent souvent en de nombreux liens, souvent accompagnés de courtes parties de texte, ou en des articles plus longs. Dans les deux cas, il y a de fortes chances qu'il n'y ait pas un seul appel à l'action présent et, au lieu de cela, il peut y avoir quelques liens à cliquer.
Cela représente un défi unique, car les concepteurs et les créateurs de contenu doivent encore décider d'une sorte de priorité ou de hiérarchie pour le contenu de l'e-mail. Dans de nombreux cas, cela signifiera un article ou un lien présenté pour attirer le lecteur, avec un contenu supplémentaire moins important.
Plastyk a un super design de newsletter qui est amusant et engageant.
Les notifications
Un autre type de courrier électronique commun est le courrier électronique de notification, également appelé courrier électronique de déclenchement. Pensez aux courriels que Facebook envoie lorsque quelqu'un vous envoie une demande d'ami ou Twitter lorsque quelqu'un vous suit. Bien que les e-mails de notification puissent également être des annonces. Ces e-mails sont des notifications, mais ils sont également destinés à déclencher une action de votre part (dans ce cas, vérifiez votre compte). Ces courriels sont généralement très courts et pertinents, avec un appel à l'action audacieux.
Voici un email d'annonce de Labs appropriés.
E-mails transactionnels
Les e-mails transactionnels sont envoyés lorsqu'un utilisateur interagit avec un site Web ou une entreprise d'une manière ou d'une autre. Cela peut être un achat ou une inscription ou quelque chose comme lorsqu'un utilisateur abandonne son panier sans effectuer de transaction. Ces e-mails servent à fournir des informations (dans le cas d’une confirmation de commande) ou à attirer le visiteur (comme avec un panier abandonné).
Voici un bon exemple d'e-mail transactionnel de Chat à un œil C'est un bon exemple de la façon dont les entreprises physiques peuvent utiliser le marketing par courrier électronique.
E-mails marketing
Les e-mails marketing sont envoyés lorsqu'une entreprise souhaite que vous fassiez affaire avec eux. Celles-ci pourraient vous informer d'une offre spéciale, d'un nouveau produit ou de quelque chose de similaire. Ce sont souvent les e-mails qui intègrent le plus de "design" parmi les e-mails réguliers qu'une entreprise peut envoyer.
Ces e-mails visent spécifiquement à inciter un abonné à prendre des mesures avec une entreprise ou un site Web. Il peut s'agir de s'inscrire ou de faire un achat, ou quelque chose de similaire. L’appel à l’action dans ces e-mails est de loin l’élément le plus important, bien qu’il soit évident que d’autres éléments doivent appuyer cet appel pour inciter les lecteurs à prendre l’action souhaitée.
Communauté a un bon e-mail marketing qui est un autre bon exemple de la manière dont les entreprises physiques peuvent utiliser le courrier électronique pour engager leurs clients.
Meilleures pratiques de conception de courrier électronique
Bien que la conception du courrier électronique et la conception Web partagent de nombreux attributs, vous devez garder à l'esprit certaines différences clés lors de la conception du courrier électronique. Bien que la plupart d'entre eux soient facilement adaptés, ils sont toujours importants et rendent vos e-mails beaucoup plus efficaces.
Tout est question de contenu
Le contenu est toujours important, peu importe ce que vous concevez. Mais avec le courrier électronique, et en particulier avec les e-mails susceptibles d'être visionnés sur un appareil mobile, il est encore plus important de garder votre contenu à la fois court et précis. Vous avez quelques secondes au maximum pour engager votre lecteur, et si ces premières secondes sont perdues sur des informations superflues qui ne sont pas utiles, alors vous les avez perdues.
Assurez-vous que votre contenu est aussi concis et clair que possible. L'efficacité est la clé, et si votre lecteur ne peut pas très rapidement discerner exactement de quoi parle votre courrier électronique et exactement ce que vous voulez qu'il fasse, vous perdez votre temps.
Clair appel à l'action
L’appel à l’action est sans doute la partie la plus importante de toute conception de courrier électronique. Votre courrier électronique a évidemment un but, que ce soit pour que les lecteurs s'inscrivent à quelque chose, lisent quelque chose ou achètent quelque chose. Et votre appel à l'action devrait indiquer clairement ce que c'est et inciter votre lecteur à faire ce que vous voulez qu'il fasse.
Les appels à l'action se présentent le plus souvent sous la forme de boutons. Il devrait être immédiatement identifiable, et pas trop loin dans le courrier électronique (après tout, il ne vous reste que quelques secondes pour attirer l’attention, donc placer votre appel à l’action là où il le verra au bout de quelques secondes augmentera vos chances de être efficace).
Assurez-vous également que votre appel à l'action est convivial. Cela signifie qu'il doit être suffisamment grand pour qu'il soit facile de cliquer sur un périphérique mobile et qu'il n'y ait pas d'autres liens suffisamment proches pour qu'ils puissent être accidentellement cliqués.
Testez tôt, testez souvent
Assurez-vous que vos e-mails sont entièrement testés sur divers appareils et clients. Vous voudrez peut-être commencer à tester vos mises en page, etc. dès le début, mais assurez-vous de les tester tout au long du processus de conception pour vous assurer qu'elles restent exemptes de bogues.
Les tests signifient souvent qu'il est plus rapide de détecter les bogues s'ils apparaissent, car vous vous souviendrez plus facilement des modifications que vous venez de faire.
Comprenez exactement ce que chacun des principaux clients et appareils prend en charge, et exactement où ils ne correspondent pas, et trouvez des cadres et des méthodes qui répondent à ces lacunes ou qui les conçoivent.
Utiliser le texte de pré-en-tête
Le texte de pré-en-tête apparaît dans de nombreux clients de messagerie en tant qu'aperçu du message. Regardez cela aussi important que la ligne d'objet de votre email. Utilisez-le pour inciter votre lecteur à réellement ouvrir l'e-mail. Cela peut être particulièrement utile car de nombreux clients de messagerie réduisent les longues lignes de sujet.
Lien vers la version hébergée sur le Web
Assurez-vous d'inclure un lien vers la version hébergée sur le Web de vos e-mails, au cas où quelqu'un serait réellement intéressé mais aurait des difficultés à le voir sur son appareil mobile ou dans son client de messagerie. De nombreux services de messagerie vous permettent d'utiliser un lien de suivi pour cela (et d'autres liens), afin que vous puissiez voir qui clique.
Rester simple
Bien que vous puissiez concevoir des mises en page complexes avec des tonnes de graphiques et d’éléments stylisés, vous augmentez le risque que vos e-mails ne s'affichent pas comme vous le vouliez pour tous vos lecteurs.
Des conceptions plus simples et des mises en page plus simples signifient que vos e-mails sont plus lisibles sur tous les appareils sans une tonne de solutions de contournement et de piratage. Bien que les conceptions complexes puissent être plus esthétiques pour certains, elles ne valent souvent pas les complications supplémentaires qu'elles présentent pour un bénéfice tangible minimal.
Modèles et frameworks
Tout en codant un email HTML entièrement à partir de zéro est complètement faisable (consultez notre article précédent) Comment concevoir un email HTML réactif "Pour plus de détails sur les aspects techniques), utiliser un framework ou une méthode standard pour démarrer, ou même un modèle prédéfini, peut accélérer le processus et le rendre plus accessible au concepteur débutant.
Cerberus
Cerberus est un ensemble de modèles de courrier électronique réactifs qui fonctionnent même dans Outlook et Gmail mobile. Vous pouvez utiliser les blocs de code ensemble ou séparément. Il existe deux versions: une qui repose sur des requêtes multimédias et l’autre non.
Encre
Encre est un fournisseur de messagerie réactif de Zurb. Les e-mails créés avec Ink fonctionnent sur tous les périphériques et clients, même Outlook. Il est assez simple de plonger tout en étant entièrement documenté.
Modèles de courrier électronique réactifs intégrés à Ink
Celles-ci Modèles de courrier électronique réactifs intégrés à Ink sont un excellent endroit pour commencer avec Ink. Il existe quatre modèles: une seule colonne de base, un e-mail de héros, une disposition de barre latérale et une mise en page hybride sidebar-hero.
Modèles de courrier électronique réactifs
Zurb a quelques autres Modèles de courrier électronique réactifs , y compris un modèle de newsletter avec une image de héros trouvée sur cette page. Il comprend également d'autres informations pratiques sur l'utilisation des modèles.
Modèles de courrier électronique réactifs
Modèles de courrier électronique réactifs est une collection de patterns et de modules permettant de créer des emails réactifs. Il comprend des modèles pour les mises en page, la navigation, les listes, les médias, etc.
Modèle d'email HTML très simple
le Modèle d'email HTML très simple est exactement ce qu’il dit: un modèle d’e-mail HTML très simple avec un design très simple. Il s'agit d'une seule colonne, avec un appel à l'action intégré et un objectif clairement défini.
Générateur de modèles
Le CampaignMonitor Générateur de modèles vous permet de créer des modèles d'e-mail HTML gratuits en seulement une minute. Les résultats sont compatibles avec les mobiles, entièrement testés et peuvent être utilisés directement dans CampaignMonitor ou téléchargés pour être utilisés ailleurs.
Modèles de courrier électronique gratuits
Celles-ci Modèles de courrier électronique gratuits Vous pouvez télécharger et utiliser gratuitement CampaignMonitor, que vous utilisiez CampaignMonitor ou non. Il y a des tonnes de styles et de designs disponibles, plus de 100 en tout.
HTML Email Boilerplate v 0.5
le Plaque chauffante HTML Email est un bon point de départ pour créer des emails. Il ne contient ni conception ni présentation, ce qui évite de nombreux problèmes de rendu dans les principaux clients de messagerie.
Email Boilerplate
Ce Email Boilerplate de Emailology inclut toutes les bases dont vous avez besoin pour configurer vos emails HTML, comme CSS et HTML. Il est commenté pour vous donner des instructions d'utilisation.
Réponse
Réponse offre des dispositions réactives à toute épreuve pour les e-mails qui s'adaptent à différentes largeurs de clients. Il prend en charge tous les principaux clients de messagerie, y compris Outlook et Gmail.
Modèles de newsletter GraphicMail
GraphicMail offre environ 100 modèles de newsletter gratuits. Un compte gratuit est requis pour les utiliser.
Modèles de courriels ThemeForest
ThemeForest offre des tonnes de modèles de courrier électronique haut de gamme, allant de 6 $ à 19 $. Les modèles Premium sont parfois plus faciles à utiliser et peuvent avoir des fonctionnalités supplémentaires difficiles à trouver dans les modèles gratuits.
Stamplia
Stamplia offre une marketplace de modèles premium, où vous pouvez acheter et vendre des modèles pour des newsletters, des emails transactionnels, etc.
Outils de messagerie
Bulletin électronique WordPress plugin
le Bulletin électronique WordPress plugin offre une gestion professionnelle de vos newsletters et abonnés email directement dans votre interface d'administration WordPress. Bien que l'auto-hébergement de votre service de messagerie puisse présenter ses propres défis, il vous offre également un contrôle total et élimine les frais de service mensuels, ce qui peut s'avérer très utile pour de nombreuses entreprises.
Images d'arrière-plan à l'épreuve des balles
Images d'arrière-plan à l'épreuve des balles de CampaignMonitor est un outil simple pour coder vos images d'arrière-plan de courrier électronique. Il suffit de mettre l'URL de l'image d'arrière-plan, la couleur de repli, et s'il s'agit du corps complet du courrier électronique ou d'une seule cellule de tableau, et il vous donne le code.
Boutons d'email à l'épreuve des balles
Boutons d'email à l'épreuve des balles de CampaignMonitor vous permet de concevoir de magnifiques boutons progressivement améliorés pour vos e-mails. Ils sont parfaits pour les appels à l'action.
Tournesol
Tournesol est un ensemble d'outils de suivi et de test pour le courrier électronique. Il inclut des aperçus d'e-mail, des analyses et des outils de test de filtrage de spam. Il commence à 79 $ / mois, avec des plans annuels réduits.
Portée du tournesol
Portée du tournesol facilite la création d’une version Web propre de tout courrier électronique que vous pouvez ensuite partager. Il est disponible pour téléchargement, ainsi que sous forme de bookmarklet qui fonctionne avec n'importe quel webmail.
Exemples et inspiration
Il y a des tonnes de galeries de courrier électronique que vous pouvez consulter pour trouver l'inspiration. Mais voici vingt emails géniaux pour vous lancer!
Baleiniers
St. Theresa Auction
Les gars de la boutique en ligne
Point d'inspirations
Partout
Sphère
Forme Fonction et classe
Boden
bon appétit
Septly
Chemin
Guide de survie Zombie pour les marketeurs de courrier électronique
Fooda
Nouvelles Designer
L'eau de la charité
EwerkNews
Interworld Plastics
Zehno
PSD Freebies
Talkie walkie
Plus de galeries pour vous inspirer
Vraiment bons e-mails offre des conceptions de courrier électronique catégorisées, beaucoup avec des commentaires sur ce qui les rend formidables.
Email-Galerie vous permet de parcourir les conceptions d'e-mails en fonction de la couleur, du type d'entreprise, etc.
Inspiration Email de CampaignMonitor vous permet de parcourir par nombre de colonnes et par type de courrier électronique (annonce, newsletter ou invitation).
Regardez ce que vous pouvez faire , de MailChimp, propose de nombreux emails envoyés par le biais du service pour s’inspirer.
HTML Email Galerie offre une galerie chronologique des conceptions d'email.
La galerie de conception de courrier électronique est un blog Tumblr qui présente de superbes designs d'emails provenant de diverses sources.
Beaux bulletins électroniques est une galerie de messagerie catégorisée qui inclut également une fonction de recherche.
Services de messagerie
Les services de courrier électronique offrent diverses fonctionnalités, mais ils gèrent presque tous la gestion de vos listes d'abonnés et l'envoi d'e-mails en votre nom. Beaucoup disposent également de fonctionnalités de suivi et d'automatisation supplémentaires. La plupart d'entre eux n'exigent aucun contrat ou engagement, bien que certains offrent des réductions pour rembourser des termes plus longs.
Contact constant
Contact constant commence à 20 dollars par mois pour les campagnes de messagerie de base incluant la gestion des contacts et le partage social, avec des plans plus onéreux comprenant des fonctionnalités supplémentaires telles que le suivi détaillé.
MailChimp
MailChimp offre un plan «Entrepreneur» gratuit qui prend en charge jusqu'à 12 000 courriels à 2 000 abonnés, avec des forfaits payants qui vous permettent de gérer des volumes beaucoup plus importants.
ActiveCampaign
ActiveCampaign commence à 9 dollars par mois pour un maximum de 500 contacts, avec des plans à partir de là, y compris des plans d'entreprise qui offrent des représentants de compte dédiés et des services supplémentaires.
Avoir une réponse
Avoir une réponse a des plans à partir de 15 $ / mois pour un maximum de 1 000 abonnés, bien qu'ils offrent des rabais pour la facturation annuelle.
AWeber
AWeber vous permet de démarrer pour seulement 1 $ pour le premier mois, avec des mois à partir de seulement 19 $ / mois pour un nombre illimité d’e-mails à 500 abonnés.
Amazon SES
Amazon SES (Simple Email Service) est un service d'envoi de courrier électronique sortant uniquement. Si vous êtes déjà un utilisateur Amazon EC2, vous pouvez envoyer gratuitement jusqu'à 2 000 emails par jour. Sinon, les messages électroniques sont facturés 0,10 $ par mille, avec des frais supplémentaires pour le transfert de données et les pièces jointes, ce qui en fait l'une des options d'envoi de courrier électronique les plus abordables.
Emma
Emma offre des forfaits à partir de 45 $ pour des courriels illimités pour un maximum de 2500 abonnés. Ils offrent également un rabais de 20% pour les organismes sans but lucratif et une réduction de 20% pour le prépaiement annuel.
HubSpot Email
HubSpot Email offre une tonne de suivi et d'outils pour obtenir plus d'abonnés, et fait partie du service global HubSpot, qui commence à 200 $ / mois pour vos 100 premiers contacts (et 100 $ / mois de plus par 1 000) et augmente à partir de là.
GraphicMail
GraphicMail offre un tarif forfaitaire basé sur le nombre d'emails envoyés ou le nombre d'abonnés, avec des prix pour les premiers commençant à moins de 10 $ / mois, et le second à partir de seulement 25 $ / mois.
Conclusion
Bien que les e-mails en texte brut puissent être parfaitement suffisants pour beaucoup de communications, ils ne le coupent pas beaucoup. Comprendre comment fonctionnent les e-mails HTML et connaître les outils et les modèles à votre disposition pour faciliter leur création est essentiel pour pratiquement tous les concepteurs.
Image / vignette en vedette, image iPhone via Kārlis Dambrāns