5129 sujets

Sémantique web et HTML

Bonjour,
je suis plus qu'un novice en code, je viens de recuperer et modifier un bout de code, afin de l'integrer dans un un template mail "responsive"

mon bout de code n'est pas responsive, et je ne sais pas trop comment faire,
quelqu'un pourrait il m'aider svp ?

le voici :
<!-- -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- BLOC 2 PRODUIT LARGE -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- --><!--BLOC 5-->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="w600" style="margin: 0pt auto; max-width: 600px;" width="600">
<tbody>
<tr>
<td align="center" class="w300" valign="top" width="300">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="w300" style="margin: 0pt auto; max-width: 300px;" width="300">
<tbody>
<tr>
<td align="center" class="w10" valign="top" width="10">&nbsp;</td>
<td align="center" class="w280" valign="top" width="280">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="w280" style="margin: 0pt auto; max-width: 280px;" width="280">
<tbody>
<tr>
<td align="center" class="w280" colspan="2" width="280"><!-- -*-*-*-*-*-*-*-*-*-*-*-*-*-*- VISUEL PRODUIT -*-*-*-*-*-*-*-*-*-*-*-*-*-*---><a href="https://www..com/fr/111532-9a571-p80771.html" style="text-decoration: none; color: rgb(235, 241, 245);" target="_blank"><img alt="veste armani" src="https://www..com/media/img/2019/10_oct/14.10_ea_ponction/img/111532-n_228x344.jpg" style="display: block; border-width: 0px; border-style: solid; width: 228px; height: 344px;" /></a> <!-- -*-*-*-*-*-*-*-*-*-*-*-*-*-*- /VISUEL PRODUIT -*-*-*-*-*-*-*-*-*-*-*-*-*-*---></td>
</tr>
<tr>
<td align="left" width="220"><strong style="color: rgb(51, 51, 51); font-size: 12px;"><!-- ------------------------------- MARQUE ---------------------------------- --> Emporio armani <!-- ------------------------------- /MARQUE ---------------------------------- --></strong><br />
<!-- ------------------------------- MODELE ---------------------------------- --> <span style="color: rgb(110, 110, 110); font-family: Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 10px; line-height: normal; font-size-adjust: none; font-stretch: normal;">111532 9A571 </span><!-- ------------------------------- /MODELE ---------------------------------- --></td>
<td align="right" width="60">&nbsp;</td>
</tr>
<tr>
<td align="left" width="220"><!-- ------------------------------- PRIX ---------------------------------- --><span style="color: rgb(51, 51, 51); font-family: Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-size-adjust: none; font-stretch: normal; vertical-align: top;"><strong>99.00 &euro;</strong></span><!-- ------------------------------- /PRIX ---------------------------------- --></td>
</tr>
<tr>
<td align="center" class="w280" colspan="2" height="35" style="background-color: rgb(237, 104, 71);" valign="middle" width="280"><!-- ------------------------------- LIEN PROFITER ---------------------------------- --><a href="https://www..com/fr/111532-9a571-p80771.html" style="display: block; text-decoration: none; color: rgb(255, 255, 255);" target="_blank">BUY NOW ></a> <!-- ------------------------------- /LIEN PROFITER ---------------------------------- --></td>
</tr>
</tbody>
</table>
</td>
<td align="center" class="w10" valign="top" width="10">&nbsp;</td>
</tr>
</tbody>
</table>
</td>
<td align="center" class="w300" valign="top" width="300">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="w300" style="margin: 0pt auto; max-width: 300px;" width="300">
<tbody>
<tr>
<td align="center" class="w10" valign="top" width="10">&nbsp;</td>
<td align="center" class="w280" valign="top" width="280">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="w280" style="margin: 0pt auto; max-width: 280px;" width="280">
<tbody>
<tr>
<td align="center" class="w280" colspan="2" width="280"><!-- -*-*-*-*-*-*-*-*-*-*-*-*-*-*- VISUEL PRODUIT -*-*-*-*-*-*-*-*-*-*-*-*-*-*---><a href="https://www..com/fr/111532-9a571-p80771.html" style="text-decoration: none; color: rgb(235, 241, 245);" target="_blank"><img alt="veste armani" src="https://www..com/media/img/2019/10_oct/14.10_ea_ponction/img/111532-n_228x344.jpg" style="display: block; border-width: 0px; border-style: solid; width: 228px; height: 344px;" /></a> <!-- -*-*-*-*-*-*-*-*-*-*-*-*-*-*- /VISUEL PRODUIT -*-*-*-*-*-*-*-*-*-*-*-*-*-*---></td>
</tr>
<tr>
<td align="left" width="220"><strong style="color: rgb(51, 51, 51); font-size: 12px;"><!-- ------------------------------- MARQUE ---------------------------------- --> Emporio armani <!-- ------------------------------- /MARQUE ---------------------------------- --></strong><br />
<!-- ------------------------------- MODELE ---------------------------------- --> <span style="color: rgb(110, 110, 110); font-family: Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 10px; line-height: normal; font-size-adjust: none; font-stretch: normal;">111532 9A571 </span><!-- ------------------------------- /MODELE ---------------------------------- --></td>
<td align="right" width="60">&nbsp;</td>
</tr>
<tr>
<td align="left" width="220"><!-- ------------------------------- PRIX ---------------------------------- --><span style="color: rgb(51, 51, 51); font-family: Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; line-height: normal; font-size-adjust: none; font-stretch: normal; vertical-align: top;"><strong>99.00 &euro;</strong>&nbsp;</span><!-- ------------------------------- /PRIX ---------------------------------- --></td>
<td align="right" width="60">&nbsp;</td>
</tr>
<tr>
<td align="center" class="w280" colspan="2" height="35" style="background-color: rgb(237, 104, 71);" valign="middle" width="280"><!-- ------------------------------- LIEN PROFITER ---------------------------------- --><a href="https://www..com/fr/111532-9a571-p80771.html" style="display: block; text-decoration: none; color: rgb(255, 255, 255);" target="_blank"> BUY NOW > </a> <!-- ------------------------------- /LIEN PROFITER ---------------------------------- --></td>
</tr>
</tbody>
</table>
</td>
<td align="center" class="w10" valign="top" width="10">&nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
L'utilisation de <table> n'est pas responsive en général.
Sur le fond, je ne comprends pas très bien ce que signifie "un template mail "responsive""
Comment penses tu utiliser ce bout de code?
Raphael a écrit :

A vrai dire, c'est possible : https://www.alsacreations.com/tuto/lire/1533-Un-e-mail-en-HTML-responsive-multi-clients.html

Article très intéressant!
Comme tout le monde, j'utilise des <table> pour la présentation des mails (on n'a pas vraiment le choix!), mais je n'avais jamais pensé qu'on puisse utiliser @media ni même mettre quoi que ce soit dans <head>, et en particulier utiliser des classes CSS
La première fois que j'ai essayé de faire une NewsLetter bien présentée, ça s'est lamentablement planté pour mes destinataires gmail, et comme de nos jours c'est la majorité des gens...
voici le template que j'utilise

<!DOCTYPE html SYSTEM "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>
			<!-- titre pour la version navigateur -->
		</title>
	</head>
	<body style="font-family: 'Myriad Pro', 'Trebuchet MS',  Arial, Geneva , sans-serif;text-align: center;">
		<div style="margin:5px auto;text-align: center;font-size: 8pt">Si vous ne parvenez pas à
			lire ce message, <a href="adresse de la version HTML du message">cliquez sur ce lien</a>
		</div>
		<div style="width: 80%;max-width: 600px;text-align: center;margin:12px auto;">
			<img align="center" style="..." src="logo" alt="" />
			<div style="margin:15px auto;font-size: 14pt;">
				<!-- 
					texte du message en HTML des années 1990-2000
					en particulier des tables enchâssées
				-->
			</div>
		</div>
	</body>
</html>


J'aimerais une critique (constructive) de ce template pour améliorer mon processus.
Modifié par PapyJP (18 Oct 2019 - 17:04)