Comment créer une newsletter ?

Les étapes de la création d’une newsletter

Je vous propose un petit tutoriel pour apprendre à créer une newsletter de A à Z.
On peut séparer ce tuto en 4 étapes :

- la conception graphique de la newsletter sur un logiciel comme Adobe Fireworks ou Photoshop.
- la découpe et l’export de vos images
- exporter vos images vers votre serveur web
- la réalisation de votre page html avec l’appel aux images et votre texte
- envoyer votre newsletter via une plateforme d’emailing

Création de la newsletter

Pour ce faire il existe plusieurs programmes; j’utiliserai Fireworks que je trouve simple d’utilisation pour tous les travaux destinés au web, mais le principe est généralement le même pour tous les logiciels.
Avant de vous lancer, je vous conseille de lire le sujet « Conseils pour votre campagne d’emailing » sur les techniques pour éviter à votre campagne d’emailing de se retrouver dans les spams des destinataires.

Découpe de la newsletter

Entrons dans le vif du sujet ! Une fois que vous avez fini votre newsletter (design et contenu), il faut réaliser la découpe des images. J’ai pris un exemple d’une newsletter que j’ai crée pour une agence de voyage.

home-1

Sélectionner l’outil « Tranche » et réaliser la découpe des images qui seront présentes dans votre newsletter.

Veuillez noter que cette newsletter sera constitué seulement d’images, ce que n’apprécient pas forcément les spams robots. J’ai pris cette exemple seulement pour vous montrer le système de découpe.L’idéal est un mélange d’images et de texte html, comme sur la vidéo en début de page.

Voila à quoi devrez ressembler votre écran après avoir « découper » vos images. Vous exporterez votre image de fond séparément.

asie-decoupe

Export des images

Vous devez désormais exporter vos images, pour ce faire, sélectionner toutes les découpes (elles se trouvent au-dessus de vos calques). Cliquez sur le bouton droit de votre souris puis « Exporter les découpes sélectionnées »; vous créez un nouveau dossier dans lequel vous allez placer vos images en .PNG transparent.
Une fois toutes les découpes et l’image de fond rassemblées dans un dossier, on doit le monter sur un serveur web afin que l’on puisse appeler les images dans un fichier html.

Intégration des images de la newsletter

Il faut maintenant créer votre page html qui constituera votre newsletter. Ouvrez votre logiciel pour travailler le contenu de votre newsletter, il en existe plusieurs vous pouvez même le faire sur le bloc notes si vous êtes calé en code.
Petit conseil : préparer un gabarit de base pour toutes vos newsletters que vous réutiliserez pour chaque nouvelle campagne d’emailing.
Vous n’aurez ensuite qu’à faire appel à vos images et ajoutez le texte html que comprendra la newsletter (produit, prix, description…).

asie-html

Les rectangles bleus représentent des zones cliquables, c’est ici que vous mettrez les liens pour vos produits ou services.Dans une newsletter avec un mélange de texte et d’images, vous ajouterez les liens directement sur vos boutons, images, et textes. Pas besoin d’utiliser ces zones cliquables.

Pour créer ces zones, sur Dreamweaver c’est assez simple car vous devez juste sélectionner l’image concernée et la zone « map area » apparait dans les propriétés. Vous pouvez choisir la forme pour votre zone et saisir le lien. Voici le code pour une zone :

<map name=«Map1» id=«Map1»>
<area shape=«rect» coords=«647,12,878,175» href=«votrepage.html» />
</map>

Vous devrez déterminer les coordonnées de l’élément sur votre page html .
Voila il ne reste plus qu’à créer toutes vos zones cliquables et y positionner vos liens. Vous aurez alors votre page html complète; vous devrez reprendre ce code pour le proposer à votre plateforme d’emailing.

J’espère que ce tutoriel vous a été utile, n’hésitez pas à laisser vos commentaires ou apporter des précisions sur le sujet.

Partage cet article !Share on Google+Pin on PinterestShare on TumblrTweet about this on TwitterShare on Facebook

4 thoughts on “Comment créer une newsletter ?

  1. Bonjour,

    J’ai apprécié le contenu de vos explications pour une newsletter… Néanmoins, je pense qu’il est intéressant pour les personnes, de voir réellement le résultat en plaçant par exemple, votre newsletter de l’agence de voyage, sur un site internet… Comment mieux percevoir un résultat !!!

    Bravo…

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>