9 astuces pour concevoir le bulletin HTML parfait

Un bulletin électronique est le moyen idéal pour rester en contact avec vos clients ou vos abonnés. Votre entreprise ou votre site Web aura souvent de nombreuses mises à jour de produits, voire d’événements à venir que vous voudriez partager. Il est toujours possible de publier de nouvelles informations sur votre blog ou sur des flux de médias sociaux, mais votre public ne peut aller que très loin pour vous atteindre. Dans ce cas, le courrier électronique n’est certainement pas une technologie morte, mais un potentiel inexploité..

Le processus de création et d'envoi d'un bulletin d'information est beaucoup plus simple qu'on ne le pense, mais pour concevoir un modèle personnalisé et créer votre propre code, cela peut prendre un peu plus de temps..

Nous avons rassemblé quelques astuces fantastiques pour vous aider à concevoir des newsletters HTML de haute qualité comme jamais auparavant. Même si vous êtes un novice en la matière, vous trouverez sûrement des informations précieuses pour vous aider à démarrer dans le processus de marketing par courrier électronique..

Objectifs d'une newsletter

Avant d'entrer dans les aspects de conception, nous devrions clarifier votre objectif de créer un bulletin d'information. Selon le type de site Web que vous exploitez, les informations contenues dans votre bulletin d’information peuvent différer considérablement des autres, mais le but principal d’un bulletin d’information est de fournir des mises à jour pratiques directement dans la boîte de réception de votre lecteur.

Les gros utilisateurs d'Internet sont susceptibles de vérifier leur courrier électronique plus de deux fois par jour. Même ceux qui sont constamment occupés prendront le temps de parcourir leurs messages au moins une fois par jour. C'est le moment idéal pour attirer l'attention même sans nécessiter de visites sur votre site. Même si personne ne clique sur vos liens, les informations sont toujours reçu, ce qui est idéal pour construire un nom de marque.

Examinez certains des sujets que vous auriez besoin d’offrir dans votre conception. Incluez-vous des liens pour vous inscrire à votre service? éventuellement des liens de blog ou les articles les plus récemment publiés sur votre site? La mise en page de votre bulletin d’information reflétera la façon dont vous souhaitez que vos lecteurs réagissent, mais au final, vous cherchez à susciter l’intérêt et à transmettre des informations intéressantes aux masses..

1. Utiliser des tableaux dans vos mises en page

Cela peut sembler un peu contradictoire par rapport aux normes Web modernes, mais les courriers électroniques restent archaïques dans leurs moteurs de rendu. Vous devez donc vous adapter aux modèles plus anciens. Malheureusement les tables sont le moyen le plus simple pour que tout fonctionne correctement entre les différents clients de messagerie. En fonction de vos connaissances en matière de création de dispositions basées sur des tables, cela pourrait être une bonne nouvelle.!

Vous pouvez aussi vous demander pourquoi div et d'autres éléments de bloc ne sont pas une si bonne idée. La plupart des clients de messagerie sont construit pour éliminer tout CSS superficiel contenu. Cela signifie que vous ne pourrez pas utiliser grand chose à l'exception de CSS en ligne (et même un support complet est de mauvaise qualité). Des clients tels que Microsoft Outlook 2007 et Gmail de Google ne prennent pas en charge les éléments flottants et le positionnement direct..

La meilleure solution serait de imbriquer plusieurs tables les unes dans les autres. Le rembourrage et les marges ne sont pas définis sur une échelle particulière entre de nombreux clients de messagerie. C'est une raison de s'en tenir à l'utilisation width = "valeur" sur tous vos éléments de cellules de table. Ceux-ci afficheront toujours la même largeur, quel que soit le client de messagerie que vos lecteurs utilisent. plus sûr et plus cohérent définir le remplissage et les marges à l'aide de cellules de tableau vides.

2. Positionnement à largeur fixe

Vous avez quelques options pour créer les brouillons de votre mise en page de bulletin, mais la meilleure option à suivre est définir des largeurs fixes pour votre table conteneur. Il existe de nombreuses résolutions d'écran différentes - vous ne pourrez pas faire plaisir à tout le monde. Si vous n'avez pas d'éléments particuliers avec des largeurs statiques, vous pouvez toujours utiliser width = "100%" sur votre table contenant. Cela permettra à votre contenu de remplir toute la largeur de tous les clients de messagerie..

Cependant, pour beaucoup cette méthode est un peu trop laxiste. Bulletins d'information constructifs nécessitera une largeur fixe dans la plupart des cas, en particulier si vous utilisez des bannières et des images définies pour une taille particulière. Je recommande de travailler avec 500px - Largeur maximale du document de 600px. La taille d'écran horizontale de l'iPhone et de certains modèles BlackBerry est limitée à 320 pixels. Ainsi, même à 500 pixels, votre modèle d'e-mail sera réduit pour s'adapter correctement.

Étant donné que de nombreux utilisateurs mobiles choisissent de toute façon d’afficher leurs e-mails sans HTML, cela ne devrait pas être un gros problème. Les utilisateurs de clients de bureau et de messagerie Web auront probablement une configuration similaire quel que soit le système d'exploitation utilisé. En cas de doute créer quelques modèles et choisissez ceux que vous préférez!

3. Unités de pixels

À moins que vous utilisiez des éléments fluides dans votre newsletter, vous devrez probablement redimensionner quelques éléments. Essayez de le garder dans pixels (px) plutôt que dans un autre type d'unité. Les pourcentages peuvent facilement être mélangés avec les nombreux clients de messagerie Web et les fenêtres de logiciel. Avec moins d'éléments de page, les dispositions fluides peuvent sortir indemnes, bien qu'avec quelques bugs..

Mais les pixels sont toujours une chose sûre. En travaillant dans la limite de largeur maximale de 600px, vous pouvez réellement insérer beaucoup de contenu à l'intérieur. L'exposition est plus facile si vous divisez vos mises en page en deux ou trois colonnes et écrivez toujours vos tailles en pixels. La seule exception peut être de tailles de police où ems peut mieux supporter vos lecteurs, mais em dimensionnement différera de manière similaire les pourcentages seraient - donc pour plus de simplicité, respectez les alignements basés sur les pixels.

4. Les possibilités avec CSS

Il peut sembler que la conception des e-mails est destinée à détruire l’utilisation des styles CSS. Bien qu'il existe de nombreuses fonctionnalités non prises en charge, CSS est toujours parfaitement acceptable dans de nombreux cas. Campaign Monitor dispose d'un beau tableau des propriétés CSS prises en charge, répertoriées par client de messagerie. Tous soutiendront les bases comme famille de polices et le style de police, afin que vous puissiez sauter le tag si vous le souhaitez.

Méfiez-vous de vos styles de police afin de ne pas pousser les limites trop loin. Si vous ne vous sentez pas à l'aise avec les styles en ligne, il est toujours possible d'utiliser la balise de police HTML même si elle est obsolète. Si vous êtes un concepteur CSS, vous n'avez pas besoin de quitter le système, mais tout codage CSS abrégé peut entraîner des problèmes de conception. À titre d'exemple, le police: Arial 12px / 14px, sans serif; le raccourci peut aider à économiser beaucoup d'espace, mais il n'est pas entièrement accepté pour la conception de courrier électronique, même s'il est utilisé avec des styles en ligne.

Même vos choix de couleurs devrait être écrit à la main. Couleurs hexagonales telles que #ccc ou # e3f doit être écrit en entier comme #cccccc ou # ee33ff, respectivement. Si vous pouvez créer ce dont vous avez besoin sans CSS, je vous recommanderais ce chemin, mais ne vous découragez pas complètement dans les conceptions de courrier électronique car, contrairement à la croyance populaire, il est généralement pris en charge.

5. Meilleures pratiques pour les liens d'ancrage

Vous voudrez sûrement inclure des liens dans votre newsletter. Il peut s’agir de liens sortants vers d’autres pages du Web, ou peut-être de liens menant aux pages les plus populaires de votre site Web. En outre, la plupart des pieds de page contiendront un lien de désinscription permettant à vos lecteurs de se retirer du processus de messagerie, mais comment gérer tous ces liens dans votre conception?

Il convient de noter d’abord que les clients de messagerie électronique sont très précis dans leurs conceptions. Beaucoup choisiront d'écraser vos styles de lien, même avec du CSS en ligne. Une astuce consiste à inclure à la fois une couleur en ligne et une balise span supplémentaire dans l'élément d'ancrage. Si la couleur et le style de vos liens sont importants pour la conception générale, vous devrez prendre des précautions supplémentaires. J'ai ajouté un petit exemple de code ci-dessous:

un texte de lien

Les effets de survol sont non pris en charge dans Outlook 2007/2010, Gmail, iOS ou Android. Vous voudrez peut-être quand même inclure le un vol stationnaire style pour tous les clients pris en charge: Outlook 2000/2003, Hotmail, Apple Mail et Yahoo! mail, mais personnellement, je ne vois pas beaucoup d'avantages dans l'expérience utilisateur partielle, car les sélecteurs d'ancrage ne sont pas fortement supportés, je le recommande tout en offrant 2-3 couleurs de lien à utiliser tout au long de votre conception.

En principe, les utilisateurs s'attendent également à ce que vos liens s'ouvrent dans un nouvel onglet ou une nouvelle fenêtre. Idéalement le target = "_ blank" Cet attribut devrait être suffisant pour que tous les navigateurs reconnaissent cette fonctionnalité, et l'inclusion de cet attribut dans vos liens d'ancrage ne devrait pas affecter négativement les logiciels de messagerie tels que Lotus Notes ou Outlook..

6. Test chez tous les principaux clients

Une étude récente sur les clients de messagerie les plus populaires (réalisée par Campaign Monitor) montre que dix des clients de messagerie les plus populaires au cours de la dernière année. Cela peut sembler un peu fastidieux mais les concepteurs devrait prendre l'habitude de vérifier leurs bulletins d'information sur tous les principaux clients de messagerie, à tout le moins sur certains des clients les plus courants tels que Gmail, Hotmail ou Yahoo! Courrier.

Cela n'inclut pas uniquement la messagerie Web, mais également les logiciels d'exploitation sous Mac OS X et Windows. Toujours selon leur schéma Courrier iOS et Android ont tous deux été propulsés dans la liste des 10 meilleurs au cours des dernières années. En fait, iPhone, iPod Touch et iPad Mail se classent au deuxième rang des droits les plus populaires sous Outlook! Malheureusement, il n’existe pas de moyen de les tester sans posséder l’un des appareils. Vous devrez donc choisir d’autres options..

Un bug avec le support mobile vient dans de nombreux modèles iPhone et Android. Le rendu du courrier électronique mobile sera souvent redimensionner le texte à l'intérieur de votre modèle. Cela n’affectera peut-être pas beaucoup votre conception, mais cela peut être gênant pour certains lecteurs. Utiliser le CSS -webkit-text-size-ajuster: aucun;, volonté assurer une taille de texte par défaut uniforme dans tous les moteurs d'analyse sans avoir besoin de le tester.

Si vous connaissez des amis ou des collègues qui utilisent un logiciel alternatif, vous pouvez souhaiter demander leur aide pour tester la newsletter. Tu peux soit leur envoyer une copie de l'e-mail pour vérifier sur leur appareil ou emprunter l'appareil éliminer activement les bogues de codage. Heureusement, Outlook propose une version d'installation Mac afin que vous n'ayez pas besoin de rechercher un utilisateur Windows pour ces optimisations, mais en ce qui concerne Lotus Notes ou Windows Mail, vous risquez de ne pas avoir de chance..

L'alternative est de payer pour une solution comme Preview my E-mail, malheureusement, ils ne fournissent pas de compte démo gratuit, mais leur service est réputé pour offrir de superbes aperçus de votre conception. E-mail on Acid est un service similaire qui offre un compte gratuit mais ne vous permet pas de tester tous les clients, ce qui va à l’encontre du but recherché. Les services de rendu en ligne devraient être utiles si vous devez tester de nombreux modèles de newsletter à long terme sans utiliser d’autres ordinateurs, mais ils ne sont pas fondamentaux. ne stresse pas si vous ne pouvez pas tous les tester!

7. Toujours offrir des vues Web

Les lecteurs ne pourront pas toujours (ou ne voudront pas) voir votre courrier électronique de manière native. Proposer une autre version quelque part sur le Web donnera un sentiment de facilité et de compatibilité. Ce processus ne peut être complètement automatisé sauf si vous souhaitez inclure un texte brut version.

De cette façon, vous efface toutes les balises HTML de la mise en page de la newsletter. Vous ne pourriez pas inclure de liens ou de styles pour quoi que ce soit. Tout le contenu serait simplement être présenté sous forme de fichier texte brut pour les lecteurs sans les capacités de rendu. C’est certainement une bonne alternative, mais lorsque vous proposez une version Web complète de la même lettre d’information, enlève les dégâts causés par tout bug de rendu. La plupart des lecteurs utiliseront un navigateur Web à jour sur lequel vous pourrez styler et créer votre bulletin d'information à la perfection..

Comment vous configurez la page est tout à fait votre choix. Certains sites Web dédier un article entier à la duplication du contenu de l'e-mail, peut-être avec certains Information additionnelle. D'autres vont créer une page séparée du site Web principal sans aucun lien direct dans la navigation. Cette méthode peut être bénéfique car les lecteurs ne seront pas distraits par le modèle de votre site Web principal ou le contenu de la barre latérale..

8. Ajout du contenu de l'image

Les images sont une autre raison d'offrir à vos lecteurs une solution Web. Par défaut, les clients de messagerie sont configurés pour supprimer les images du contenu. Si votre adresse est ajoutée à une liste sécurisée, toutes les images seront affichées par défaut, mais l'utilisateur doit accepter cette configuration donc ce n'est certainement pas une garantie. Juste assurez-vous que les images ne sont pas obligatoires dans le contenu principal, mais inclus comme garniture supplémentaire pour l'esthétique de la page.

Une fois que vous avez exporté des graphiques, voici quelques astuces pour créer des images spécifiquement pour le courrier électronique. Vous voudrez toujours définir les attributs de largeur et de hauteur sur votre img Mots clés. Sans ces spécifications dans l'ordre, certains clients vont déformer le contenu de l'image. Un alt La balise sera également utile, afin que les visiteurs sachent ce que le contenu de l'image contient avant de le charger..

Comme mentionné précédemment, il peut être difficile de positionner les images dans votre courrier électronique.. Évitez d'utiliser des flotteurs à tout prix! L'image align = "left" attribut fonctionnera beaucoup mieux, ou alternativement cartographier les cellules exactes du tableau pour adapter vos images dans la partie supérieure, gauche ou droite de votre bulletin. Vous ne serez pas en mesure d’obtenir une correspondance parfaite avec autant de clients (surtout les clients mobiles), mais optimiser vos images et limitez la taille des fichiers pour de meilleurs résultats.

En ce qui concerne le stockage des images, il est recommandé de conserver tous les fichiers sur votre propre serveur Web. C’est la meilleure option au lieu d’utiliser un autre hôte d’image ou de télécharger les fichiers sur un service de newsletter en ligne. De plus, vous devriez séparez le contenu de vos newsletters du reste de vos images dans une structure de dossiers ainsi / img / email ou / img / email / 2011.

9. Évitez le dossier Spam!

Cela peut être difficile à entendre, mais tous les clients de messagerie ne sont pas ouverts aux newsletters. Des milliards de courriers électroniques sont envoyés tous les jours et la majorité d'entre eux contiennent du spam ou du contenu malveillant. Par conséquent, l'intégration de ces mesures de sécurité dans la boîte de réception constitue clairement une mesure de sécurité..

Cependant, en matière de marketing Internet, vous pouvez facilement être découragé de voir votre dernière lettre d'information se retrouver avec le courrier indésirable. Pour réduire les chances que cela se produise, vous devriez nettoyez votre design pour plus de simplicité. Ne faites pas d'images ennuyeuses ou exploser votre texte de titre avec des centaines de mots-clés.

Essayez aussi de garder votre contenu bref et sur le sujet. Vous n'avez pas besoin d'inclure le contenu complet de tous vos articles ou pages. Essayez d'ajouter une phrase ou deux avec un lien alternatif vers votre site Web au lieu d'une longue liste. le plus votre adresse e-mail est brève, plus elle réussira l'inspection de spam.

Newsletter Design Gallery

Quel plaisir serait un article de newsletter par e-mail sans quelques exemples fantastiques? Il existe une multitude de modèles et de modèles de lettres d'information par courrier électronique à vérifier dans Google. La galerie de courrier électronique HTML est une source d'inspiration très populaire.

Ci-dessous, j'ai inclus des captures d'écran de nombreuses newsletters dans la galerie de Campaign Monitor. Espérons que ces superbes mises en page peuvent vous fournir d'excellentes idées pour vos propres conceptions..

Amusez-vous à concevoir vos newsletters idéales!

Alerte pour les affaires