La newsletter en html

Qu’est-ce qu’une newsletter ?

Une newsletter est une lettre d’information envoyée périodiquement par mail à des abonnés. Composée de texte, illustrations, liens renvoyant vers votre site, son contenu peut être par exemple une sélection de produits, un article concernant des nouveautés dans votre entreprise. La newsletter un très bon moyen de fidéliser les clients.

Trois bonnes raisons d’envoyer une newsletter :

  • informer ses clients de l’actualité de l’entreprise,
  • maintenir un contact régulier avec ses clients,
  • augmenter le trafic sur votre site en incitant les abonnés à le visiter.

L’exercice consiste à créer une newsletter en html :

Etape 1 : Photoshop

En première partie, à partir d’un screenshot de newsletter, on utilise l’outil tranche pour découper l’image de la newsletter en plusieurs parties. Puis il faut l’enregistrer en format image+html ; un fichier html est créé accompagné d’un dossier images contenant toutes les images provenant de la découpe. Lors de la découpe des tranches, il est possible d’insérer du code html et css.

Etape 2 : l’éditeur de codes

A partir d’un éditeur de codes (Brackets, Atom, etc.), le code est révisé pour améliorer la structure de la newsletter. Cette dernière est construite comme un tableau utilisant le plus possible du html, de façon a ce que chaque navigateur puisse lire sans défaut la newsletter (on peut retrouver des erreurs, comme des blancs entourant les images, que l’on peut faire disparaître en insérant un display:block sur chaque image).

Etape 3 : la vérification

Inbox inspector est un inspecteur d’email qui permet de tester et optimiser l’affichage des emails, et donc que l’on va utiliser pour notre newsletter. Il est donc possible de prévisualiser la newsletter dans plusieurs services de messagerie, tels que Gmail, Outlook, ou même Android, puis de repérer et réparer les erreurs d’affichage.