Lancez-vous! Login

Faire une newsletter avec Photoshop, InDesign et Illustrator

Des astuces pour l’envoi et la création de newsletters HTML

Vous pouvez créer des newsletters avec de nombreux logiciel et les importer ensuite en HTML. Dans l’article qui suit, nous allons vous montrer ce à quoi vous devez veiller pour réaliser une newsletter HTML qui s’affiche sans problèmes dans tous les clients de messagerie. Nous vous montrerons aussi comment faire une newsletter avec Photoshop, InDesign et Illustrator.

Mais avant de nous lancer, un petit avertissement: souvent, le fait de créer vos newsletters en HTML avec ces programmes prendra plus de temps et ne sera pas plus efficace que si vous utilisez notre éditeur de newsletter intégré. Sans oublier que vous n’aurez besoin d’aucune connaissance en programmation. Vous en apprendrez plus en lisant cette page.

Trucs et astuces pour la mise en page de newsletters HTML

Vos newsletters ne devraient pas dépasser une largeur de 600 pixels afin d’être optimisées pour l’affichage sur desktop et mobile.

Les informations les plus importantes devraient se situer au-dessus de la ligne de flottaison pour être directement accessibles dès l’ouverture du message.

Créer une newsletter HTML avec Photoshop

Pour faire une newsletter avec Photoshop, vous devriez tout d’abord créer un document légèrement plus large que la newsletter finale – par exemple de 800 pixels. Pour la longueur du document, nous vous conseillons 1000 pixels pour commencer. Une résolution de 72dpi est suffisante pour le document. Veillez aussi à sélectionner RGB comme mode de couleur.

Dans ce document, créez une rectangle de 600px de large et centrez celui-ci. Au sein de ce rectangle, vous allez créer votre newsletter. Le fond devrait être blanc pour une meilleure lisibilité.

Commencez maintenant à mettre en page votre message:

Tout en haut, doit se trouver l’aperçu du contenu et le lien vers la version web (celui-ci devrait être intégré dans chaque newsletter car il assure un affichage optimal pour les destinataires dont le client de messagerie n’affiche pas les images).

En dessous, insérez une imager de teaser. Adaptez celle-ci à la largeur de votre newsletter.

Pour la partie principale, insérez à nouveau un rectangle de 600px en dessous du header. Ici, vous pourrez intégrer des textes et des images pour le contenu principal de votre emailing. Veillez à insérer des espaces suffisants entre les éléments, pour plus de lisibilité.

En bas de votre newsletter, dans le footer, vous pourrez encore insérer des liens vers vos réseaux sociaux. Pour des raisons légales, vous devrez aussi insérer un lien de désinscription et, si possible, vos mentions légales. Pour ces liens, vous pouvez choisir une police plus petite – tant que le texte reste visible et facile à cliquer.

Créer une newsletter HTML avec InDesign

Pour faire une newsletter avec InDesign, commencez par créer un document avec une largeur de 600px. Vous pouvez choisir la longueur que vous voulez. Sauvegardez ensuite la page comme propre format et ouvrez-la directement.

Utilisez l’outil rectangle pour créer trois rectangle collés les uns en-dessous des autres pour délimiter les trois parties de votre newsletter: le header, le contenu et le footer.

Insérez une image de votre choix dans le header en prenant en compte que les images doivent être hébergées en ligne pour être visibles lors de la lecture.

Dans la partie principale, insérez vos textes et images en choisissant de préférence un fond blanc pour plus de lisibilité.

Dans le footer, insérez un lien vers votre page mentions légales et un lien de désinscription pour respecter la loi.

Une fois votre newsletter réalisée avec InDesign, vous avez la possibilité de l’exporter directement en HTML. Cela dit, nous vous le déconseillons, car le HTML généré par InDesign n’est pas optimisé pour une newsletter. Il vaut donc mieux adapter vous-même le code HTML pour qu’il soit compatible avec une newsletter.

Faire une newsletter avec Illustrator

Il est aussi possible de faire des newsletters avec Illustrator, bien que ce programme soit surtout efficace pour créer des éléments de newsletter et non pas le mailing entier. Par exemple, vous pouvez créer vos images de fond avec Illustrator.

Pour la mise en page finale de votre newsletter, il vaut mieux utiliser un autre programme – comme ceux mentionnés ci-dessus.

Comment programmer votre newsletter:

La programmation d’une newsletter HTML ne peut pas être comparée avec la création d’un site web. À la différence du web design en HTML, l’utilisation de styles CSS peut être problématique lors de la création de newsletters. Cela dit, vous pouvez utiliser l’Inline CSS, reconnu par la plupart des clients de messagerie.

Voilà comment fonctionne la programmation de newsletters HTML étape par étape:

1. Déposer les images

Sauvegardez séparément toutes les images que vous voulez utiliser pour la création de votre newsletter.

2. Créer un nouveau fichier HTML

Utilisez pour cela un outil comme Dreamweaver ou alors simplement un éditeur de texte de type Notepad.

3. Créer un header

Créez tout d’abord une table de la largeur de la newsletter – nous conseillons 600px. Vous pouvez maintenant la formater et insérer tous les contenus désirés.
Veillez à définir des alt-text (textes alternatifs) pour chaque image dans votre newsletter, de façon à ce que celle-ci reste compréhensible même dans les clients de messagerie où les images ne s’affichent pas.

4. Créer des contenus

Ici, travaillez également avec des tables. Laissez de l’espace entre les éléments pour plus de lisibilité.

5. Créer un footer

Dans le footer aussi, il vous faudra utiliser des tables. Si vous voulez insérer plusieurs images l’une à côté de l’autre, utilisez des colonnes.

Pour envoyer votre newsletter, vous pouvez uploader votre code HTML dans Newsletter2Go.

Quelles alternatives sans programmation?

L’alternative la plus simple reste d’utiliser un logiciel de newsletter avec éditeur WYSIWYG. Voilà comment fonctionne la création d’une newsletter avec Newsletter2Go:

1. Définir l’objet et l’adresse d’expéditeur

Commencez par déterminer un objet et un preheader. Il est possible de personnaliser dynamiquement ces deux éléments de façon à vous adresser individuellement à chaque destinataire.
Vous êtes également libres de déterminer votre adresse et nom d’expéditeur.

2. Choisir un template

Choisissez l’un de nos nombreux modèles de newsletter responsive ou commandez un template premium réalisé par l’équipe de Newsletter2Go.

3. Créer la newsletter dans l’éditeur

Newsletter2Go vous propose un éditeur en monde drag&drop qui vous permet d’insérer, de déplacer et de modifier facilement des modules image ou texte. Pour chaque élément, vous pourrez modifier le positionnement, le format, les contours et bien plus encore. Finalement, vous pourrez visualiser un aperçu de votre newsletter pour vérifier l’affichage.

4. Personnaliser la newsletter

Vous pouvez intégrer des personnalisations dynamiques dans votre newsletter et ainsi envoyer des messages individualisés à chacun de vos clients. Vous pouvez choisir d’afficher ou non certains éléments en fonction de certains critères (par exemple l’âge ou la civilité).

5. Insérer des liens vers la version web et la désinscription

Ces liens sont générés automatiquement par Newsletter2Go de façon à ce que votre carnet d’adresses soit toujours propre et mis à jour.

6. Ajouter des produits ou du contenu

Les fonctionnalités d’intégration produit/contenu en 1 clic sont très pratiques pour créer rapidement des newsletters professionnelles. En indiquant l’identifiant du produit ou contenu que vous voulez insérer, notre système importe automatiquement toutes les informations relatives comme la description, l’image, un lien, etc.

7. Envoyer la newsletter

Une fois votre newsletter créée, vous pourrez l’envoyer directement avec Newsletter2Go. Notre système d’envoi ultra-performant et nos nombreuses certifications vous garantissent une excellente délivrabilité. Avec Newsletter2Go, vous ne finirez jamais en spam!

À propose de l'auteur

Alexandre Desbordes
Rédacteur Newsletter2Go

Ce post a-t-il été utile?

Merci !

Laisser un commentaire

Newsletter2go utilise des Cookies pour vous assurer la meilleure expérience de navigation. En continuant votre navigation, vous acceptez l'utilisation de ces cookies. J’accepte.