Tutoriel HTML : Créer un email HTML

Article ► grafikart.fr/t...
Abonnez-vous ► bit.ly/Grafika...
Lorsque l'on crée un site Web, on est souvent amené à envoyer des e-mails au format HTML. Le format HTML nous permet de personnaliser les e-mails avec la charte graphique de notre site et de les rendre plus facilement reconnaissables par les utilisateurs. On pourrait être tenté de se dire qu'envoyer un e-mail au format HTML n'est pas compliqué, il suffit de prendre le code source et de l'envoyer et le tour est joué ! Dans la réalité les choses ne se passent pas aussi facilement, le principal problème que l'on va rencontrer est un problème de compatibilité.
Soutenez Grafikart:
Devenez premium ► grafikart.fr/p...
Donnez via Utip ► utip.io/grafikart
Retrouvez Grafikart sur:
Le site ► grafikart.fr
Twitter ► / grafikart_fr
Discord ► grafikart.fr/t...

[@divrai6873]

Super Tutoriel !!! Il va falloir mémoriser tous ça, pour l'instant ce que j'ai le mieux retenu c'est "hop...hop...hop-là !" ^^

[@arnoldchoirsi1426]

Pourquoi créer un tableau pour chaque ligne de l'email et pas tout simplement ajouter une balise dans une unique pour construire l'email ? Pour les besoins d'un nombre différent de colonnes, y'a l'attribut "colspan" pour les balises . Cela dit, y'a peut-être une subtilité qui m'échappe.

[@newycaen]

4 ans après, ton tuto m'a bien aidé, pour la newsletter. On voit les bases même sur de l'ancien. Merci pour la clarté et efficacité

[@FlorianMartinfoxgraph]

génial ! tu me livres pas mal de réponses et de solutions aux problèmes qui m'ont fracassés le crane ^^

[@benjaminp6815]

je suis amoureux de ce mec ! C'est tellement utile tout ce qu'il fait

[@DaSlown]

Merci pour ce super tuto qui me confirme que réaliser un template d'email est toujours aussi pénible et fastidieux ;-) Bonnes fêtes de fin d'année !

[@laicirion]

Super Tuto comme d'habitude, rien que pour les background, par contre le fait de faire un code propre et lisible en allant à la ligne à chaque ouverture et fermeture de balise, on laisse passer des espaces inutiles quand on veut être précis sur des choses comme un lien par exemple.

[@fanfan54old]

Des tutoriels de qualité comme d'habitude ^^ Merci

[@chaotic_monkey_]

meilleur tutoriel d'internet

[@thierryleriche1196]

Merci pour ce tutoriel de qualité : exemples mis en application sur mon site très facilement.

[@ProdLc]

Petit bémol pour les bords du bouton par exemple, certains clients mail n'affichent pas automatiquement les images... Très bon tutoriel dans l'ensemble.

[@pintorafael]

Excellente vidéo ! Hyper pédagogique

[@yassineett648]

merci infiniment pour ce tutoriel très intéressant et joyeux noel

[@roombah1646]

!Bonjour Bonheur et joie tu distribues, gloire à toi G.art !important

[@gharbisedky]

un tutoriels de qualité ....merci

[@shmoolikshmoolik7454]

Merci pour tes supers Videos! Et continue sur Ruby et j'espere que tu vas aussi faire dur ruby on rails et peut etre au travers d'une mini appli, mini site, etape par etape

[@jeandeboutgatari2629]

tutoriel très propre.

[@maheryrakotoarivelo2]

Jolie tuto, merci

[@codingcable241]

On peut envoyer un email au format HTML depuis n'importe quelle boite mail? Parce que depuis gmail, j'ai beau envoyer du code html à l'autre bout je recois du text brut, pas moyen d'obtenir un semblant de mise en page html.

[@CoussementSimon]

Bonjour, Question peut-être idiote... mais pour ne pas rester idiot toute ma vie, je vais la poser quand même : quand tu parles des balises pour le bouton, tu dis de mettre une balise autour du texte et accessoirement autour des 2 images. Ne peut-on pas mettre la balise autour du complet pour simplifier ? ça ne réagit pas de la même manière ? et merci pour ces infos intéressantes !

[@badroualialamo2700]

Merci beaucoup c'es trés intéréssant

[@sylviedauriac6234]

Bjr et merci pour ce beau partage de compétences. Pour ce qui est du responsive, la seule chose que je vois dans ton email est la balise meta ="viewport", pas de media queries ? C'est suffisant pour un affichage correct sur les petits écrans ?

[@astridmonge5883]

Superbe vidéo ! Merci!

[@desynchronisatio]

grand merci pour ce tuto

[@zlerageux9825]

bonjour, personnellement, j'ai des résultats différents entre la messagerie outlook en ligne, et l'appli outlook qui est installée (sur l'appli, les tableaux des 3 blocs passent les uns en dessous des autres) sur mon PC, est-ce normal ?

[@sandrodibartolomeo5166]

Merci !!

[@adamakanteevolution]

merci bcoup pour ce tuto e l atendai il ya longtemp good

[@fatihaladame1513]

Très intéressant, mais avec cette méthode, on ne peut pas faire de responsive ?

[@mapetitechaussette2721]

Merci beaucoup !

[@sebnox8057]

Salut ! super boulot ! Connais-tu la solution pour régler les problèmes de compatibilités entre Outlook et Gmail...Surtout Outlook...J'ai de gros problèmes de différences de couleur avec " bgcolor"...Merci à toi :)

[@AntonioMarmolejo]

Que penses tu de l'utilisation d'une image SVG pour les logos ou d'un encodage Base64 pour les icones? Je penses surtout à intégrer les visuels au message, pour court-circuiter les logiciels ou webmails qui bloquent le contenu distant.

[@juju_rzd]

Super tutoriel J'ai mis le 600 eme like

[@SuperGuydrums]

cool le tutoriel. Comment fait-t-on pour étirer une image (un degradé par exemple du jaune a l'orange) de tel sorte que l'image s'adapte au contenue de l'email? Mon background ne s'étire pas avec le contenue du email quand j'ouvre sur gmail ou yahoo (mais sa fonction bien sur les navigateur). Merci

[@MGKday]

les emails HTML, quelle plaie ! connais-tu une manière efficace ou un générateur en ligne ou n'importe quelle astuce qui permette de générer des "nested tables" à partir de tables avec des colspan et rowspan ? je sais que outlook ne supporte pas très bien les colspan/rowspan et qu'il faut donc faire des nested tables, mais c'est une galère à générer...n'y a t-il pas d'outils pour ca ? merci d'avance ! ps: par "nested tables" j'entends des tables dans des tables

[@jasonjulien8348]

Salut; Mon tableau avec les 3 lorem dans la section sous mon titre reste à gauche.. J'ai pourtant bien rajouter le td comme toi. des plombes que j'y suis :(

[@quarksvideo8683]

Top mais trop compliqué pour moi! hihihi

[@solsmesures2489]

sur Gmail les photos sont bien l'une à cote de l'autre mais sur Outlook elles sont l'une au dessus de l'autre. Que dois-je faire ?

[@zlerageux9825]

sur l'appli outlook ? Car en ligne, sur outlook ça fonctionne chez moi. Avez vous trouvé une solution depuis ? J'ai aussi ce problème sur l'appli chez moi.

[@aizen-algerie2540]

bonjour dans la section header mobile ca ne prend pas l'etendue de la page

[@Gotzeus75]

Salut j'ai fais le tuto, elle est ou la prochaine video ou faut envoyer ? merci

[@nomadmtp5965]

Slt, super tuto merci beaucoup ça m'a permis de faire un email plus que sympa. Mais maintenant que j'ai mon email.html comment je l'envois à ma liste de contacts. Merci d'avance. Et encore merci pour tes tutos, j'avais pas codé depuis longtemps et tu es une vraie mine d'informations.

[@grafikart]

Tu peux utiliser un service tiers (comme mailjet / mailchimp) ou créer un script qui se charge de faire ça.

[@nomadmtp5965]

merci beaucoup, j'ai trouvé sendinblue qui correspond mieux à ce que je cherche.

[@chezarose639]

Grafikart.fr on le mettra ou ce script pour l'envoyer ce mail ?

[@devyo8129]

Merci pour la vidéo. Si je veux ajouter une carte avec du code js est ce possible?

[@bravados]

non le javascript n'est pas executé. En revanche tu peux aller regarder du coté des mails AMP (lus par gmail et mail.ru mais a partir du 1er octobre ils ne seront plus lus sur outlook)

[@Inconuinfo]

bgcolor n'est pas supporté par xhtml 1 du coup plusieurs client mail rendent la couleur de fond par un jaune horrible !

[@havikoro22]

Super mais je n'arrive pas à appliquer cette méthode sur les emails de confirmation d'inscription 😑😑😑

Top, gg

[@airxperimentboom]

C'est un très bon tuto mais c'est abusé comme c'était ****** avant ahahah

[@bougnat9151]

joli travail, puis je te posé une "question" comme j'ai l'abonnement d'ADOBE et dans mon pack j'ai """ Dreamweaver """" que je ne souhaitait pas mais C comme ça!!!!!!!!!!!!!!!!!!!!!! j'ai regardé tous tes tutos une fois ..................... cette année 2017 j'ai donc révisé tes vidéos , j'ai suivis à la lettre tes exercices et ça marche - GRAND MERCI - évidement voici ; est ce que tu pourrais , si tu le veux bien l'ami, m'aider à passer sur le dinosaure d'ADOBE ......................................... TON REFUS NE SERA PAS PRIS comme frustrant .................. merci pour ton travaille

[@grafikart]

Je suis désolé je ne fais pas d'assistance individuelle. Mais tu peux oublier dreamweaver c'est une usine qui n'est pas forcément nécessaire.

[@lflantony4065]

ça donne quoi quand on diminue de 353%????

[@fanfan54old]

20:07 bug Google font?

[@jules_________]

a quel point c'est relou mdr

[@maheryrakotoarivelo2]

Jolie tuto, merci