1485 sujets

Web Mobile et responsive web design

[Résolu] Email responsive : problème sur mobile des td en display:bloc

Bonjour à tous,
ayant profité à de nombreuses reprise des solutions données sur ce forum en visiteur 'invisible', je voudrais aujourd'hui vous soumettre mon problème.
je fais de plus en plus d'email 'responsive', et j'essaie d'optimiser mes techniques pour faire passer des contenus l'un en dessous de l'autre en mobile.
J'ai testé la technique des tableaux alignés, efficace mais un peu lourde avec les correctifs 'if mso', et je me penche sur celle des td en display:block et width:100% .
Hors celle-ci ne semble pas marcher sur les clients mails mobiles android et ios , alors qu'elle marche sur la messagerie windowsphone 8 et sur les webmails mobiles.

Ma question : la technique est-elle obsolète ou alors je m'y prends mal ?

mon code (extrêmement simplifié pour le test) :

<!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>
	<title>test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width = device-width, user-scalable = no"/>
	<style type="text/css">
		@media only screen and (max-width: 480px) {	
			td[class~="drop"] { display:block !important; width: 100% !important;}
		}
	</style>	
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#000000">		
	
	<!--contenu-->
	<tr>
		<td align="center" valign="middle">
				<table cellspacing="0" cellpadding="0" border="0" width="100%"  bgcolor="#ffffff" >
											
								<tr>
									
									<td width="50%" bgcolor="red" height="200" align="center" valign="middle" class="drop">left (top)</td>
									<td width="50%" bgcolor="green" height="200" align="center" valign="middle" class="drop">right (bottom)</td>
									
								</tr>			

				</table>
		</td>
	</tr>
				
</table>
</body>
</html>


mes résultats :
https://litmus.com/pub/4e7bef0/screenshots
(en espérant ne pas faire d'entorse au réglement en mettant un lien litmus sur ce forum).

Voilà, merci d'avance pour votre aide.

Mathieu
Modifié par mro (03 Oct 2014 - 15:56)
je répond moi-même à ma question parce qu'il est un peu compliqué de trouver des infos sur le sujet et parce qu'on trouve encore la technique des td en 'display:block' sur ce tuto 'http://www.alsacreations.com/tuto/lire/1533-un-e-mail-en-html-responsive-multi-clients.html' comme sur bcp de templates mail 'responsive' dispos en ligne .
Cette technique ne fonctionne plus sur android 4.3 :
https://code.google.com/p/android/issues/detail?id=66619
https://www.campaignmonitor.com/forums/topic/7961/displayblock-not-supported-on-td-anymore-on-android-43-native-email/
et j'ai pourtant testé bcp de solutions (changement de déclaration de doctype, de client d'envoi, display:table-header-group,...)

On ne peut utiliser maintenant que la technique des tableaux avec l'attribut 'align' .
A bon entendeur.
Sujet clos
Aller à