Bonjour,
Je débute dans le domaine du html et je me suis mise au défi de réaliser une newsletter responsive !
Le résultats doit s'adapter aux clients web, tablette et mobile sous différents supports évidement, et pour l'instant je pietine...
J'ai parcourue différentes réponses sur le forum et j'ai utilisé la balise @media, comme expliqué ci dessous :
http://www.alsacreations.com/tuto/lire/1533-un-e-mail-en-html-responsive-multi-clients.html
Seulement il m'avait semblé avoir lu quelque part que cette technique n'était pas lue par certains clients mails et effectivement une fois sur gmail et outlook (je n'ai pas encore pu tester les autres) l'email n'est plus du tout responsive.
Qu'elle méthode utilisez vous pour réaliser des e-mails en responsive design ?
Voici mon code, au cas où, comme vous pouvez le voir il y a certainement des ajouts inutiles, arrivés là au gré de mes recherches. J'ai prévu de supprimer les commentaires et les sauts de lignes une fois la Nls finalisée mais étant débutante cela m'aide à y voir plus clair pour le moment. J'avais aussi misé sur la balise <map> mais celle ci ne supporte pas media. Bref, je sature, et mes faibles compétences aussi.
merci d'avance !
Modifié par Ckr (10 Jan 2014 - 12:21)
Je débute dans le domaine du html et je me suis mise au défi de réaliser une newsletter responsive !
Le résultats doit s'adapter aux clients web, tablette et mobile sous différents supports évidement, et pour l'instant je pietine...
J'ai parcourue différentes réponses sur le forum et j'ai utilisé la balise @media, comme expliqué ci dessous :
http://www.alsacreations.com/tuto/lire/1533-un-e-mail-en-html-responsive-multi-clients.html
Seulement il m'avait semblé avoir lu quelque part que cette technique n'était pas lue par certains clients mails et effectivement une fois sur gmail et outlook (je n'ai pas encore pu tester les autres) l'email n'est plus du tout responsive.
Qu'elle méthode utilisez vous pour réaliser des e-mails en responsive design ?
Voici mon code, au cas où, comme vous pouvez le voir il y a certainement des ajouts inutiles, arrivés là au gré de mes recherches. J'ai prévu de supprimer les commentaires et les sauts de lignes une fois la Nls finalisée mais étant débutante cela m'aide à y voir plus clair pour le moment. J'avais aussi misé sur la balise <map> mais celle ci ne supporte pas media. Bref, je sature, et mes faibles compétences aussi.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" content="width=device-width" />
<style type="text/css">
body
{font-family:Helvetica, Arial, sans-serif;
font-size:15px;}
@media only screen and (max-width:649px) {
table[class=tab] {width:100% !important;}
img[class=imgs] {width:100% !important;}
map[class=mapl] {width:100% !important;}
img {height:auto !important;}
td[class=promo] {width:230px; !important;}
img[class=visu] { width:230px;!important }
td[class=hide-mobile] {width:10%; min-width:10px; !important;}
}
@media only screen and (max-width:470px) {
table[class=tab] {width:100% !important;}
img[class=imgs] {width:100% !important;}
map[class=mapl] {width:100% !important;}
img {height:auto !important;}
td[class=promo] {
display:block !important;
width:230px !important;}
img[class=visu] { width:230px !important }
td[class=hide-mobile] {display:none !important;}
}
</style>
<title>NewsLetter Template</title>
</head>
<body>
<!------------- HEADER + bannière star et bandeau de suggestion ----------->
<table class="tab" width="650" border="0" cellspacing="0" cellpadding="0"><tr><td ><a href="#"><img class="imgs" name="headerfinalresponsiveB" src="https://lh5.googleusercontent.com/-Mm9GHRYQFpE/Us-8dtLKZ6I/AAAAAAAAAyk/U_PGCCa_1YM/w1300-h712-no/headerfinalresponsive+uni.png" width="650" height="356" id="headerfinalresponsiveB" usemap="#m_headerfinalresponsiveB" alt="header" /></a>
<map name="m_headerfinalresponsiveB" id="m_headerfinalresponsiveB">
<area shape="rect" coords="0,0,317,144" href="#" alt="Header" />
</map></td></tr><tr ><td ><img class="imgs" src="https://lh6.googleusercontent.com/-_1nBO7-j1g4/Us1qgo-YzrI/AAAAAAAAAwI/sDxy3QBiGJI/w1300-h142-no/bandeausugg.png" width="650" height="70" /></td></tr></table>
<!------------- AVANTAGES 1&2 ----------->
<table class="tab" width="650" border="0" cellspacing="0" cellpadding="0">
<tr height="145px">
<!--- Marge G -->
<td width="85" > </td>
<!--- Visu 1 -->
<td class="promo" width="260" >
<div style="margin-top:2px; margin-bottom:2px;">
<p><a style="color:#ec680b;font-weight:bold;" href="#">Jusqu'à 50% de réduction dans les magasins</a></p>
</div>
<img class="visu" style="margin-bottom:10px" src="https://lh4.googleusercontent.com/-2GVKmTDhOYo/Us1qgtxeBvI/AAAAAAAAAwM/JYuIrhQ1pvk/w520-h260-no/visu+promo.png" width="100%" height="130" />
<div style="margin-top:2px; margin-bottom:2px;">
<p>En ligne ou sur place, louez votre matériel de ski à un tarif préférentiel dans 141 magasin</p>
</div>
<div style="padding-left:50px; padding-right:15px; padding-bottom:10px;"><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:35px;v-text-anchor:middle;width:130px;" arcsize="12%" stroke="f" fillcolor="#EC680B">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://"style="background-color:#EC680B;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:35px;text-align:center;text-decoration:none;width:130px;-webkit-text-size-adjust:none;padding-left: ">J'en profite !</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
<!--- Marge C -->
<td class="hide-mobile" width="110" > </td>
<!--- Visu 2 -->
<td class="promo" width="260">
<div style="margin-top:2px; margin-bottom:2px;">
<p><a style="color:#ec680b;font-weight:bold;" href="#">Jusqu'à 50% de réduction dans les magasins</a></p>
</div>
<img class="visu" style="margin-bottom:10px" src="https://lh4.googleusercontent.com/-2GVKmTDhOYo/Us1qgtxeBvI/AAAAAAAAAwM/JYuIrhQ1pvk/w520-h260-no/visu+promo.png" width="260" height="130" />
<div style="margin-top:2px; margin-bottom:2px;">
<p>En ligne ou sur place, louez votre matériel de ski à un tarif préférentiel dans 141 magasins</p>
</div>
<div style="padding-left:50px; padding-right:15px; padding-bottom:10px;"><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:35px;v-text-anchor:middle;width:130px;" arcsize="12%" stroke="f" fillcolor="#EC680B">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://"style="background-color:#EC680B;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:35px;text-align:center;text-decoration:none;width:130px;-webkit-text-size-adjust:none;padding-left: ">J'en profite !</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div></td>
<!--- Marge D -->
<td width="85" > </td>
</tr>
</table>
<!-------------- Bandeau recommandation ------------------------->
<table class="tab" width="650" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="6">
<a href="#"><img class="imgs" alt="Un bon plan vous manque ? Suggérez nous vos adresses, on négocie pour vous !" src="https://lh4.googleusercontent.com/-83jiVFOB5Kw/Us-8dQt3MpI/AAAAAAAAAyg/EIFyr5V1qf0/w1524-h272-no/Bandeau+bas+uni.jpg" width="650" /></a>
</td>
</tr>
<!----- Pub appli + nd ----------->
<tr>
<td width="230"><img class="imgs"src="https://lh6.googleusercontent.com/-95mGVH5HF6c/Us-8ddjJJMI/AAAAAAAAAys/qH9f67z9akk/w460-h300-no/bon+plan+uni.png" width="230" height="150" /></td>
<td width="418"><img class="imgs"src="https://lh3.googleusercontent.com/-OaOHaiWijH4/Us57LpCgnfI/AAAAAAAAAxI/Je6Das6bA-k/w840-h300-no/banniere+nd+PETITE.png" width="420" height="150" /></td>
</tr>
<!------------- FOOTER ---------------------->
<table class="tab" width="650" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><p style="text-align:center;font-size:10px;" >Ce message vous est envoyé dans le cadre de la lettre d'information du programme avantage.<br />
Conformément à la loi « Informatiques et Libertés » du 6 janvier 1978, vous disposez d'un droit d'accès, de modification, et de rectification et de suppression des données qui vous concernent. <br />
Vous pouvez l'exercer en adressant un e-mail à contact@contact.fr , par courrier au siège social de la société ,en précisant « Service communication - données personnelles », ou par téléphone au 04.</p>
<p style="text-align:center;font-size:10px;" >Partager ce message :<br />
Facebook + Google + Twitter</p></td>
</tr>
<tr>
<td style="text-align:center; font-size:9px;"><a style="color:rgb(0,0,0);" href="#">Mettre à jour mon profil</a> | <a style="color:rgb(0,0,0);text-align:center;" href="#">Se désabonner</a> | <a style="color:rgb(0,0,0);text-align:center;" href="#">Engagements de confidentialité</a></td>
</tr>
</table>
</body>
</html>[#black][/#][#violet][/#]merci d'avance !
Modifié par Ckr (10 Jan 2014 - 12:21)
)
