Comment intégrer une newsletter en HTML et CSS avec GPT-4 ?
L'affichage d'une newsletter peut nécessiter l'emploi du HTML et du CSS. Cela permet par exemple au navigateur web d'afficher le mail en incorporant un design attractif et des images. Même si l'email créé à partir de l'HTML ne va pas souvent offrir des sommets d'interactivité et de design.
Quelques précautions doivent être observées avant de coder la newsletter. En effet, les messageries interprètent chacune à leur manière le code utilisé, que ce soit les attributs HMTL ou les propriétés CSS. L'affichage de l'email varie aussi selon l'appareil utilisé. C'est pourquoi le codage HTML doit être soigné, afin d'essayer d'apparaître correctement sur les différents styles d'appareils
Pour construire une newsletter en HMTL et CSS, des outils existent déjà, comme Dreamweaver ou Mailchimp. Bing Chat, boosté par GPT-4, s'érige également en option intéressante. Afin de bâtir une newsletter en HMTL et CSS via cet outil, nous allons partir d'un modèle très simple. Nous n'allons pas y mentionner différents éléments, quelquefois obligatoires. Cela sert davantage d'exemple pour avoir un aperçu des capacités de GPT-4 via Bing Chat. Il s'agit d'écrire un script assez précis.
Voici l'exemple de newsletter que nous allons coder en CSS et HTML
Pour construire cette newsletter, nous allons observer quelques règles. Nous allons travailler avec des tableaux HTML. Cette structure est davantage lisible sur les messageries. Nous allons également utiliser le CSS inline ainsi qu'une police système avec Arial, afin d'économiser une requête http.
Structuration de la newsletter
Afin d'élaborer la base de l'e-mail en html, nous utilisons le DOCTYPE, avec le Transitional XHTML 1.0. Celui-ci indique au navigateur que la page utilise la syntaxe XHTML connue, mais qu'elle utilise certains éléments en provenance de HTML4. Nous allons aussi créer un tableau d'une largeur ne dépassant pas 650 px, pour qu'elle ait plus de chance de s'afficher correctement. Nous allons également mentionner les rectangles de couleur présents sur la newsletter, en les indiquant en hexadécimal.
Ce qui donne :
On peut vérifier régulièrement le rendu de la newsletter en HTML via un éditeur HTML en ligne.
Ecriture des contenus et positionnement de l'image
Nous allons ensuite demander à Bing Chat d'écrire les différents éléments du contenu. Ceux-ci seront contenus dans une ligne différente du tableau. Nous écrivons le texte en police système, en Arial. Nous demandons de placer l'élément HTML <span>, qui est un conteneur générique en ligne pour les contenus textuels.
Nous allons aussi insérer l'image dans une ligne. Nous allons exporter l'image issue du fichier PSD dont nous avons eu besoin pour construire la newsletter. Dans notre cas, nous avons retenu l'image en forme de lettre avec un fond vert. Nous prendrons son adresse en URL absolue pour plus de commodité : https://referencement-naturellement.com/wp-content/uploads/2017/03/image_logo_lettre-copie.png
Nous mentionnons l'attribut "alt" pour celle-ci, car de nombreux clients de messagerie n'affichent pas d'image lors de l'ouverture de la newsletter. L'attribut alt permet d'afficher un texte à la place de l'image. Notons que pour insérer une image en HTML, nous nous servons de la balise <img> et nous précisons la source du fichier image avec l'attribut "src".
Voici le script :
Prévisualiser la newsletter
Vous pouvez observer la newsletter obtenue grâce au HTML et au CSS en utilisant l'outil de prévisualisation. Ce qui donne :
Tester la réception de la newsletter dans les messageries
Vous pouvez passer par Mailchimp par exemple afin d'importer votre fichier HTML et d'envoyer votre newsletter sur différentes adresses de messagerie. Voici le retour d'un de nos tests :
On voit que l'image n'est pas prise en compte et que le texte mentionné dans la balise "alt" apparait à la place. Sinon, le rendu est plutôt satisfaisant. Vous pouvez créer votre propre script, de façon encore plus précise et plus adaptée aux différentes règles de la newsletter. Par exemple en créant une newsletter responsive avec l'ajout de media queries. Puis tester cela sur différents appareils et navigateurs.