Jump to content

Problème de largeur email / Outlook 2016(PC) PS 1.6.1.12

lucho84
 Share

Recommended Posts

lucho84 Newbie

lucho84

Posted
Posted

Bonjour à tous,

Je viens de me rendre compte d'un bug important au niveau des templates des emails (création de comptes utilisateur, par exemple) et du rendu sur outlook 2016 pour PC et thunderbird.

Sur Outlook 2016 pour PC, le template est full width et prends donc toute la largeur de la fenêtre alors que sur Office 2016 Mac, Gmail, Roundcube etc... le template est centré et de taille fixe.

Sur thunderbird (testé sur Mac), j'ai une taille fixe mais non centré (décalage important du bloc vers la droite).

Je n'ai pas touché au code css fourni par presta, juste la mise en page du bloc comme ceci 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<title>Message de {shop_name}</title>
		
		
		<style>	@media only screen and (max-width: 300px){ 
				body {
					width:218px !important;
					margin:auto !important;
				}
				.table {width:195px !important;margin:auto !important;}
				.logo, .titleblock, .linkbelow, .box, .footer, .space_footer{width:auto !important;display: block !important;}		
				span.title{font-size:20px !important;line-height: 23px !important}
				span.subtitle{font-size: 14px !important;line-height: 18px !important;padding-top:10px !important;display:block !important;}		
				td.box p{font-size: 12px !important;font-weight: bold !important;}
				.table-recap table, .table-recap thead, .table-recap tbody, .table-recap th, .table-recap td, .table-recap tr { 
					display: block !important; 
				}
				.table-recap{width: 200px!important;}
				.table-recap tr td, .conf_body td{text-align:center !important;}	
				.address{display: block !important;margin-bottom: 10px !important;}
				.space_address{display: none !important;}	
			}
	@media only screen and (min-width: 301px) and (max-width: 500px) { 
				body {width:308px!important;margin:auto!important;}
				.table {width:285px!important;margin:auto!important;}	
				.logo, .titleblock, .linkbelow, .box, .footer, .space_footer{width:auto!important;display: block!important;}	
				.table-recap table, .table-recap thead, .table-recap tbody, .table-recap th, .table-recap td, .table-recap tr { 
					display: block !important; 
				}
				.table-recap{width: 295px !important;}
				.table-recap tr td, .conf_body td{text-align:center !important;}
				
			}
	@media only screen and (min-width: 501px) and (max-width: 768px) {
				body {width:478px!important;margin:auto!important;}
				.table {width:450px!important;margin:auto!important;}	
				.logo, .titleblock, .linkbelow, .box, .footer, .space_footer{width:auto!important;display: block!important;}			
			}
	@media only screen and (max-device-width: 480px) { 
				body {width:308px!important;margin:auto!important;}
				.table {width:285px;margin:auto!important;}	
				.logo, .titleblock, .linkbelow, .box, .footer, .space_footer{width:auto!important;display: block!important;}
				
				.table-recap{width: 295px!important;}
				.table-recap tr td, .conf_body td{text-align:center!important;}	
				.address{display: block !important;margin-bottom: 10px !important;}
				.space_address{display: none !important;}	
			}
</style>

	</head>
	<body style="-webkit-text-size-adjust:none;background-color:#fff;width:650px;font-family:Open-sans, sans-serif;color:#555454;font-size:13px;line-height:18px;margin:auto" >
<table class="table table-mail" style="width: 100%; margin-top: 10px; -moz-box-shadow: 0 0 5px #afafaf; -webkit-box-shadow: 0 0 5px #afafaf; -o-box-shadow: 0 0 5px #afafaf; box-shadow: 0 0 5px #afafaf; filter: progid:DXImageTransform.Microsoft.Shadow(color=#afafaf,Direction=134,Strength=5);">
<tbody>
<tr>
<td class="space" style="width: 20px; padding: 7px 0; vertical-align: top;"><img src="https://www.domaine.com/img/cms/TemplateEmail/bandes-right_1.png" alt="" width="25" height="400" /></td>
<td style="padding: 7px 0;" align="center">
<table class="table" style="width: 100%;" bgcolor="#ffffff">
<tbody>
<tr>
<td class="logo" style="padding: 7px 0;" align="center"><a title="{shop_name}" style="color: #337ff1;" href="{shop_url}"> <img alt="{shop_name}" src="{shop_logo}" /> </a></td>
</tr>
<tr>
<td class="titleblock" style="padding: 7px 0;" align="center"><span style="color: #00000; font-family: Open-sans, sans-serif; font-size: small;" size="2" color="#000000" face="Open-sans, sans-serif"><span class="title" style="font-weight: 500; font-size: 28px; text-transform: none; line-height: 33px; color: #000000;"> Bonjour {firstname} {lastname},</span><br /> <span class="subtitle" style="font-weight: 500; font-size: 23px; text-transform: none; line-height: 35px; color: #000000;">Bienvenue dans l'Univers domaine. </span></span></td>
</tr>
<tr>
<td class="box" style="border: 1px solid #D6D4D4; background-color: #f8f8f8; padding: 7px 0;">
<table class="table" style="width: 100%;">
<tbody>
<tr>
<td style="padding: 7px 0;" width="10"></td>
<td style="padding: 7px 0px; text-align: center;">
<p style="border-bottom: 2px solid #d7b458; margin: 3px 0 7px; text-transform: uppercase; font-weight: 500; font-size: 18px; padding-bottom: 10px;" data-html-only="1"><span style="color: #000000;">Vos codes d'accès sur {shop_name}</span></p>
<p></p>
<p><span style="color: #000000; font-family: Open-sans,sans-serif; font-size: small;" size="2" color="#555454" face="Open-sans, sans-serif"><span style="font-size: medium;" size="3" color="#666666">Afin d’accéder à votre compte et pour bénéficier de tous vos avantages sur notre e-boutique, conservez bien précieusement vos identifiant et mot de passe : </span></span></p>
<p><span style="color: #555454; font-family: Open-sans, sans-serif; font-size: small;" size="2" color="#555454" face="Open-sans, sans-serif"><span style="color: #777;"><span style="text-decoration: underline; color:#9a6600;">Vos codes d'accès :</span><br /><br /> <span style="color: #000000;"><strong>Adresse e-mail : <a style="color: #337ff1;" href="mailto:{email}"><span style="color: #000000;">{email}</span></a></strong></span><br /><span style="color: #000000;"> <strong>Mot de passe :</strong> {passwd}</span> </span> </span></p>
</td>
<td style="padding: 7px 0;" width="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="space_footer" style="padding: 0!important;">
<p><img src="https://www.domaine.com/img/cms/Newsletter/footer_newsletter.jpg" alt="" width="588" height="183" /></p>
</td>
</tr>
<tr>
<td class="linkbelow" style="padding: 7px 0;">
<table width="588" border="0">
<tbody>
<tr>
<td align="right"><a href="https://www.domaine.com"><img src="https://www.domaine.com/img/cms/TemplateEmail/site-logo.jpg" width="150" height="150" /></a></td>
<td align="center"><a href="https://www.facebook.com/domaine-121092907918577/"><img src="https://www.domaine.com/img/cms/TemplateEmail/facebook-logo.jpg" width="150" height="150" /></a></td>
<td align="left"><a href="https://www.instagram.com/domaine_officiel/"><img src="https://www.domaine.com/img/cms/TemplateEmail/instagram-logo.jpg" width="150" height="150" /></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="box" style="border: 1px solid #D6D4D4; background-color: #f8f8f8; padding: 7px 0;">
<table class="table" style="width: 100%;">
<tbody>
<tr>
<td style="padding: 7px 0px; text-align: center;" width="10"></td>
<td style="padding: 7px 0px; text-align: center;">
<p style="border-bottom: 2px solid #d7b458; margin: 3px 0 7px; text-transform: uppercase; font-weight: 500; font-size: 18px; padding-bottom: 10px;"><span style="color: #000000;">Le service domaine :</span></p>
<p><span style="color: #000000;">Profitez des Services Exclusifs d'domaine, sur note site</span><a href="https://www.domaine.com/fr/"> https://www.domaine.com</a></p>
<p><img alt="" src="http://www.domaine.com/img/cms/picto_camion.png" width="40" height="40" /></p>
<p><span style="color: #000000;">Livraison offerte à partir de 49€ d'achats</span></p>
<p><img src="http://www.domaine.com/img/cms/PICTO_CADEAU.png" width="40" height="40" /></p>
<p><span style="color: #000000;">Echantillons Offerts</span></p>
<p><img src="http://www.domaine.com/img/cms/picto_ECHANTILLON_MARRON.png" width="40" height="40" /></p>
<p><span style="color: #000000;">Emballage Gratuit</span></p>
</td>
<td style="padding: 7px 0;" width="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="space_footer" style="padding: 0!important;"><img src="https://www.domaine.com/img/cms/Newsletter/desert-footer.jpg" alt="" width="598" height="182" /></td>
</tr>
<tr>
<td class="linkbelow" style="padding: 7px 0;"><span style="color: #555454; font-family: Open-sans, sans-serif; font-size: small;" size="2" color="#555454" face="Open-sans, sans-serif"> <span><span style="color: #000000;">Vous pouvez dès à présent passer commande sur notre boutique :</span> <a style="color: #337ff1;" href="{shop_url}">{shop_name}</a></span> </span></td>
</tr>
<tr>
<td class="space_footer" style="padding: 0!important;"></td>
</tr>
</tbody>
</table>
</td>
<td class="space" style="width: 20px; padding: 7px 0; vertical-align: top;"><img src="https://www.domaine.com/img/cms/TemplateEmail/bandes-left.png" alt="" width="23" height="400" /></td>
</tr>
</tbody>
</table>
<p></p>
<p></p>
<p></p>
</body>
</html>

Par défaut ça apparait comme ceci sur firefox (même chose sur Outlook 2016 pour MAC) -> CF PJ

Qu'en pensez vous? Manque t'il un media queries ppour les écrans FullHD avec Outlook 2016 (bizarre car mois je suis en FullHD sur mon outlook 2016 Mac et tout fonctionne parfaitement)?

Bref je n'y comprends plus rien!

 

testtemplatemail.tiff

Link to comment
Share on other sites
lucho84 Newbie

lucho84

Posted
  • Author
Posted

Bon alors, ça m'a l'air bien plus compliquer que ça, car d'après ce que je lis sur ce site https://litmus.com/community/discussions/5956-outlook-2016-and-media-queries Outlook 2016 PC ne lis pas les média queries alors qu'Outlook 2016 pour Mac si!

J'ai testé sur un Outlook 2013 (PC) à jour, et même chose. Comment se fait il que prestashop n'a pas intégrer un code hors media queries pour supporter le client Outlook sur PC qui est quand même hyper répandu!

Je n'ai pas de presta 1.6.1.17 ni de 1.7 sous le coude, quelqu'un pourrait regarder ou me filer le code du template account afin de voir si presta a corrigé ce manquement?

Merci d'avance

Link to comment
Share on other sites
lucho84 Newbie

lucho84

Posted
  • Author
Posted

J'ai installé une 1.6.1.17 et une 1.7.2.4 en local, et je viens de vérifier aucun changement css ou html...

Ce qui veut dire que toutes les boutiques presta envoient des mails sans mise en forme pour Outlook version PC, c'est incroyable quand même quand on sait qu'Outlook est quand même un client de messagerie, le plus utilisé au monde!

Si vous avez une idée afin de résoudre ce problème (css ou html?) pourriez vous me donner vos avis et en parallèle me dire comment remonter cet oubli aux dev de presta pour qu'il fasse le nécessaire sur une futur MAJ?

Link to comment
Share on other sites
lucho84 Newbie

lucho84

Posted
  • Author
Posted

Ce topic, n'a pas l'air d’intéressé grand monde! J'ai donc demandé à prestashop si leur template email payant sont garanties 100% identique et compatible au niveau de l'affichage sur la majorité des webmails / client de messagerie, j'attends leur réponse et si c'est le cas, je ne m’embêterais pas, j'en achèterai un car il y a tellement de différence au niveau prise en charge css / media queries entre les différents webmails et client de messagerie, que si je dois concevoir le code ça me prendra un temps considérable.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...