Bout de compte à passer en responsive pour mailing

Question

yannick13300

18 Oct 2019 à 15:10

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 :

<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"> </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"><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> </td>
</tr>
<tr>
<td align="left" width="220"><strong style="color: rgb(51, 51, 51); font-size: 12px;"> Emporio armani </strong><br />
 <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></td>
<td align="right" width="60"> </td>
</tr>
<tr>
<td align="left" width="220"><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 €</strong></span></td>
</tr>
<tr>
<td align="center" class="w280" colspan="2" height="35" style="background-color: rgb(237, 104, 71);" valign="middle" width="280"><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> </td>
</tr>
</tbody>
</table>
</td>
<td align="center" class="w10" valign="top" width="10"> </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"> </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"><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> </td>
</tr>
<tr>
<td align="left" width="220"><strong style="color: rgb(51, 51, 51); font-size: 12px;"> Emporio armani </strong><br />
 <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></td>
<td align="right" width="60"> </td>
</tr>
<tr>
<td align="left" width="220"><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 €</strong> </span></td>
<td align="right" width="60"> </td>
</tr>
<tr>
<td align="center" class="w280" colspan="2" height="35" style="background-color: rgb(237, 104, 71);" valign="middle" width="280"><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> </td>
</tr>
</tbody>
</table>
</td>
<td align="center" class="w10" valign="top" width="10"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

PapyJP

18 Oct 2019 à 15:47

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

Administrateur

18 Oct 2019 à 16:20

PapyJP a écrit :
L'utilisation de <table> n'est pas responsive en général.

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

Il existe même des formations entières sur le sujet : https://formations.alsacreations.fr/formation-integration-emails-mobiles.html Smiley langue

PapyJP

18 Oct 2019 à 17:04

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)

Sujet clos

Sémantique web et HTML

Bout de compte à passer en responsive pour mailing