5568 sujets

Sémantique web et HTML

Bonsoir !
Je suis en train de faire un webmail type newsletter. Je l'ai fait sur illustrator, j'ai mis des liens à des éléments grace à l'outil tranches, j'ai ensuite faire exporter pour le web, de là sont sortis environ 17 images et un fichier HTML.

Pour envoyer le mail, j'ai utilisé la technique de rédiger un mail dans gmail > faire inspécter > mettre mon bout de code à l'endroit voulu etc.
Quand je quitte la console, je vois mon mail parfait, tout semble fonctionner (liens etc), c'est au bon format.

Seulement quand je l'envoie, c'est là qu'est mon problème. Sur l'application mail d'iphone et mac, le mail se lit parfaitement (liens y compris) mais sur gmail, c'est du grand n'importe quoi, les éléments sont disposés un peu n'importe où, bref, illisible.

J'aimerai savoir si quelqu'un à déjà rencontré ce problème et/ou si il sait comment le résoudre ?

Voici un bout de mon code :

Bonne soirée !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<p>-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
</p>
<title>Impression</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<div style="position:absolute;left:0px;top:0px;width:595px;height:741px;">
<div style="background-image:url('https://image.noelshack.com/fichiers/2018/06/3/1518026400-slicesbnb-01.png');position:absolute;left:0px;top:0px;width:595px;height:18px;" title="">
</div>
<div style="background-image:url('https://image.noelshack.com/fichiers/2018/06/3/1518026400-slicesbnb-02.png');position:absolute;left:0px;top:18px;width:18px;height:723px;" title="">
</div>
Chaque webmail à sa propre logique.. peut être qu'a la place des div tu devrais utilisé des <table> mais je suis pas sûr.... perso je n'utilise que des <tables> dans les mails et cela fonctionne sur chaque version/webmail.
J'ai eu le même problème quand j'ai édité une newsletter.
Pour que ça marche dans gmail, il faut coder "à l'ancienne" à base de <table> imbriquées si on veut faire une présentation acceptable, exactement le contraire de ce qu'on fait actuellement sur le web.
Voici un exemple : https://www.bonieux.com/documents/Newsletter/2013-03/newsletter.html
Si tu regardes le source, tu verras que c'est essentiellement fait avec des <table>, pas de CSS dans le <head> mais uniquement sous forme style="..." etc.