Comment créer et envoyer un e-mail HTML personnalisé

Un e-mail HTML interactif est un outil puissant. Les entreprises peuvent les utiliser pour des offres promotionnelles, les indépendants peuvent les utiliser pour présenter leurs services à les clients potentiels et les petits-enfants peuvent faire sourire leurs grands-parents avec une jolie coutume conception. Les deux seules technologies dont vous aurez besoin pour créer un e-mail personnalisé à partir de zéro sont le HTML et le CSS en ligne. Tout ce que vous avez à faire est d'avoir une conception en tête, de l'analyser sous forme de lignes et de colonnes de tableau, et vous êtes prêt à commencer à construire. Dans cet article, vous apprendrez une méthode étape par étape pour créer et envoyer un e-mail HTML personnalisé.

Construire le modèle d'e-mail à l'aide de HTML

Le modèle d'e-mail repose sur des techniques HTML traditionnelles. Vous travaillerez avec des tableaux et empilerez des lignes de tableaux et les données du tableau Tout le temps. Le modèle d'e-mail HTML de base ressemble à ceci :

...
...
...
...
...
...
...




...

Sortir:

Il serait préférable de préparer un design afin que vous puissiez déterminer où et comment vous allez découper le design. De plus, vous serez mentalement prêt à en tirer une structure de table.

Ici, vous commencez avec le DOCTYPE du document. Ensuite, vous définissez le jeu de caractères, le type de contenu, les balises META et le titre dans le étiqueter. L'essentiel commence par le balise où vous placez un parent et ajouter plusieurs lignes de tableau à l'intérieur. Après avoir divisé le contenu en un nombre approprié de lignes, il est temps d'entrer les données du tableau à l'intérieur d'eux.

Comme dit, vous devez travailler simplement avec des tables. Par conséquent, pour saisir différentes données à l'intérieur du balise, vous devez suivre un itinéraire défini. Par exemple, formons un modèle d'e-mail avec un logo et une date à l'intérieur d'un étiqueter.

 Logo et date à l'intérieur de la balise 
 

















05 déc. 2021

Vous savez maintenant comment placer des balises HTML et créer une bonne structure pour votre modèle d'e-mail. Avançons pour mieux comprendre le style des e-mails.

Stylisez votre e-mail HTML

Le style d'un e-mail HTML est une tâche fastidieuse car vous ne pouvez utiliser que du CSS en ligne. En outre, vous devrez répéter le style de chaque élément s'il possède un style similaire. Si vous n'êtes pas familier avec les feuilles de style en cascade, explorez débuter avec CSS.

Aperçu:

 05 déc. 2021 






































salut John Doe



Merci d'avoir visité notre site. Nous espérons que vous avez appris quelque chose de nouveau aujourd'hui.





 Votre avis nous intéresse! 

 Évaluez nos articles ici. 


012345678910

Sortir:

Si tu veux, tu peux accéder au code complet sur GitHub et clonez le référentiel pour l'utiliser.

Envoi du courrier

Maintenant, copiez-collez l'intégralité du code de GitHub. Si vous utilisez VS Code, ouvrez le fichier HTML en utilisant l'extension de serveur live et copiez le contenu en cliquant sur Ctrl + A>Ctrl + C. Ouvrez Gmail et rédigez un nouvel e-mail. Collez le contenu et entrez l'identifiant de messagerie du destinataire. Envoyez l'e-mail et vous obtiendrez les résultats comme indiqué ci-dessous :

Testez le code sur différents appareils pour voir à quoi il ressemble et se comporte. Personnalisez votre e-mail HTML et rendez-le propre, simple et réactif.

Modifier les modèles d'e-mails existants

La création d'un e-mail HTML à partir de zéro nécessite une solide maîtrise du HTML et du CSS en ligne. Vous pouvez également modifier un modèle d'e-mail existant et le personnaliser en fonction de vos besoins. Gardez à l'esprit que les e-mails HTML ont tendance à prendre quelques secondes à charger. Planifiez, concevez, codez et effectuez des tests approfondis pour éviter toute incohérence de l'utilisateur final. Vous pouvez en apprendre davantage sur le HTML et le CSS sémantiques pour écrire un code meilleur et plus accessible.

Naïf Mourya (17 articles publiés)

Naincy se spécialise dans la création de sites Web hautement réactifs et d'une stratégie de contenu efficace ainsi que dans des copies Web. Elle est une rédactrice technique indépendante qui garde un œil attentif sur les technologies tendances.

Plus de Naincy Mourya