Share
La conception des e-mails respecte les mêmes considérations que la conception Web: de nombreux types de navigateurs, de systèmes d'exploitation, de tailles d'écran et de périphériques. Mais là où les concepteurs Web ont pu utiliser les techniques CSS modernes et les langages de script côté client pour les aider à surmonter ces défis, les concepteurs de courrier électronique n'ont pas été aussi chanceux..
Alors, quel est le concepteur d'email à faire? Premièrement, et plus important encore, en tant que concepteurs de courrier électronique, nous devons oublier la notion de conception au pixel près. Ensuite, nous devons prendre en compte plusieurs considérations de conception qui aideront les conceptions d'e-mails à briller, quel que soit l'endroit où l'e-mail est lu..
Remarque: ce tutoriel fait partie de la totalité du contenu du courrier électronique de Tuts + Web Design: consultez le guide d’apprentissage de Mastering HTML Email pour en savoir plus.!
Les e-mails doivent être faciles à lire et à comprendre, quel que soit le périphérique sur lequel ils sont lus, de manière à ce que leur message soit communiqué à l'abonné. Voici quelques aspects de conception simples à prendre en compte:
Le modèle de pyramide inversée (où les éléments les plus intéressants sont placés en premier, suivi des informations associées, etc.) est parfait pour les conceptions de courrier électronique:
Cet e-mail de Nest utilise parfaitement le modèle de pyramide inversée pour attirer l'utilisateur sur le bouton d'appel à l'action:
Conception du courrier électronique Nest Cam IQLa mise en page en zig-zag est une structure de grille simple, qui peut être très facilement traduite en tableaux HTML, base de toutes les conceptions de courrier électronique. Ce type de mise en page permet de digérer facilement le contenu, indépendamment du périphérique sur lequel le courrier électronique est lu. Sur un appareil avec une grande taille d'écran, tel qu'un ordinateur de bureau, la structure en zig-zag sera affichée. Sur des appareils plus petits, tels que les smartphones, la structure peut se dégrader en une disposition à une colonne:
De cours Zapier utilise le motif ZBien que ce type de disposition soit légèrement plus difficile à adapter à différentes tailles d'écran, de nombreuses méthodes documentées en ligne permettent de coder ce type de disposition..
Consultez ce courrier électronique de Tinder, qui utilise la disposition du motif en Z pour expliquer facilement aux utilisateurs comment configurer leurs profils, sans surcharger l’abonné d’informations:
Conception d'e-mails Tinder sur de vrais messagesEncore une fois, la disposition se transforme en une conception à colonne unique pour les plus petits appareils.
L'espace blanc est souvent la Némésis des concepteurs d'email. Avec un espace aussi limité, en particulier sur les smartphones, des pressions sont exercées pour que l'espace blanc soit fermé. Les e-mails avec peu d’espace blanc et de contenu encombré peuvent être déconcertants pour les abonnés, illisibles et finalement inefficaces.
Embrassez l'espace blanc. L'utilisation intelligente de l'espace blanc peut faciliter la lecture de vos courriers électroniques. Une utilisation efficace autour de vos boutons d'appel à l'action leur permet de se distinguer davantage et d'obtenir davantage de ces clics indispensables..
L'utilisation efficace des espaces blancs peut même améliorer la lisibilité de vos courriels, ce qui est essentiel pour les abonnés qui lisent vos courriels sur de minuscules appareils mobiles..
Cet e-mail de Squarespace est un excellent exemple de la façon dont les espaces peuvent améliorer la conception de votre messagerie et rendre le message de l'e-mail plus clair pour l'abonné:
Bien si Keanu peut le faire… Les utilisateurs doivent pouvoir lire vos e-mails, qu'ils le consultent rapidement sur un appareil mobile ou qu'ils vérifient leurs e-mails sur un ordinateur de bureau. Il est essentiel que le texte de votre courrier électronique soit lisible, quelle que soit la taille de l'écran de votre courrier électronique..
À l'époque d'avant les smartphones, il était courant que le corps du texte dans les courriels soit de 12 pixels. Lorsque les gens ont commencé à lire les e-mails sur les smartphones, il y avait beaucoup de pincement pour zoomer, rien que pour lire le contenu. Cela a souvent gâché la conception de l'email, laissant les abonnés avec une expérience de boîte de réception terrible.
Utiliser une taille de police minimale de 16 pixels pour la copie de corps de votre courrier électronique garantira sa lisibilité, quelle que soit la taille de l'écran sur lequel elle est lue. Mais ce n'est pas seulement la taille de la police qui est importante. La hauteur de ligne est également un élément clé de la conception pour garantir la lisibilité de votre courrier électronique. Une hauteur de ligne qui ne soit pas inférieure à 1,5 fois la taille de votre taille de police assurera une lecture facile de votre copie de courrier électronique. Ainsi, si la taille de la police de votre corps est de 16px, la hauteur de ligne doit être de 24px. Vous pouvez utiliser les mêmes calculs sur les titres et les autres éléments de texte de votre courrier électronique..
Evernote avec copie de corps 22px confiante et hauteur de ligne presque (30)La prise en charge des attributs HTML et CSS les plus élémentaires reste inégale dans de nombreux clients et périphériques de messagerie courants. Prendre des images de fond par exemple.
Les images d'arrière-plan sont couramment utilisées par de nombreux concepteurs de messagerie. Cependant, elles ne sont pas prises en charge par tous les clients de messagerie, en particulier les versions de Microsoft Outlook et GANGA (Gmail Android avec un compte non Gmail)..
Campaign Monitor est un excellent outil en ligne qui générera le langage propriétaire VML (Vector Markup Language), utilisé par Microsoft pour le balisage HTML dans Outlook, permettant ainsi d’utiliser des images d’arrière-plan dans ces versions qui ne prennent pas en charge ces images. Gagner!
Mais si vous ne voulez pas vous mêler du code VML et vous en tenir à HTML et CSS, utilisez simplement une couleur d'arrière-plan de secours appropriée lorsque les images d'arrière-plan ne sont pas prises en charge. Et lorsque vous choisissez une couleur d'arrière-plan de secours, n'oubliez pas de prendre en compte la couleur du texte éventuellement présent au-dessus de l'image d'arrière-plan..
L'utilisation d'une couleur d'arrière-plan de secours est également un excellent moyen de vous assurer que vos courriels sont toujours compréhensibles si quelqu'un les lit sur un appareil mobile avec une mauvaise connexion de données. Si les images ne se chargent pas, la couleur d'arrière-plan de secours remplit l'espace dans lequel se trouve l'image d'arrière-plan..
Une technique connue sous le nom de Pixel Art prend cela à un autre niveau. Connu comme une forme de conception défensive, il combine des images et des couleurs d'arrière-plan qui créent des mosaïques lorsque les images ne se chargent pas.
Les limitations de prise en charge des polices Web et les directives de marque strictes impliquaient qu'historiquement, les concepteurs d'e-mail devaient créer des images contenant du texte afin de pouvoir contrôler totalement l'aspect et la convivialité du texte..
À l'époque, quand les courriels étaient principalement vus sur des appareils de bureau, c'était parfaitement acceptable. Cependant, le texte dans les images pose un problème. énorme problème pour les personnes qui consultent des emails sur des appareils mobiles. Lorsque l'image est à l'échelle, le texte évolue également. Cela devient souvent illisible, créant une mauvaise expérience pour l'abonné.
La solution? Utilisez une image d’arrière-plan avec du texte actif en haut. En utilisant du texte en direct, vous pourrez contrôler la taille du texte sur différents appareils à l'aide de requêtes multimédia, largement prises en charge par les clients de messagerie courants tels que Gmail et Apple Mail..
Cet e-mail de REI utilise une combinaison d'images d'arrière-plan et du texte pour son message principal. Il est superbe sur les ordinateurs de bureau et les appareils mobiles:
De REILe GIF animé humble est encore largement utilisé par les concepteurs de messagerie. Les GIF sont parfaits pour ajouter un peu d'intérêt ou d'enthousiasme à un email. Mais il existe une tendance dangereuse aux GIF animés de plus en plus compliqués avec des animations plus longues, ce qui signifie des fichiers de plus grande taille..
Il peut être facile de télécharger un fichier GIF de 4 Mo à partir de votre ordinateur portable, chez vous, sur votre connexion Internet filaire. Mais pensez à ceux qui essaient de télécharger le même GIF sur un appareil mobile en utilisant leur réseau de données. Le téléchargement de l’image risque de prendre si longtemps que le lecteur en aura simplement assez d’attendre et de fermer ou de supprimer votre courrier électronique. Et cela est particulièrement grave si le message principal de votre courrier électronique se trouve dans ce GIF..
Idéalement, vous souhaitez conserver une taille d’image GIF animée inférieure à 1 Mo. Cela signifie simplifier n'importe quelle animation, en gardant une plage de couleurs relativement petite et une courte durée d'animation. Vous n'avez pas besoin d'être un assistant Photoshop pour optimiser vos GIFs pour la messagerie. Il existe des outils en ligne qui peuvent vous aider à faire exactement cela, comme cet optimiseur GIF en ligne.
Pour réduire la taille de votre GIF animé, essayez:
Ce courriel de Postable contient un GIF animé amusant et des horloges de seulement 303 Ko:
Regardez la version animée actuelleLes boutons d’appel à l’action, ou CTA, sont l’un des éléments essentiels du courrier électronique. Après tout, vous envoyez un courrier électronique pour informer l’abonné de quelque chose et vous voulez que l’abonné puisse faire quelque chose avec les informations contenues dans votre courrier électronique. C'est là que le bouton d'appel à l'action entre en jeu.
Le problème ici est que les gens ne cliquent pas sur votre courrier électronique depuis un appareil de bureau avec une souris ou un trackpad. Mais ils utilisent aussi des tablettes munies de stylets. Et les smartphones, de différentes tailles d’écran, utilisant leur pouce ou leur doigt pour.
Les boutons d’appel à l’action doivent être cliquables sur diverses tailles d’écran, à l’aide d’une souris, d’un stylet, du pouce ou même du doigt. Dites bonjour aux boutons pare-balles.
Les boutons Bulletproof utilisent uniquement HTML et CSS pour créer un bouton 100% cliquable. Il existe différentes techniques que vous pouvez utiliser pour créer un bouton pare-balles. Et même un générateur de code qui créera votre bouton pour vous. Le principal élément d’information pour un bon bouton pare-balles est sa taille. Les directives Apple recommandent que les boutons ne soient pas inférieurs à 44 pixels sur 44 pixels afin de garantir leur activation à partir d'un appareil mobile. Et c'est la norme que les concepteurs de courrier électronique ont adoptée pour les boutons à l'épreuve des balles dans leurs courriels.
Toutes ces considérations de conception garantissent que vos courriels seront lus, compris et exploités par un public plus large. Tous les objectifs que tout spécialiste du marketing par courriel devrait viser à atteindre.
Accentsconagua