Comment concevoir un e-mail Les gens liront réellement sur leurs téléphones
Le marketing par e-mail est l'un des moyens les plus populaires pour toucher un public. Attendez, ce n'est probablement pas une nouvelle information. Mais saviez-vous quelle sera la majorité de ces vues sur un appareil mobile? Donc, si vous ne concevez pas vos e-mails pour les téléphones, c'est le jour pour commencer.
La conception d'un e-mail mobile nécessite de la planification et de la réflexion. De nombreux clients de logiciels de messagerie tiers incluent des modèles réactifs dans leurs packages, mais tous les outils ne convertissent pas automatiquement votre message en conception d'idée. Vous devez réfléchir à l'apparence de votre e-mail et vous assurer que le message est ciblé. Ce pourrait même être l'endroit idéal pour commencer avec une stratégie de conception axée sur le mobile.
Coller à une colonne
Cela peut être la décision de conception la plus simple que vous ayez jamais prise: en ce qui concerne le courrier électronique mobile, respectez un format à une colonne. Cette décision à elle seule facilitera la gestion de chaque considération. Il résout également une variété de problèmes de petit écran.
Le format à une colonne est facile pour les utilisateurs limités dans le temps, crée une organisation et un flux. C'est également la norme de conception pour tout sur un petit écran. (Pensez à chaque application ou jeu que vous ouvrez. Ils présentent tout dans une seule conception orientée verticalement.)
Le format à une colonne peut vous obliger à modifier certaines de vos pièces de conception standard. Les e-mails mobiles auront besoin d'un en-tête et d'une navigation simplifiés. Les éléments de conception doivent être assez petits pour que le début du message électronique soit visible sur le premier écran.
Agrandir le type
L'un des plus gros problèmes en matière de messagerie mobile est la lisibilité. Les courriels ne devraient pas être difficiles à lire. Le correctif consiste à agrandir le texte.
La norme pour le type d'e-mail mobile est comprise entre 14 et 16 points pour le type de corps principal et 22 à 24 points pour les titres. Et n'oubliez pas de désactiver la césure, ce qui peut être gênant pour la lecture de petits blocs de texte. Cette norme devient si courante que l'iOS d'Apple a une taille de police minimale de 13 points et ajuste automatiquement rien de moins que cela.
Cela peut sembler inconfortable au début. Le type est susceptible de sembler énorme lorsque vous travaillez sur la conception, mais il deviendra plus confortable et les utilisateurs vous remercieront avec plus d'ouvertures et des temps d'interaction plus longs.
Dites aux utilisateurs de faire quelque chose
Un e-mail mobile a besoin d'un appel à l'action évident. Pourquoi envoyez-vous l'e-mail? Existe-t-il un espace conçu pour que les utilisateurs puissent effectuer cette action?
La deuxième question est essentielle pour les concepteurs. Il n'y a pas autant de façons de créer des indices secondaires dans les e-mails mobiles, tels que les états de survol qui incluent des info-bulles, donc chaque élément doit être conçu de manière à ce que l'action de l'utilisateur soit évidente. Cela peut inclure tout, de l'apparence des boutons au texte - «Achetez maintenant», «Cliquez ici», En savoir plus »- qui apparaît dans la conception.
Réfléchissez bien aux images
Il existe un segment important d'utilisateurs qui ne verront pas réellement les images d'une newsletter par e-mail mobile. Les appareils iOS d'Apple sont le seul segment où les images sont automatiquement rendues dans les e-mails. L'inclusion d'images devrait donc être une décision consciente.
Avant de vous retirer complètement des images, faites une petite recherche. Étudiez vos analyses pour voir de quels types d'appareils les utilisateurs consultent votre message. Les images sont un outil important et ne doivent pas être négligées en raison des spécifications de l'appareil.
Lorsque vous utilisez des images dans des projets de conception d'e-mails mobiles, tenez compte des éléments suivants:
- Taille. L'image doit être visible sans défilement.
- Composition. Le contenu de l'image doit être compréhensible à une petite taille.
- HTML. Ne tombez pas dans le piège de faire du texte ou des boutons en images. Le texte et les éléments d'interface utilisateur doivent être HTML et chaque image doit avoir un texte HTML de support.
- Message. N'oubliez pas que votre message doit être compréhensible même si un utilisateur ne voit pas l'image.
- N'allez pas trop loin. Si vous prévoyez d'utiliser des images, respectez-en une. Les utilisateurs seront frustrés si une grande partie du message semble être manquante.
Divisez l'écran dans votre cadre de conception
En termes de conception d'e-mails mobiles, la simplicité est reine. Tout, de la langue au design, doit être simple et facile à comprendre. Le message et les appels à l'action devraient être évidents.
En pensant au design mobile, imaginez que le petit écran se compose de trois parties: en-tête et image de marque, message d'introduction et action. Idéalement, chacun d'eux devrait avoir une place sur le premier écran de la conception de l'e-mail. (Mais pas toujours.)
Tenez compte des appareils et de l'échelle
La chose la plus difficile à considérer en matière de conception mobile est toutes les tailles d'écran possibles sur lesquelles un e-mail s'affichera. La réalité est la suivante: c'est impossible à faire.
Mais vous pouvez penser en commun. Apple iOS dimensionnera automatiquement les e-mails mobiles pour s'adapter à la largeur de l'écran, c'est donc une chose de moins à considérer si vous prévoyez une petite taille d'écran. (D'autres systèmes d'exploitation ne le font pas encore.)
La largeur la plus standard pour la conception mobile est de 640 pixels de large. Les hauteurs ont tendance à varier un peu plus. Vous pouvez trouver une liste d'appareils et de tailles dans les astuces techniques de Ken.
Tenez compte du toucher et de l'ergonomie
Les éléments qui doivent être cliqués ou exploités dans l'e-mail mobile doivent avoir une conception évidente. Cela comprend souvent la conception de ces éléments avec des couleurs plus audacieuses et des tailles plus grandes que celles auxquelles vous êtes habitué.
En règle générale, chaque élément conçu pour l'action de l'utilisateur doit être suffisamment grand pour pouvoir être facilement touché avec un doigt et se distinguer clairement des objets voisins avec beaucoup d'espace. Les éléments doivent également être faciles à toucher, en tenant compte des utilisateurs qui n'utilisent qu'une seule main pour tenir et toucher des objets sur l'écran.
- La norme en matière de dimensionnement «compatible avec le pouce» est d'au moins 46 pixels au carré.
- Optez pour des appels à l'action pleine largeur, afin que les utilisateurs gauchers ou droitiers puissent les toucher facilement.
Prévoyez beaucoup d'espace ouvert autour des éléments cliquables. Lorsque vous utilisez des liens dans le texte qui doivent être cliqués, ajoutez plus de mots au lien pour faciliter le contact avec le lien et limiter le nombre de liens en ligne. Plusieurs liens rapprochés augmentent les chances qu'un utilisateur touche le mauvais. Utilisez des éléments de conception tels que la couleur et les caractères gras pour tous les liens afin que les utilisateurs aient une indication visuelle évidente que le texte fait quelque chose.
Bonus: 5 choses à éviter
Maintenant que vous avez une idée des choses à faire avec une campagne d'e-mail mobile, vous devez vous rappeler certaines choses à éviter. Ces erreurs courantes sont les choses qui peuvent détruire un e-mail mobile autrement génial.
- Oublier d'ajouter la navigation. Incluez une navigation super simple qui peut ramener les utilisateurs vers votre site Web, mais n'oubliez pas de l'optimiser pour mobile. La barre de navigation de votre site Web est probablement mal dimensionnée pour un appareil mobile.
- Création d'une palette de couleurs «subtile». Les utilisateurs ajustent beaucoup le contraste et la couleur de leurs appareils mobiles. Évitez les palettes de couleurs avec des teintes douces ou des couleurs sans beaucoup de contraste. Il doit être lisible.
- Un petit type sur un petit appareil tue. Les gens défileront. Faites le type assez grand pour lire facilement.
- Boutons petits ou masqués par les icônes d'interface utilisateur standard. Pensez à l'iPhone, par exemple, où l'essai apparaît en bas de l'écran. Si vous placez des boutons ou des éléments à cet emplacement, ils seront masqués lorsque les utilisateurs tenteront d'interagir avec eux.
- Le désordre est une catastrophe mobile. Déterminez un seul message pour mobile et respectez-le. Les utilisateurs n'ont pas le temps ou l'attention pour filtrer beaucoup d'informations à partir d'un e-mail sur leur téléphone.
Conclusion
La conception d'e-mails mobiles peut tester certaines des choses que vous pensez de la conception pour le Web. C'est un aspect unique avec des considérations distinctes. Beaucoup de choses que vous devez considérer sont différentes de celles des autres projets.
Ma recommandation est la suivante: toutes vos newsletters ou correspondances par e-mail doivent être optimisées pour les mobiles. Créez chaque message à l'aide des conseils ci-dessus, puis pensez aux modifications plus petites que vous pouvez apporter aux formats plus grands. Cela fonctionne car vous allez créer un message unique et unifié sur toutes les plateformes avec une idée ciblée. Vous comprendrez ce que vous voulez accomplir avec l'e-mail avant d'aller trop loin et de prendre des décisions importantes sur le contenu au début du processus et vous ne vous sentirez pas obligé d'éliminer le contenu pour les utilisateurs mobiles.
