📧 The NewsLetter (FULL Tutos marketing) 2020
📧 The NewsLetter
(FULL Tutos marketing) 2020
Conception du bulletin électronique: directives et exemples
- 14 min de lecture
- Design , Web Design , Marketing , Newsletters , Stratégie de contenu , Emails
- Partager sur Twitter ou LinkedIn
Bulletin Smashing
Chaque deuxième mardi, nous envoyons une newsletter avec des techniques utiles sur le front-end et l'UX. Abonnez-vous et obtenez les listes de contrôle de conception d'interface intelligente PDF dans votre boîte de réception.
Votre e-mail (fracassant)
Abonnez-vous →
Le bulletin électronique est un puissant outil de marketing et de communication qui a diverses fonctions utiles. Cela rappelle à vos utilisateurs que vous êtes; il informe les utilisateurs de vos produits; il leur dit ce que vous avez fait; et cela vous aide à construire une relation unique avec eux. Les utilisateurs aiment les newsletters par e-mail si les newsletters leur apportent de la valeur.
La règle fondamentale pour créer une newsletter par e-mail est de lui donner des informations intéressantes, pertinentes et à jour, agréables à lire. Les utilisateurs s'inscrivent à des newsletters en espérant être informés de choses qu'ils n'auraient pas pu découvrir autrement. Dans cet article, nous allons discuter de quelques directives pour la conception et la distribution de newsletters par e-mail . Chaque point sera accompagné de bons et de mauvais exemples.
Veuillez noter : dans cet article, nous présentons à la fois de bons et de mauvais exemples de conception de newsletter, afin que vous puissiez mieux comprendre les problèmes à éviter et les bonnes décisions de conception à prendre.
Lectures Complémentaires Sur SmashingMag:
- Concevez et créez des newsletters par e-mail sans perdre votre esprit (et votre âme)
- Modèles typographiques dans la conception de newsletter HTML
- Ce que 22 milliards de newsletters nous disent sur la conception de la messagerie mobile
- Bulletins électroniques utiles pour la conception Web
Quand tout est similaire, être différent attire. Rencontrez Art Direction For The Web , notre nouveau livre sur la conception et la construction d' expériences fascinantes et exceptionnelles . Inspiré des magazines imprimés vintage, avec des extraits de code pour votre travail.
Aller à la table des matières ↬
S'inscrire À Une Newsletter
Il s'agit d'une étape importante pour convaincre les utilisateurs que vos newsletters sont intéressantes et qu'elles gagneraient à s'inscrire.
DITES AUX UTILISATEURS CE QU'ILS OBTIENDRONT
Avant de demander aux utilisateurs leurs détails, dites-leur ce qu'ils vont recevoir et identifiez les avantages de l'inscription. Si vous mentionnez que les newsletters incluront des offres et des offres exclusives, assurez-vous de tenir la promesse. De plus, informez les utilisateurs de la fréquence à laquelle ils recevront la newsletter: hebdomadaire ou mensuelle.
Sur la page d'inscription de Mulberry , la société promet d'envoyer aux utilisateurs des mises à jour et des offres exclusives. La page d'abonnement de Marie Claire UK indique clairement que ses newsletters incluent des actualités, des achats beauté, des concours et des offres.
Page d'abonnement Marie Claire UK
RÉCOMPENSER LES UTILISATEURS POUR LEUR INSCRIPTION
Vous voudrez peut-être envisager de récompenser les utilisateurs pour leur inscription; par exemple, un cadeau gratuit, un bon ou une remise. Pour encourager les utilisateurs à s'inscrire à sa newsletter, Jamie Oliver propose un bon de 25 € gratuit qui peut être réclamé après la souscription (à condition que les utilisateurs dépensent 64,99 € ou plus pour le vin).
Page d'inscription à Jamie Oliver
Page de récompense de Jamie Oliver
Si vous accordez des récompenses, informez les utilisateurs dès que possible du processus. James Perse offre aux utilisateurs qui s'abonnent à sa newsletter une carte-cadeau en ligne de 15 $. Cependant, la récompense n'est pas mentionnée sur la page d'abonnement et le code promotionnel n'est envoyé via un e-mail de confirmation qu'après réception de l'abonnement. Vous ne l'auriez pas su avant de vous être abonné. L'entreprise manque clairement une excellente occasion d'amener les gens à s'inscrire à ses newsletters.
E-mail de confirmation d'abonnement à James Perse
APERÇU DE VOTRE NEWSLETTER
Une façon de faire savoir aux utilisateurs ce qu'ils obtiendront est de leur donner un aperçu de votre newsletter. Hershey's Kitchens dispose de deux newsletters différentes et propose des exemples des deux types. L'entreprise donne même un nom à chaque newsletter et indique clairement à quelle fréquence elle sera envoyée.
Page d'inscription à la cuisine de Hershey
GARDEZ LES QUESTIONS COURTES ET SIMPLES
Les utilisateurs évitent de remplir des formulaires et de soumettre leurs coordonnées si possible. Pour vous inscrire à une newsletter, vous n'avez besoin que de leur adresse e-mail.
Hersey's Kitchens a 10 champs obligatoires. MarieClaire.com a 8 champs, mais seul le champ email est obligatoire. Nos études ont cependant montré que les gens manquent souvent l'astérisque ou ne savent pas ce que cela signifie. Les utilisateurs qui hésitent à remplir de nombreux détails peuvent bien refuser de s'inscrire dans ce cas.
Page d'inscription à la cuisine de Hershey
Contenu De La Newsletter
Sur la base de nos tests utilisateurs, nous avons constaté que les gens regardent trois choses lorsqu'ils reçoivent une newsletter:
- L'expéditeur, pour voir si c'est de quelqu'un qu'il connaît.
- La ligne d'objet, pour voir si cela l'intéresse.
- La date, pour voir si la communication est à jour.
ÉCRIVEZ UNE LIGNE D'OBJET ATTRAYANTE
Une façon d'encourager les utilisateurs à ouvrir votre newsletter est d'écrire une ligne d'objet qui attire leur attention.
Si vous proposez une sorte d'accord dans votre newsletter, essayez d'éviter les appels génériques dans votre ligne d'objet (par exemple, la ligne d'objet de la newsletter de Game July: «Sizzling Summer Deals» ). Au lieu de cela, mentionnez des offres spécifiques, telles que le numéro de novembre de Dorothy Perkins: «25% de rabais rien que pour vous» . Aussi, soyez réaliste au sujet de vos offres et évitez de les faire paraître trop belles pour être vraies. Les utilisateurs sont sceptiques quant aux lignes d'objet comme «Obtenez 1000 points supplémentaires» car ils savent qu'ils devront souvent dépenser beaucoup pour obtenir ces points.
FOURNIR UN CONTENU UTILE ET BIEN ÉCRIT
Un bulletin d'information doit contenir des informations que les utilisateurs ne recherchent pas normalement par eux-mêmes. Les utilisateurs prennent quelques secondes pour rechercher les sujets qui les intéressent avant de décider de passer plus de temps à lire la newsletter. Si votre newsletter, comme celle de Forrester , ne présente qu'un ou deux sujets, les utilisateurs sont moins susceptibles de trouver quelque chose qui les intéresse.
Newsletter Forrester
De plus, l'inclusion de liens vers votre site Web dans la newsletter est cruciale.
RENDEZ LE CONTENU PERTINENT POUR VOS LECTEURS
Rendez le contenu de votre newsletter aussi pertinent que possible pour vos lecteurs, que ce soit par le biais d'offres, de produits ou d'images. Le contenu superflu n'ajoutera aucune valeur et sera simplement ignoré. Vous pouvez également fournir un contenu personnalisé. La personnalisation peut être effectuée de deux manières:
- Demander aux utilisateurs plus d'informations (facultatives) lors de leur inscription.
- Enregistrement implicite de ce qu'ils achètent et consultent sur votre site Web.
Par exemple, Amazon envoie une newsletter avec des recommandations en fonction de ce que ses utilisateurs ont acheté. Les newsletters basées sur des recommandations peuvent être très utiles, à condition que vos analyses soient exactes.
Newsletter personnalisée d'Amazon
OFFREZ DES OFFRES EXCLUSIVES
Vous pouvez toujours offrir aux abonnés des offres spéciales ou des cadeaux. Il y a plusieurs façons de procéder. H&M et Photobox demandent aux utilisateurs de présenter leurs newsletters au point d'achat dans les magasins pour bénéficier de remises. Clinique et Airparks incluent un code promotionnel dans leurs newsletters que les utilisateurs peuvent utiliser lors de leur paiement en ligne.
Newsletter H&M
Newsletter Photobox
Newsletter Airparks
Évitez de mettre ces avantages si profondément dans la newsletter que les utilisateurs les manquent. Par exemple, Clinique (ci-dessus) met son code en bas de la page, tandis qu'Airparks le met tout en haut de la page.
De plus, assurez-vous que les récompenses sont pertinentes pour votre produit et votre public cible. Prenez Inkclub , qui offre un fard à joues gratuit aux clients qui achètent via sa newsletter. Non seulement cet article a peu de pertinence pour la gamme de produits Inkclub, mais il peut ne pas être très attrayant pour les utilisateurs cibles de l'entreprise.
Newsletter Inkclub
Conception De La Newsletter
Concevez votre newsletter en fonction de son objectif principal. Si l'objectif principal est d'annoncer un nouveau produit ou de promouvoir un service particulier, vous souhaiterez peut-être concentrer entièrement la newsletter sur ce produit ou service. Apple en est un bon exemple dans la promotion de son nouvel iPhone 3GS.
Newsletter Apple faisant la promotion de son nouvel iPhone 3GS.
Pour promouvoir ses dernières offres exclusives, Ted Baker adopte une approche simple et plutôt paresseuse: l'intégralité de la newsletter se compose simplement d'une grande bannière affichant des offres à 50% de réduction, dans l'espoir que les utilisateurs cliquent sur le site pour en savoir plus. En revanche, Dabs.com présente un certain nombre de ses dernières offres dans sa newsletter, donnant aux utilisateurs une idée approximative de sa gamme de produits et des prix de vente.
Infolettre Ted Baker
Newsletter Dabs
Vous pouvez également adopter un style de catalogue, comme IKEA , ou créer un résumé de votre site Web de commerce électronique, comme Audible , qui incite les utilisateurs à visiter son site Web avec des prix et un bouton d'appel à l'action clair.
Newsletter IKEA
Newsletter audible
RESTEZ SIMPLE ET DIRECT
Comme indiqué par le groupe Nielsen Norman dans son rapport sur la convivialité de la newsletter par e-mail , le lecteur moyen parcourt une newsletter pendant 51 secondes. Les gens ne lisent jamais: ils recherchent le contenu qui les intéresse. Alors, ne les submergez pas en pressant trop d'informations sur la page. Assurez-vous que votre contenu va droit au but et écrivez de courts paragraphes et des puces.
L'objectif principal de la newsletter de Flybe est de présenter une offre exclusive sur les voyages en famille à Disneyland. La valeur de cet accord est perdue parmi les longs paragraphes. Le message pourrait être transmis plus efficacement sous forme de puces pour une numérisation rapide.
Newsletter Flybe
FAITES BON USAGE DES IMAGES, DES NOMBRES ET DES COULEURS
Les utilisateurs sont d'abord attirés par les éléments qui simulent visuellement, tels que les graphiques. Utilisez des images pour guider les utilisateurs vers le contenu et les messages les plus importants.
Les chiffres attirent également l'attention. Les utilisateurs ont tendance à les associer aux prix et aux économies. Utilisez des pourcentages et des valeurs en dollars pour montrer des offres concrètes. Par exemple, la newsletter Pixmania propose un gros "49% de réduction", montrant combien d'économies sont disponibles: claires et attrayantes.
Newsletter Pixmania
La couleur ajoute également de l'intérêt. Mais soyez prudent, car une utilisation inappropriée crée une newsletter désordonnée et déroutante. Prenez la newsletter de Rimmel London.
Newsletter Rimmel Londres
ADAPTER LA MISE EN PAGE AU CONTENU
Un bulletin peut être conçu dans une disposition à une ou plusieurs colonnes ou un mélange des deux. Une grille à une colonne est plus facile à parcourir, mais peut prendre plus de place et augmenter la longueur du bulletin. Bien que les gens écrivent les bulletins électroniques, ce n'est pas une raison pour les rendre trop longs. Cependant, quelques exceptions sont la newsletter Design Hotels , qui est longue mais bien organisée. Les hôtels sont affichés en fonction de l'emplacement, avec des photos et des offres attrayantes.
Newsletter Design Hotels
Une mise en page à deux colonnes est courante pour les newsletters. Des colonnes plus étroites sont généralement utilisées pour la table des matières et les événements à venir, tandis que le contenu principal reçoit une colonne plus large. Etsy utilise un design à deux colonnes pour sa newsletter, mais les deux colonnes contiennent des photos et des liens, et les sections n'ont pas de divisions importantes. La conception rend la page désordonnée et manque de concentration, ce qui rend difficile de savoir où regarder sur la page. En revanche, la division claire d' iStockphoto entre les sections et la conception de la grille aide à attirer l'attention de l'utilisateur sur la colonne de gauche ou de droite.
Newsletter Etsy
Newsletter iStockphoto
SOIS CRÉATIF
La créativité dans une newsletter est toujours la bienvenue. Les deux First Great Western et du Sud présentent leur contenu à l' aide des personnages fictifs, Bob et Loco respectivement, qui les utilisateurs peuvent facilement identifier .
Premier bulletin Great Western
Newsletter du Sud
Donner à chaque édition de votre newsletter une mise en page ou un design différent est acceptable car les utilisateurs peuvent facilement reconnaître votre marque. Bien que STA Travel utilise différents styles pour sa newsletter hebdomadaire, certains éléments suivent leurs directives de marque, permettant aux utilisateurs de l'identifier rapidement.
Bulletin de la STA, numéro 254
Bulletin de la STA, numéro 255
Contrairement à la newsletter Tripadvisor plutôt sans intérêt , Top Gear fait preuve de créativité avec son design dessiné à la main, ce qui rend la newsletter amusante à lire et à explorer.
Newsletter Tripadvisor
Newsletter Top Gear
MÉFIEZ-VOUS DE LA TABLE DES MATIÈRES
Certaines newsletters incluent une table des matières en haut de la page, qui peut aider les utilisateurs à rechercher rapidement les éléments d'intérêt. Une table des matières peut être particulièrement utile dans les longs bulletins d'information qui contiennent beaucoup de contenu, comme celui de MoneySavingExpert .
Newsletter MoneySavingExpert
L'expérience précédente nous indique cependant que certains utilisateurs ne comprennent pas que les liens de la table des matières naviguent dans la newsletter. En supposant que les liens les dirigent vers un site Web, ils évitent de cliquer dessus complètement. Une solution consiste à éviter de placer les liens dans les colonnes de gauche ou de droite, comme le fait Foodepedia , où se trouvent souvent les liens externes et les publicités.
Newsletter Foodepedia
MÉFIEZ-VOUS DES ANNONCES
Si vous devez inclure des annonces dans votre newsletter, assurez-vous qu'elles se fondent dans le contenu. Lastminute.com en est un bon exemple , et PCMag.com en est un mauvais exemple, car il copie simplement le code Google AdSense directement dans sa newsletter, ce qui rend la page désordonnée et le contenu peu convaincant.
Newsletter Lastminute.com
Newsletter PCMag.com
Tools And Features
Make it easy for users to unsubscribe, but don’t remind them how to all the time. Also, tell users how they can change their email address, view the newsletter in a Web browser and quickly share the newsletter with their friends. Other useful features include: “Follow us on Twitter,” “Be Our Fan on Facebook” and “Watch Us on YouTube.”
After Sending Out The Newsletter
After sending out your newsletter, use an email marketing tool and list manager to track, monitor and measure the performance of your campaigns. Many email service providers are out there, such as MailChimp, iContact, Mailvivo, Mailing Manager and Atomic Email Tracker. The majority of them also provide templates to help you create your newsletter if you don’t want to get your hands dirty.
Showcase
Le bulletin de la direction de MacHeist attire l'attention de ses lecteurs avec le prix de ses applications iPhone (0,99 £). Ensuite, il leur explique ce que MacHeist fait dans un court paragraphe et présente ses fonctionnalités de manière claire et attrayante via des icônes. Simple, intéressant et efficace.
Newsletter de Headscape avec de gros titres et de belles illustrations.
La newsletter de Muji a une mise en page soignée qui permet une numérisation rapide. Chaque section est accompagnée de belles images de produits et de prix.
Howies pourrait avoir un peu trop de texte dans sa newsletter. Cependant, il organise le contenu en différentes sections avec de grands titres clairs.
Apple’s Christmas newsletter has a photo-related theme promoting its digital photo organizer software, iPhoto, and its photo books and calendar printing service.
HQhair.com gives its users an exclusive offer with a code. It not only emphasizes the word “FREE” but makes good use of the model to draw attention to the offer.
MoneySavingExpert newsletter
Previous experience tells us, though, that some users do not understand that the links in the table of contents navigate within the newsletter. Assuming that the links take them to a website, they avoid clicking them altogether. One solution is to avoid placing the links in the left or right columns, as Foodepedia does, which is where external links and ads are often found.
Foodepedia newsletter
BE WARY OF ADS
Si vous devez inclure des annonces dans votre newsletter, assurez-vous qu'elles se fondent dans le contenu. Lastminute.com en est un bon exemple , et PCMag.com en est un mauvais exemple, car il copie simplement le code Google AdSense directement dans sa newsletter, ce qui rend la page désordonnée et le contenu peu convaincant.
Newsletter Lastminute.com
Newsletter PCMag.com
Outils Et Fonctionnalités
Facilitez la désinscription des utilisateurs, mais ne leur rappelez pas toujours comment. Indiquez également aux utilisateurs comment ils peuvent modifier leur adresse e-mail, afficher la newsletter dans un navigateur Web et partager rapidement la newsletter avec leurs amis. Les autres fonctionnalités utiles incluent: «Suivez-nous sur Twitter», «Soyez notre fan sur Facebook» et «Regardez-nous sur YouTube».
Après L'envoi De La Newsletter
Après avoir envoyé votre newsletter, utilisez un outil de marketing par e-mail et un gestionnaire de listes pour suivre, surveiller et mesurer les performances de vos campagnes. De nombreux fournisseurs de services de messagerie existent, tels que MailChimp, iContact, Mailvivo, Mailing Manager et Atomic Email Tracker. La majorité d'entre eux fournissent également des modèles pour vous aider à créer votre newsletter si vous ne voulez pas vous salir les mains.
Vitrine
Le bulletin de la direction de MacHeist attire l'attention de ses lecteurs avec le prix de ses applications iPhone (0,99 £). Ensuite, il leur explique ce que MacHeist fait dans un court paragraphe et présente ses fonctionnalités de manière claire et attrayante via des icônes. Simple, intéressant et efficace.
Newsletter de Headscape avec de gros titres et de belles illustrations.
La newsletter de Muji a une mise en page soignée qui permet une numérisation rapide. Chaque section est accompagnée de belles images de produits et de prix.
Howies pourrait avoir un peu trop de texte dans sa newsletter. Cependant, il organise le contenu en différentes sections avec de grands titres clairs.
Le bulletin d’information de Noël d’ Apple a un thème lié à la photo faisant la promotion de son logiciel d’organisateur de photos numériques, iPhoto, ainsi que de son service de livres photo et d’impression de calendrier.
HQhair.com offre à ses utilisateurs une offre exclusive avec un code. Il met non seulement l'accent sur le mot «GRATUIT», mais fait bon usage du modèle pour attirer l'attention sur l'offre.
Bluefly divise intelligemment sa newsletter en deux sections: «Offres» (la section principale) et la section de navigation de droite, en utilisant de belles images dans le processus. Notez également comment il met l'accent sur l'offre à 80% et le mot «OFF» (en gros caractères).
Ambiance San Francisco adopte une approche créative basée sur le dessin pour encourager les utilisateurs à magasiner avec.
La newsletter de Disney Adventures est un autre bon exemple. Sa belle image donne aux utilisateurs une sensation de vacances.
Le bulletin d’information de Good Life Garden utilise efficacement le mot «gratuit» pour attirer l’attention de l’utilisateur. Le design est simple mais visuellement agréable. Malheureusement, le contenu est répété dans la même newsletter.
La newsletter de Bite Card contient des images de fond festives pour évoquer la saison hivernale. C'est simple, avec une grande bannière en haut indiquant le prix du produit, suivie de choix de cocktails et d'ingrédients.
La newsletter de Squawk attire les utilisateurs avec la magnifique couverture du livre en promotion pour ce mois.
La newsletter de Cauldron a également une mise en page soignée et définit clairement le but de chaque section. Il indique aux utilisateurs le sujet de son prochain numéro dans la section "Coming Next Month" en bas, une belle allumeuse.
La newsletter de Mango fait bon usage de couleurs vives et attrayantes.
iStockphoto utilise une galerie pour présenter ses huit meilleures photos du mois: soignées et faciles à numériser.
La newsletter de Threadless propose «10 $ par tee» en gros caractères clairs en haut de la page.
(Al)
- Commentaires 83
Unyouzed écrit - 15 février 2010 15:05
Merci: p
Réponse
Ron écrit - 15 février 2010 15:25
Bien, c'est bien de couvrir cela car il est important de rester en contact de cette façon, et peut être oublié dans la conception Web.
Réponse
Michael a écrit - 15 février 2010 16h00
Belle rafle, merci
Réponse
mr92 a écrit - 15 février 2010 16:22
pense qu'il devrait y avoir des informations sur les newsletters html / text, car beaucoup de gens bloquent les images (et les styles html) dans les newsletters (;
Réponse
Mikael Halén a écrit - 15 février 2010 16:35
Merci beaucoup! J'enregistre ce lien pour l'utiliser comme référence lorsque je rédigerai une newsletter à l'avenir. Post brillant comme toujours sur smashingmagazine!
Réponse
David K Rodriguez a écrit - 15 février 2010 17:02
Je suis d'accord avec @ mr92. De nombreux clients de messagerie ont des images désactivées par défaut. La plupart de ces exemples dépendent fortement des images. Vous dites «Utilisez des images pour guider les utilisateurs vers le contenu et les messages les plus importants». Est-ce à dire que le contenu le plus important doit être des images? Ou est-ce important? Et l'accessibilité? De plus, bien que l'e-mail de TripAdvisor ne semble pas inspiré, je ne pense pas que ce soit nécessairement une mauvaise chose. J'aime le design inspiré autant que quiconque; mais celui-ci est court, propre et au point avec un fort appel à l'action. N'est-ce pas plus important pour leurs fins? Je voudrais également ajouter que Campain Monitor est une excellente ressource pour la conception et le suivi des e-mails (même si je suis sûr que beaucoup de gens le savent déjà). Merci!
Réponse
Harrison a écrit - 15 février 2010 17:05
Je passe beaucoup de temps à créer des e-mails HTML et je pense qu'il est important d'essayer de ne pas utiliser d'images pour afficher du texte. De nombreux navigateurs de messagerie ont désactivé les images et de nombreux destinataires ne prennent pas la peine de choisir de les afficher. De plus, si vous créez un e-mail HTML entièrement avec des images imbriquées dans des tableaux, vous obtiendrez toujours un espace blanc entre les lignes lors de la visualisation via firefox dans hotmail! Je dis qu'il faut rester simple!
Réponse
Ray a écrit - 15 février 2010 22:34
Salut Harrison, j'ai vu votre commentaire, et je suis d'accord avec vous, j'ai juste pensé à le partager avec vous et tout autre créateur d'e-mails HTML, la raison de l'espace dans hotmail lors de l'affichage dans firefox peut être corrigée si vous incluez un style css en ligne dans les images le faisant s'afficher sous forme de bloc: style = "display: block", cela devrait résoudre votre problème. Quoi qu'il en soit, un excellent post, merci ...
Réponse
josh a écrit - 16 février 2010 5:43
Aux personnes qui parlent d'images non affichées: Pour ceux qui ne font pas de courriels non sollicités, les abonnés savent qu'ils recevront la newsletter et peuvent cliquer sur le bouton Afficher l'image. Vous pouvez styliser les styles de texte des balises alt pour aider à la hiérarchie des pages. Vous pouvez vous débarrasser de ces lacunes et la solution a pris environ trois minutes de recherche sur Google. Apparemment, la personne au-dessus de moi travaille, je l'ai vue mentionnée sur plusieurs sites. Pour une raison ou une autre, cela n'a pas fonctionné pour une partie de ce que je faisais donc j'utilise: vertical-align: top Cela supprime également les barres.
Réponse
Tobias a écrit - 21 janvier 2011 15:16
vous pouvez essayer de donner à chaque image un style en ligne: display: block. Ça marche pour moi. - désolé, je n'ai pas vu les commentaires précédents, de toute façon vous devriez maintenant faire l'affaire.
Réponse
Ronald | Naldz Graphics a écrit - 15 février 2010 17:17
Une bonne conception de newsletter par e-mail et leur expliquer comment cela fonctionne pourrait être un facteur qui motive les visiteurs à s'abonner :) nice post btw.
Réponse
Duncan Morley a écrit - 15 février 2010 17:33
Bon travail. Une très bonne lecture avec quelques points intéressants.
Réponse
Web Design Norwich a écrit - 15 février 2010 18:10
super merci
Réponse
Golf Royalty a écrit - 15 février 2010 18:19
Superbe article - mon premier signet SM de 2010! À la vôtre, Lee.
Réponse
Mohammad Koubeissi a écrit - 15 février 2010 18:20
Excellent article, je suis heureux que la conception d'e-mails commence à se faire davantage remarquer dans les blogs de conception. J'ai commencé http://beautifulemails.com pour aider les autres avec la conception de newsletter et le marketing par e-mail. Merci.
Réponse
Sunny Kumar a écrit - 15 février 2010 19:23
Grands conseils et exemples.
Réponse
Dzinepress a écrit - 15 février 2010 19:56
vous partagez un autre article d'aide avec des directives de newsletter et de très bons exemples.
Réponse
Web4half | Web Design a écrit - 15 février 2010 20:37
Merci d'avoir préparé cette liste impressionnante…
Réponse
Jackson a écrit - 15 février 2010 21:26
Excellent article avec quelques idées et conseils utiles. Voici une galerie de conception d'email: http://www.htmlemaildesigns.com/
Réponse
Freakshow a écrit - 15 février 2010 22:17
"Sois créatif". Sérieusement? Vous avez écrit ça?
Réponse
SHG a écrit - 15 février 2010 23:51
Très peu des exemples ci-dessus sont ce que j'appellerais des "newsletters par e-mail". Un bulletin d'information est une communication qui informe et divertit le lecteur sur un point d'intérêt commun. La moitié de ce qui précède n'est que de gros coupons livrés par e-mail. Je jette ces coupons quand je les reçois dans le courrier (physique) et je les jette quand je les reçois par e-mail.
Réponse
nk a écrit - 19 octobre 2011 14:12
Je suis d'accord. En parcourant l'article, il m'a semblé que la plupart des exemples n'étaient pas du tout des newsletters, juste des publicités déguisées en newsletters. Aujourd'hui, ce qui passe pour de la vraie information n'est que de la publicité pour les gens avec une courte durée d'attention qui ne veulent pas vraiment utiliser leurs muscles mentaux.
Réponse
c-64 a écrit - 16 février 2010 0:17
Agréable comme d'habitude chez SM. Existe-t-il une bonne application gratuite pour envoyer des newsletters?
Réponse
Marco a écrit - 16 février 2010 0:48
http://htmlemailgallery.com est un autre qui devrait être mentionné.
Réponse
Min a écrit - 16 février 2010 2:20
Merci pour cet excellent article ~ Toujours une grande aide. Inspirations de conception de newsletter: http://www.email-gallery.com http://www.campaignmonitor.com/gallery/
Réponse
Ramm a écrit - 16 février 2010 3:05
Et où sont les informations techniques sur la façon de les fabriquer? Prise en charge CSS, taille, poids, différences entre les clients de messagerie, etc. Un examen des applications de messagerie serait également intéressant. C'est comme un article Cosmopolitan, trop superficiel pour moi. Je suis déçu :(
Réponse
Bethany a écrit - 22 mars 2010 21:12
Consultez la section "Ressources" des moniteurs de campagne. Ils ont une liste complète de ce que CSS fonctionne dans quel client de messagerie. Très utile si vous débutez !!
Réponse
Paul a écrit - 16 février 2010 6h30
As always - an amazing article with excellent examples! Thanks man.
Reply
jini wrote — february 16, 2010 7:34
great designs and very informative stuff,, check your website worth websitereckon thanks
Reply
tommy wrote — february 16, 2010 7:35
Thanks for this great article. It would be nice if someone could post the HTML code of the showcased newsletters (e.g. via pastebin). This will make it easier for developers to understand how others structure the newsletters "under the hood".
Reply
Johan de Jong wrote — february 16, 2010 11:02
@Tommy: les bases pour construire des modèles HTML sont simples; 1) oubliez tout ce que vous savez sur HTML et CSS 2) utilisez des tableaux, des tableaux et encore plus de tableaux 3) utilisez uniquement le CSS en ligne (et oubliez les feuilles de style complètes) 4) lors des tests: si cela fonctionne dans Outlook, cela fonctionne partout! (sauf Lotus ...)
Réponse
josh a écrit - 17 février 2010 0:40
Non. Si cela fonctionne dans Outlook, il peut se briser dans Hotmail sur Firefox. Sans oublier que vous devez spécifier Outlook 2007, les anciennes versions sont meilleures.
Réponse
tommy a écrit - 17 février 2010 8:05
Johan, merci pour ta réponse. J'ai remarqué que certaines newsletters sont disponibles en version en ligne et j'ai analysé un peu la structure. C'est vraiment un gâchis et frustrant qu'il est si difficile de créer de bonnes newsletters de nos jours.
Réponse
Anrkist a écrit - 16 février 2010 16:35
Quelqu'un a récemment dit de "coder comme si c'était 1999". - Je ne pense pas que cela doive être aussi drastique mais vous comprenez. Supprimez également toutes les balises META ... elles n'ont pas leur place dans les e-mails. Je ne suis pas d'accord avec l'énoncé n ° 4. Outlook est le plus indulgent de tous les clients de messagerie. Il n'aura pas la même apparence dans Gmail ou Yahoo la plupart du temps. Testez sur autant de plateformes que possible. Il existe des tableaux pratiques expliquant ce qui est et n'est pas pris en charge dans le courrier électronique basé sur le Web. Je pense que vous pouvez en trouver un sur CampaignMonitor, dont le lien a déjà été fourni par d'autres ici.
Réponse
Paula a écrit - 16 février 2010 9:06
Bons exemples et bons conseils. Bien que le problème HTML / txt soit toujours discutable. Là encore, je ne peux pas tous les atteindre de toute façon.
Réponse
Federica Sibella a écrit - 16 février 2010 9:39
Merci, belle rafle. Juste à temps, c'est vraiment ce que je cherchais.
Réponse
Marc Wisbey a écrit - 16 février 2010 11:56
- n'oubliez pas de LIRE votre email avant de l'envoyer pour éviter des erreurs telles que; "..si vous êtes un client excitant (sic) de Headscape" (désolé Paul!)
Réponse
TSF a écrit - 16 février 2010 12:59
Qu'en est-il de celui-ci http://www.associatednewspapers.co.uk/es/homes_property/0209_h_p_template.html
Réponse
Andrew a écrit - 16 février 2010 15:45
! = un doute, mon article SM préféré dans les 12 dernières mois. Merci beaucoup pour cela.
Réponse
Stacey a écrit - 16 février 2010 17:32
Cet article dit essentiellement "faites de jolis designs" dans vos newsletters par e-mail. Cependant, vous ne mentionnez pas la complexité qui entre dans leur construction correctement, et de nombreux concepteurs qui ne savent pas comment optimiser leurs conceptions de messagerie pour ce support particulier finiront par se frustrer eux-mêmes ou leurs constructeurs s'ils suivent les conseils de cet article. De plus, cela ne va PAS bien paraître dans Outlook 2007, peu importe ce que vous faites, alors bonne chance avec ça!
Réponse
Btravis a écrit - 16 février 2010 22:10
Quel type de prix doit être utilisé lors de la conception d'une annonce par e-mail toutes les deux semaines. Facturez-vous à l'heure ou à un prix forfaitaire?
Réponse
Michal Kozak a écrit - 17 février 2010 0:10
Post vraiment sympa, les gars :). Vous avez couvert beaucoup de choses, je dois l'admettre.
Réponse
Matt Jackson a écrit - 17 février 2010 1:40
Merde, vous avez beaucoup couvert. Excellent article - mis en signet pour plus tard. :RÉ
Réponse
Dave Rosen a écrit - 17 février 2010 1:53
Ce sont de bons exemples! Nous avons également publié un guide qui couvre quelques éléments supplémentaires: http://blog.xhtmlized.com/2010/02/15/newsletters-the-missing-guide/
Réponse
pantareimadrid a écrit - 17 février 2010 10:19
Merci, super article! Certains de ces bulletins préfèrent présenter jusqu'à 5 sujets différents, qu'en est-il de ceux qui présentent plus de 10 sujets différents? Pensez-vous que ce soit une bonne recommandation? Un exemple: http://asp2.xqueue.de/ff/display.php?msgID=364797861&[email protected]
Réponse
Bim a écrit - 17 février 2010 10:47
Merci. imo il n'y a pas beaucoup de newsletters par e-mail qui semblent bonnes. certains d'entre eux ne sont pas mauvais. si une newsletter par e-mail est bien présentée, pas trop de contenu, un bon contenu informatif et facile à regarder - ce sera un succès ... tout comme un site Web si vous le souhaitez. s'il est bien codé, il sera presque toujours correct dans les perspectives, bien qu'il soit un peu b ** . en toute honnêteté, je ne m'inspire pas des galeries d'email html listées dans les commentaires ... la plupart de l'inspiration vient de beaux sites web.
Réponse
Giorgi a écrit - 17 février 2010 10h55
J'ai lu ces nouvelles sur http://designshack.co.uk/community/email-newsletter-design-guidelines-and-examples
Réponse
Niubi a écrit - 17 février 2010 15h00
Some great looking newsletters there. You missed DubLi.com's newsletter out, though - they have an innovative design that appeals to a lot of people, and of course it is jam-packed with information for everyone!
Reply
Matthias wrote — february 17, 2010 18:30
you should see: http://litmusapp.com/email-testing works great!
Reply
Ant wrote — february 17, 2010 23:54
To be honest, I find e-mail letters with «design» (images, multiple columns and other such things) confusing. I prefer simple straight-forward letters with html styling (without css).
Reply
Scott Wickberg wrote — february 18, 2010 0:44
Malheureusement, cette liste (comme la plupart) laisse complètement de côté toute section traitant de l'apparence de votre conception lorsque les images sont désactivées. Généralement, 70% ou plus de votre base d'utilisateurs recevront votre message avec des images bloquées. En effet, très peu de gens ajoutent l'e-mail de votre newsletter à leur carnet d'adresses. Donc, dans ce cas, il est très important de styliser vos balises alt et de commencer à réaliser que les mises en page qui s'appuient sur des images pour relayer toutes les informations manquent le point, et plus important encore, les téléspectateurs manquants. Apple en est un parfait exemple. Généralement, les 20% des e-mails les plus importants sont une grande image avec un très mauvais tag alt. Donc, quand je le reçois, tout ce que je vois est une grande image manquante jusqu'à ce que je les autorise. En général, je m'en fiche assez d'aller cliquer et d'autoriser l'image pour qu'ils me manquent. S'ils l'avaient mieux stylisé en utilisant le type pour relayer leur message tout en complétant leur belle imagerie, ce serait un gagnant / gagnant. Quoi qu'il en soit, les diatribes sont terminées. Mais Smashing puis-je suggérer un article sur l'art de concevoir des e-mails qui ont fière allure même lorsque les images ne sont pas encore autorisées. Peut-être même un avant et un après la conception des e-mails. Scott Wickberg
Réponse
Michelle a écrit - 18 février 2010 17:39
Très bonne publication. La seule critique constructive que j'ai, c'est que je souhaite que la fin des captures d'écran des newsletters ne soit pas interrompue. J'aurais aimé voir les pieds de page. Juste quelque chose à garder à l'esprit pour la prochaine fois peut-être, même si les images plus courtes ont aimé l'image complète ... Une autre chose que j'aimerais voir est plus de stratégie et de discussion sur les newsletters automatiques, comme les e-mails quotidiens des magazines, pas seulement promotionnels courriels. Des questions comme: quel devrait être votre sujet? La même ligne d'objet tous les jours? Un design qui n'est pas ennuyeux à regarder au quotidien? etc. Merci pour la grande info!
Réponse
Kim Dushinski a écrit - 19 février 2010 3:41
Qu'en est-il des personnes qui lisent ces e-mails sur leurs appareils mobiles? Ceux-ci ne vont pas s'afficher correctement. Ce n'est pas le jour et l'âge d'ignorer le mobile.
Réponse
Samuel Delabarre a écrit - 19 février 2010 11:50
Très très instructif, merci beaucoup!
Réponse
Sherwood Botsford a écrit - 25 février 2010 8:17
La plupart de ces exemples sont horribles! Longue paillettes. La plupart des gens sont prêts à lire un bulletin d'information qui ne comporte pas plus de 4 à 5 écrans. Je vis au mauvais bout d'un lien lent. Pour moi, le meilleur bulletin d'information est celui qui contient des histoires qui ne sont pas plus de 100 à 200 mots, 0 ou 1 illustrations et un lien vers l'histoire complète. À peu près la façon dont le site Web de SmashingMagazine est présenté. Je m'abonne à une newsletter quotidienne de Slashdot. Chaque histoire a généralement des liens vers l'article d'origine, parfois plusieurs liens vers l'article principal, la réfutation, le commentaire .... Mais je ne suis intéressé que par environ 1 histoire sur 4. Le format me permet de passer rapidement à la suivante une. Si je suis intéressé, faites un clic droit, ouvrez dans un nouvel onglet. Ceci est la forme abrégée de la lettre d'information. Je me suis récemment désabonné de la lettre d'information Jacob Neilsons Ergonomie. Pourquoi? Il a parcouru 95% de son bulletin en fouettant ses livres et ses séminaires. Résumé en trois lignes d'un article qui, lorsque vous y accédez, en dit peu, mais fouette ses livres et ses séminaires.
Réponse
Andrew Seaward a écrit - 25 février 2010 11:49
Excellent article, quelques remarques utiles bien faites. Merci
Réponse
Tim a écrit - 27 février 2010 22:04
Je vais devoir intervenir ici et commenter la désactivation des images. J'ai utilisé BEAUCOUP de clients de messagerie pour Mac (Mail, Thunderbird, Hotmail, Yahoo, Gmail, Outlook Express pour OS9 et plusieurs autres). Je n'ai jamais rencontré une seule fois une application de messagerie électronique qui désactivait les images. Il y a peut-être 8 à 10 ans, la conception d'e-mails pour une meilleure lecture lorsque les images ne sont pas affichées était la norme, mais plus maintenant. Tout comme les sites Web sont devenus plus chargés d'images, les e-mails aussi. La grande majorité des newsletters par e-mail (ou des blasts comme je préfère les appeler) font la publicité de quelque chose, généralement des produits sur le site Web de l'expéditeur ou des promotions ou autre. Afin de faire la publicité de ces produits, vous DEVEZ utiliser des images. Ces images doivent certainement utiliser des balises ALT, mais à moins que l'e-mail ne soit directement envoyé au dossier de courrier indésirable du destinataire, ces images seront affichées à moins que le destinataire n'ait désactivé cette option manuellement dans ses préférences d'application de messagerie. Parlant de l'expérience personnelle des membres de ma famille utilisant des ordinateurs, peu de gens savent comment changer quoi que ce soit dans leurs préférences d'application de messagerie. Il est toujours bon d'être prudent sur la taille des images dans les e-mails, mais qu'elles soient affichées ou non n'est pas un problème, je pense.
Réponse
Tim a écrit - 27 février 2010 22h09
De plus, je tiens à souligner qu'un e-mail textuel sans images (ou images non affichées) n'incitera personne à cliquer dessus pour accéder à un site Web ou acheter quoi que ce soit. Les images sont ABSOLUMENT nécessaires pour un appel à l'action et pour attirer l'attention des lecteurs. Sinon> cliquez sur> Corbeille.
Réponse
Bethany a écrit - 22 mars 2010 21:11
Gmail n'affiche PAS les images par défaut.
Réponse
Greg a écrit - 27 mars 2010 15:50
Entièrement d'accord sur cette question. Les applications de messagerie deviennent de plus en plus avancées en ce qui concerne l'affichage des e-mails au format html. Dans un avenir proche, les plus grands s'ouvriront un peu dans le domaine du style et du code autorisé. Toute personne intéressée peut vouloir mettre en signet ce site Web, car elle se lance dans une manière rafraîchissante d'utiliser tous les outils disponibles pour mieux communiquer, y compris la campagne de messagerie électronique et la webdiffusion ou les webinaires. Ajout de vidéo dans le mix e-mail (explosion). Découvrez-le: http://www.comf5.com
Réponse
robertflorish a écrit - 18 mars 2010 4:53
Informations vraiment très utiles fournies. Merci pour l'information.
Réponse
Robert a écrit - 6 avril 2010 19:37
Le lien vers le blog dzine est mort: http://dzineblog.com/2009/08/25-impressive-email-newsletter-designs-for-your-inspiration.html%29
Réponse
Christiane Rosenberger a écrit - 6 avril 2010 23:15
Fixé! Merci, Robert :-)
Réponse
Scott Hardigree a écrit - 12 avril 2010 18:12
Voici une autre soumission qui regorge de goodies, y compris des blocs de contenu dynamique, des outils de partage social, une animation de sécurité et un rendu d'image: http://www.indiemark.com/newsletters/0410/ Merci, -S.
Réponse
Alan a écrit - 21 avril 2010 1:04
Est-ce juste moi, ou est-ce que l'annonce "Loco" du Sud est juste un peu raciste?
Réponse
Leuis a écrit - 2 juillet 2010 11h59
Merci pour la publication.La grande majorité des newsletters par e-mail (ou des blasts comme je préfère les appeler) font la publicité de quelque chose, généralement des produits sur le site Web de l'expéditeur ou des promotions ou autre chose. Afin de faire la publicité de ces produits, vous DEVEZ utiliser des images. Ces images doivent certainement utiliser des balises ALT, mais à moins que l'e-mail ne soit directement transféré dans le dossier de courrier indésirable du destinataire, cette image sera affichée à moins que le destinataire n'ait désactivé cette option manuellement dans ses préférences d'application de messagerie. Je me suis récemment désabonné de la lettre d'information Jacob Neilsons Ergonomie. Pourquoi? Il a parcouru 95% de son bulletin en fouettant ses livres et ses séminaires. Samsung voici II
Réponse
Karl a écrit - 4 juillet 2010 23:19
Un excellent article, le plus informatif.
Réponse
clé Windows 7 a écrit - 7 août 2010 6:18
Eh bien, je veux présenter, sous le suivant
Réponse
Colin a écrit - 1 octobre 2010 20:16
** Si vous ne pouvez pas voir cet e-mail, vérifiez la version Web ou peut-être pas votre choix S'IL VOUS PLAÎT N'IMPORTE QUI N'utilisez pas votre première ligne avec de la merde C'est la première chose que je vois sur mon mobile (iPhone) pour un aperçu par e-mail. Si je suis abonné à votre newsletter, ce n'est pas pour aller sur votre site, c'est pour l'obtenir où je vous demande de l'envoyer! Vous voulez attirer mon attention, commencez par quelque chose d'attrayant !! Je n'ai pas ouvert votre email et déjà je pense que vos idots ne peuvent pas me présenter quelque chose de testé! Nice SM! Marqué! (les gens font-ils encore des signets?)
Réponse
Marie Holdaway a écrit - 8 juin 2013 13:41
idots, j'adore
Réponse
Evinrisca a écrit - 1 mars 2011 12:52
Comment envoyez-vous exactement une newsletter. Je viens de créer un fichier html très basique à l'aide de tableaux et de quelques images - qui vivent toutes sur un serveur en ligne - je peux l'envoyer en pièce jointe depuis mon Mac et en testant, il est reçu sur Mac et PC avec une variété de clients de messagerie, sans aucun problème. Cependant, l'entreprise pour laquelle j'ai fait cela ne peut pas l'envoyer sans qu'il y ait des problèmes dans le résultat final - ils utilisent Outlook, Windows 2010 - l'envoi en tant que pièce jointe ne fonctionne pas et je ne trouve aucun moyen d'inclure fichier html comme signature ou thème.
Réponse
Andrew a écrit - 20 avril 2011 2:56
Outlook est le pire client de messagerie pour lequel concevoir, consultez http://www.campaignmonitor.com/ et http://fixoutlook.org/
Réponse
Dan a écrit - 9 mars 2011 17:48
J'adore la liste d'exemples ... Bravo
Réponse
Andrew a écrit - 20 avril 2011 2:53
... maintenant essayez d'en créer un, pas de fin si vous pensiez que la conception pour les navigateurs Web était un enfer ...
Réponse
Rory a écrit - 17 juin 2011 22:24
Il s'agit d'une ressource fantastique pour les bulletins électroniques. La conception, la création, les CTA (Call-to-Actions), le contenu, etc. jouent tous un rôle. Ce n'est pas seulement une ligne d'objet ou la couleur du bouton qui fait que les gens "aiment" l'e-mail. C'est l'ensemble du processus et de l'expérience, sans parler de la page de destination de l'e-mail, car c'est là que les utilisateurs se cachent. Je travaille actuellement pour un fournisseur de services de messagerie maintenant, http://www.bombbomb.com. Nous fournissons des vidéos dans l'e-mail ainsi que du HTML traditionnel. Nous avons constaté que la vidéo peut être un énorme catalyseur pour la conversion ainsi qu'une augmentation de l'activité au sein de l'envoi par e-mail. Il y a quelque chose à ajouter un élément humain au marketing numérique qui fonctionne vraiment. ... et +1 sur le commentaire d'Andrew au-dessus du mien. Développer pour les navigateurs peut être un enfer, essayez également de coder pour les e-mails. Outlook peut être un cauchemar complet!
Réponse
Julie a écrit - 11 août 2011 18:33
Aimez la créativité de vos créations. Je vais continuer.
Réponse
Haris a écrit - 6 octobre 2011 9:40
Un très bon article sur les newsletters par e-mail. Je vous remercie.
Réponse
Adeel Janjua a écrit - 10 octobre 2011 10:56
Informations très instructives et exhaustives sur le sujet. Ne cherchez pas plus loin pour plus d'informations à ce sujet. Merci
Réponse
Gite Mandelieu a écrit - 14 octobre 2011 19:53
Je ne suis pas en désaccord avec ce blog
Réponse
Scott a écrit - 20 février 2013 1:37
cet article est bon pour quelqu'un qui est développeur, mais maintenant quelqu'un a trouvé un logiciel appelé http://www.emailslicer.com/ donc pas besoin d'adobe ou d'un autre logiciel cher à acheter. vous devriez écrire un article à leur sujet. Je le fais moi-même et j'ajoute simplement l'opt-out et je suis prêt à partir. J'ai travaillé avec odesk et elance et j'ai embauché des codeurs de messagerie html mais maintenant depuis que j'ai trouvé ces outils, je ne peux pas dire à quel point je suis plein et sans stress.
Réponse
Le xuan ha a écrit - 3 avril 2013 22:02
Un très bon article sur la newsletter email Merci
Réponse
Marie Holdaway a écrit - 8 juin 2013 13:39
Pour quelqu'un qui est nouveau dans la conception des e-mails de newsletter, je pense que c'est un excellent point de départ pour moi - il décrit ce qui fait que certaines newsletters fonctionnent et ce qui fait que d'autres newsletters ne fonctionnent pas. Merci beaucoup pour le partage et pour l'inspiration!
Réponse
Aditi a écrit - 30 septembre 2013 6h30
Je voulais savoir quelle est la bonne taille de la liste d'abonnement pour commencer à envoyer la newsletter?