Share
À l'instar de nombreux autres concepteurs Web, je réussis à coder des pages Web à la fois belles et flexibles, affichant un affichage pratiquement identique dans chaque navigateur Web. Malheureusement, la conception de newsletters électroniques vous ramène dix ans en arrière. Tags obsolètes, tableaux, style en ligne, oh mon dieu! Dans cet article, je vais énumérer six méthodes qui amélioreront immédiatement la mise en page de vos emails..
En tant que nouvelle recrue chez AWeber, le service marketing par e-mail opt-in, ma première tâche a été de créer une douzaine de nouveaux modèles de newsletter HTML pour nos clients. Pour le concepteur de sites Web épris de code épuré, l’e-mail HTML rappelle un passé lamentable. Après des semaines de travail et d'innombrables maux de tête, j'ai livré la marchandise. J'ai aussi beaucoup appris sur la conception pour le courrier électronique.
Pour vous aider à éviter les maux de tête rencontrés au cours des tests, voici 15 choses à faire pour créer de superbes emails HTML..
Si vous ne retirez qu’un conseil de cet article, qu’il en soit ainsi. En tant que concepteurs, nous passons beaucoup de temps à créer l'expérience utilisateur parfaite sur le Web et à la tester sur plusieurs plates-formes.. Pourtant, en matière de courrier électronique, trop d’entre nous n’accordent pas la même attention aux détails..
Tout comme pour les tests sur le Web, créer une présentation de messagerie affichant la même chose dans chaque client de messagerie peut être un cauchemar absolu..
Pour être sûr que vos abonnés recevront votre message comme prévu - tester dans tout ce que vous pouvez!
Ceci inclut mais ne se limite pas à:
Mais attendez - il y a plus!
Certains de ces clients de messagerie ont plusieurs versions, dont chacun rendra CSS et HTML différemment.
Cela fait partie d'un courriel HTML rendu par le ancienne version de Yahoo.
Voici le même email que celui qui est rendu par le nouvelle version de Yahoo. 
Différences subtiles, je l'avoue. Mais assez de ces différences subtiles et cela s’ajoute à un design négligé. Et si ça ne suffit pas… le navigateur Internet de l'utilisateur peut également jouer un rôle dans le rendu de votre conception.
Avant de jeter votre ordinateur par la fenêtre, frustré… ces quelques étapes peuvent vous aider à éliminer la majorité des problèmes de test.
Je suis stupéfait de voir certains des plus grands annonceurs enfreindre les règles de base en matière d'utilisation du courrier électronique HTML..
Voici quelques lignes directrices pour vivre par:
Voici l'en-tête d'un email que j'ai reçu de Discovery Health:
J'ai pris cette capture d'écran de mon compte Gmail - avant d'activer des images. Voyez comment le texte ALT "bullet" et "spacer" gênent?
L'ajout de balises ALT à des éléments destinés uniquement à la conception encombrera la conception et détournera votre message..
Hein? J'ai passé tout ce temps à apprendre le CSS et je dois maintenant retourner aux tables? En ce qui concerne la conception des e-mails, les tables sont à la mode, comme en 2003 - elles sont très proches des normes que nous avons..
Quelques points à prendre en compte:
Remarque: Vos images de fond se comporteront comme si elles étaient en mosaïque… alors planifiez en conséquence.
Je ne le pensais pas non plus.
Certains clients de messagerie populaires ignorent le code contenu dans vos balises head. Gmail et Hotmail sont des coupables qui viennent à l'esprit.
Avec votre mise en page configurée sous forme de tableau, il est temps d'appliquer des styles à votre texte et à vos images.
Voici quelques conseils et astuces pour que votre message soit presque identique à tous les
navigateur:
Saviez-vous que l'objet de chaque email envoyé à un compte Gmail est suivi des premiers extraits de texte contenus dans cet email??
Pourquoi ne pas utiliser ceci à votre avantage!
Ci-dessus, une photo de ma boîte de réception Gmail..
Les deux newsletters ont le même contenu d'en-tête.
Une seule différence: la Newsletter 1 tire parti du formatage de la boîte de réception de Gmail..
Voici comment je l'ai fait:
Insérez une image de 1px x 1px en tant que tout premier élément de votre courrier électronique. Enveloppez l'image dans des balises span définissant la couleur de la police de la même manière que l'arrière-plan. Quel que soit le texte que vous avez inséré dans les balises ALT pour votre image 1px x 1px, il remplace désormais cet extrait de google dans la boîte de réception de l'utilisateur..
C'est aussi simple que ça! Cette différence subtile distinguera votre message des autres courriels de la boîte de réception du lecteur..
J'ai fait de mon mieux pour partager certaines choses que je fais lors de la création d'e-mails HTML. C'est ton tour!
Comment concevez-vous, codez-vous et testez-vous vos campagnes de courrier électronique??
Toute recommandation, astuce ou astuce que vous souhaitez ajouter sera grandement appréciée par votre communauté de concepteurs.
Accentsconagua