Comment créer et envoyer gratuitement un bulletin électronique

Il existe de nombreuses options payantes proposées par de nombreux fournisseurs de newsletter, mais si vous pouvez en envoyer une à partir de vos comptes Gmail, Yahoo, Hotmail et de tout autre compte de messagerie gratuit, vous pouvez réserver davantage de votre budget pour d'autres éléments..

Si vous recherchez un service de newsletter mieux géré avec des outils pour surveiller votre campagne de courrier électronique, utilisez le service payant, mais si vous souhaitez simplement envoyer une newsletter à quelques amis, vous allez adorer ce tutoriel..

Nous vous expliquerons comment enregistrer votre propre modèle de lettre d'information en tant que modèle HTML et commencer à les envoyer, avec l'aide de CampaignMonitor..

Commencez avec un modèle de courrier électronique dans Photoshop

Si vous avez une idée de ce à quoi votre modèle de newsletter doit ressembler, vous pouvez commencer à travailler avec Photoshop. Sinon, vous pouvez télécharger un modèle à partir de nombreux fournisseurs de modèles de courrier électronique gratuits. Il n’existe pas de largeur ni de hauteur spécifiques pour un modèle d’e-mail, mais pour vous assurer qu’il est compatible et lisible sur tous les e-mails sans interruption, nous vous suggérons de définir une largeur maximale de 650px. Il n'y a cependant pas de limitation de hauteur, donc ce paramètre vous appartient.

Modèle de courrier électronique

Vous pouvez être aussi créatif que vous le souhaitez avec votre modèle de courrier électronique, mais gardez à l'esprit que, avec davantage d'éléments créatifs, il sera plus difficile de découper chaque élément en tranches. Le modèle que nous allons utiliser ne contient que quelques éléments simples: un en-tête, une photo, des lignes et du texte, pour le bénéfice de ce guide..

Sélection des polices

Vous pouvez certainement utiliser n'importe quel type de police disponible sur votre Photoshop. Mais si vous créez une newsletter, il est conseillé d'utiliser des polices Web telles que Times New Roman, Arial et Georgia. Sinon, utilisez vos polices spéciales, mais enregistrez-les sous forme d'images plutôt que de texte.

Essayez de ne pas avoir à enregistrer trop d’images dans votre modèle, cela ne fera que l’agrandir et donc prendre plus de temps à charger..

1. Tranchez votre modèle de courrier électronique

Dans ce guide, nous utiliserons une version modifiée du modèle de courrier électronique gratuit de CampaignMonitor. Téléchargez-le ici pour suivre ce tutoriel.

Maintenant que vous êtes prêt avec votre modèle de courrier électronique, ouvrez-le avec Photoshop, sélectionnez Outil de tranche et commencez à trancher chaque élément du modèle.

Dans ce processus, vous devez découper chaque espace, texte, ligne et image.

Lorsque vous découpez un texte, assurez-vous de sélectionner la taille exacte et de ne pas laisser d'espace supplémentaire dans la zone de texte. Pour les espaces vides, coupez-les en une grosse tranche, mais séparez-les en carrés..

Le prochain outil que vous devez utiliser avec Photoshop est le Outil de sélection de tranche. Utilisez cet outil pour corriger chaque élément découpé de votre modèle. Assurez-vous que chaque ligne est connectée, ne laissez aucune zone vide sans les découper.

Avec l'outil Sélection de tranche, zoomez sur votre modèle et vérifiez chaque tranche que vous avez créée. Assurez-vous que chaque ligne est connectée et fixée.

Le résultat ressemblera à ceci.

2. Enregistrer en tant que modèle HTML

Lorsque vous êtes prêt avec votre modèle en tranches, allez dans Fichier et sélectionnez Enregistrer pour le Web et les périphériques.

Une fenêtre avec des options d'enregistrement apparaîtra. Tout d’abord, double-cliquez sur votre élément d’image et nommez-le afin de pouvoir facilement reconnaître le fichier image lorsqu’il est enregistré. Cliquez sur D'accord après les avoir nommés.

Ensuite, dans le coin supérieur droit de la fenêtre contextuelle, définissez le type d'image sur JPEG dans le menu déroulant. La qualité peut être réglée sur 60 ou 80. Si vous définissez la qualité sur 100, la qualité de l’image sera maximale, mais le gabarit sera lourd..

Maintenant, cliquez sur le sauvegarder bouton en bas de la fenêtre.

Une nouvelle fenêtre apparaîtra. Ici, sélectionnez la destination où vous souhaitez enregistrer le fichier, puis changez le format pour HTML et images et mettre le Les tranches à Toutes les tranches.

Ensuite, sous le Réglages menu déroulant, sélectionnez Autre.

Une autre fenêtre contextuelle apparaîtra, sous le HTML section, assurez-vous que les choix sous "Mise en forme" sont comme ci-dessous; faire de même pour la section 'Codage'.

Maintenant du HTML menu déroulant, sélectionnez Les tranches, et sélectionnez Sortie de tranche à Générer une table et définir les colonnes comme suit.

Maintenant de Les tranches, aller à Sauvegarder des fichiers dans le menu déroulant, allez à la section 'Fichiers optimisés' et cochez Mettre les images dans un dossier et définissez le nom du dossier d'image. Le dossier d'images par défaut sera "images". Puis clique 'D'ACCORD'.

Cliquez sur OK pour revenir à la fenêtre précédente. Cliquez maintenant sur sauvegarder.

Après avoir appuyé sur le bouton Enregistrer, ouvrez le dossier d’emplacement dans lequel vous avez enregistré le fichier. Le dossier html et les images contenant les images découpées déjà enregistrées pour votre modèle de courrier électronique s’afficheront..

Ouvrez le fichier '.html' dans votre navigateur et vous verrez que votre newsletter a maintenant été convertie en modèle HTML..

3. corriger le HTML, changer l'image de texte en polices Web

À la fin des étapes suivantes, vous obtiendrez le modèle de courrier électronique finalisé au format HTML..

Tous les éléments de la lettre d’information HTML sont enregistrés dans des images contenant tout le texte. Vous devez maintenant convertir les images de texte en polices Web. Pour ce faire, ouvrez le fichier '.html' avec l'éditeur HTML. Dans cet exemple, j'utilise Dreamweaver..

Cliquez sur l'en-tête et vérifiez le HTML surligné.

Le HTML sera quelque chose comme ça;

Supprimez maintenant toutes les lignes mises en surbrillance. Vous pouvez également cliquer sur l’image d’en-tête et appuyer sur la touche Suppr. Une fois supprimé, vous verrez la zone remplie avec la couleur d'arrière-plan par défaut.

Retournez maintenant dans Photoshop, vérifiez les détails de la police de l'en-tête. Vous devez obtenir le type de police, la couleur et la taille.

Une fois que vous avez obtenu les détails de la police, entrez le texte de l'en-tête dans la zone d'en-tête du modèle et incluez également les détails de la police. Dans mon exemple, le texte de mon en-tête HTML est le suivant:

Newsletter ABC

La ligne HTML ci-dessus contient le "style". C’est là que vous définissez la couleur de fond, la famille de police, la taille de la police et l’espacement des lettres. Essayez de remplir l’espace de texte en respectant l’espacement des lettres et la taille de la police; assurez-vous qu'il ne casse pas votre modèle.

Vous devez maintenant répéter le même processus pour chaque texte de votre modèle. Assurez-vous que toutes les images de texte sont transformées en polices Web et évitez les images inutiles en HTML.

La suivante est facultative, mais vous pouvez régler la newsletter au centre, ajouter l’alignement dans

section.

Pour réviser votre modèle final, ouvrez le fichier '.html' dans votre navigateur.

Vous pouvez également télécharger le modèle final ici pour votre référence.

4. Envoyer du HTML en tant que newsletter via Gmail

Maintenant, voici un petit truc pour vous aider à envoyer votre email HTML directement à partir de Gmail. Pour ce faire, vous devez télécharger le dossier de la lettre d’information sur votre serveur Web, mais si vous n’en avez pas, laissez-le faire avec Dropbox..

Utilisation du dossier public Dropbox

Si vous avez enregistré votre compte Dropbox avant le 1er août 2012, vous pouvez suivre les étapes ci-dessous..

1. Enregistrez un compte gratuit avec Dropbox, puis installez l'application sur votre PC ou votre Mac afin que vous puissiez ignorer le processus de téléchargement sur le Web. Laissez l'application faire le téléchargement pour vous.

   

2. Le modèle de courrier électronique que vous avez créé a été enregistré dans un dossier. Copiez le dossier et collez-le dans le Publique dossier trouvé dans votre Dropbox (Dropbox> Public).

   

3. Maintenant, localisez votre fichier '.html' dans le dossier, faites un clic droit et sélectionnez Copier le lien public.

   

4. Une fois que vous avez sélectionné "Copier le lien public", le lien sera enregistré dans la mémoire de votre ordinateur. Collez ce lien dans votre navigateur Web, puis ouvrez-le en tant que page Web..

   

5. Vous devez copier le contenu de cette lettre d'information, utilisez donc votre clavier et appuyez sur Ctrl + A pour tout sélectionner, puis sur Crtl + C pour copier tout le contenu (pour Mac, utilisez Cmd + A pour tout sélectionner et Cmd + C pour copier)

6. Ouvrez votre compte Gmail, cliquez sur Composer pour obtenir un email vide, cliquez avec votre souris dans le champ de texte puis appuyez sur Ctrl + V pour coller votre newsletter dans le champ de contenu de l'email. Les utilisateurs de Mac peuvent appuyer sur Cmd + V

   

7. Votre newsletter apparaît maintenant comme contenu de votre email. Entrez l'objet et l'adresse e-mail et envoyez votre premier bulletin d'information par e-mail!

Utilisation de l'application Site44

Depuis que Dropbox n’offre plus la fonctionnalité de dossier public pour les utilisateurs de Dropbox inscrits après le 1er août 2012, vous pouvez essayer Site44, une application qui transforme les dossiers Dropbox en sites Web..

1. Visitez Site44 et connectez-vous avec Dropbox pour commencer.

   

2. Autoriser Site44 à se connecter avec votre compte Dropbox. Dans la plupart des cas, vous devez vérifier votre adresse électronique..

   

3. Cliquez sur "Cliquez sur un nouveau site" pour commencer.

   

4. Dans la section "Utiliser un domaine site44.com", tapez le nom de dossier que vous préférez pour ce site Web dans votre Dropbox et cliquez sur "Créer". Dans ce cas, j'utilise "mon nouveau bulletin"comme nom de dossier. Après cela, acceptez les conditions d'utilisation pour continuer.

   

5. Maintenant, Site44 a créé de nouveaux dossiers pour le site Web dans votre Dropbox.

   

6. Copiez le dossier newsletter.html et les images que vous avez créées précédemment dans le dossier mynewsletter.site44.com Dropbox..

   

7. Ouvrez votre navigateur Web et accédez à http://mynewsletter.site44.com/newsletter.html.

   

8. Vous devez copier le contenu de cette lettre d'information, utilisez donc votre clavier et appuyez sur Ctrl + A pour tout sélectionner, puis sur Crtl + C pour copier tout le contenu (pour Mac, utilisez Cmd + A pour tout sélectionner et Cmd + C pour copier)

9. Ouvrez votre compte Gmail, cliquez sur Composer pour obtenir un email vide, cliquez avec votre souris dans le champ de texte puis appuyez sur Ctrl + V pour coller votre newsletter dans le champ de contenu de l'email. Les utilisateurs de Mac peuvent appuyer sur Cmd + V

   

10. Votre newsletter apparaît maintenant comme contenu de votre email. Entrez l'objet et l'adresse e-mail et envoyez votre premier bulletin d'information par e-mail!

Conclusion

Tant que le dossier HTML de la newsletter est toujours enregistré dans votre dossier Dopbox Public, votre destinataire pourra visualiser votre newsletter correctement, mais une fois que vous aurez supprimé le dossier, le lien sera brisé et le destinataire ne pourra afficher que le message. texte. J'espère que vous pourrez suivre ce tutoriel sur la création d'un bulletin d'information HTML de base avec Photoshop, puis son envoi au format HTML via Gmail. Si vous avez d'autres moyens, partagez avec le reste de nos lecteurs.