Réactif 2 colonne 1 colonne e-mail dans Outlook 2007, 2010 et 2013
Je suis en train de travailler sur l'optimisation des e-mails HTML pour les appareils mobiles. J'ai été chargé de trouver une solution universelle pour la création d'un 2 colonne 1 colonne réactive mise en page. J'ai trouvé un article écrit par le suivi de la Campagne - http://www.campaignmonitor.com/guides/mobile/responsive/. J'ai essayé de leur balisage et il fonctionne sur la plupart des clients et les navigateurs à l'exception de Outlook 2007, 2010 et 2013. J'ai fourni un jsfiddle lien avec mon balisage de référence. Est-il un moyen de faire ce travail dans les versions de microsoft Outlook?
EDIT: je ne suis pas en train de faire la partie sensible de l'e-mail dans Outlook. Je veux les 2 tables ( à Gauche & Droit dans la jsfiddle exemple) pour afficher les uns à côté des autres plutôt que empilés sur le dessus de l'un à l'autre. Cela fonctionne dans Gmail (IE, FF, Chrome, Safari), AOL (IE, FF, Chrome, Safari), Yahoo (IE, FF, Chrome, Safari), Hotmail (IE, FF, Chrome, Safari), Apple Mail 4 & 5, Outlook 2003, Android 4.0, iOS 4, 5, & 6. Mon souci est qu'avec Outlook 2007 et plus tard, lorsque le moteur de rendu changé.
<html>
<head>
<style>
@media all and (max-width: 590px){
*[class].responsive{ width: 320px !important; }
}
</style>
</head>
<body>
<table width="100%" style="background-color: #000;" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="15"></td>
</tr>
<tr>
<td width="100%">
<table width="560" style="background-color: #fff;" align="center" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%">
<table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%" height="40" style="background-color: #ececec;">
<div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Left (top)</div>
</td>
</tr>
</tbody>
</table>
<table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%" height="40" style="background-color: #bcbcbc;">
<div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Right (bottom)</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="15"></td>
</tr>
</tbody>
</table>
</body>
</html>
OriginalL'auteur Doug Wallace | 2012-10-17
Vous devez vous connecter pour publier un commentaire.
Avez-vous essayé d'ajouter
align="left"
etalign="right"
le cumul de l'aide de tables?Voir mise à jour de violon: http://jsfiddle.net/bxdUp/1/
Vous avez actuellement le droit de la table avec
align="left"
, mais j'ai eu du succès avec Outlook tableau d'alignement de la manipulation de laalign
valeur.Ajoutez à cela, vous aussi besoin de définir les
border
attribut0
sur vos tables internes - ne pas, mais j'ai vu plus étrange des choses.Confirmé, de travail. Merci pour l'aide.
Qui, malheureusement, ne semble pas fonctionner dans outlook 2007 et 2010 (voir les captures d'écran de tournesol tests ici: outlook 2007 et outlook 2010)
OriginalL'auteur samanthasquared
Pour toute personne qui vient à travers cette SORTE et est à la recherche d'une solution pour le problème ci-dessus, où le réactif 2-contenu de la colonne est ÉGALEMENT centrée j'ai trouvé que l'utilisation de conditions afin de définir des colonnes uniquement pour Outlook fait mon monde de 1^300 plus facile. Bien sûr, il est plus sensible dans Outlook, mais vraiment... F Outlook.
OriginalL'auteur lucygenik
J'ai trouvé que la réduction des largeurs de tableau de quelques pixels de travail dans le cas d'Outlook, je ne peux que supposer est Outlook rendu des largeurs en pixels différemment des autres clients de messagerie.
Pas idéal, mais cela a fonctionné pour moi.
Qui fait sens. Merci
Rendre les tableaux plus petits ne fonctionne pas pour moi.
OriginalL'auteur MattHodkinson
Je ne pense pas qu'il va travailler sur différentes versions d'Outlook. D'abord parce qu'Outlook ne comprend pas les media queries. Version d'Outlook 2007 est basé sur le Moteur de rendu de IE, tandis que version d'Outlook 2010 et la version 2013 de l'utilisation de Word que le moteur de rendu pour l'affichage des e-mails html. Je crois donc il n'y a aucun moyen de les faire travailler dans Outlook.
Un point de plus, c'est que lorsque ce code est exécuté dans Outlook, il ignore tout ce qui est à l'intérieur de balises de style. Vous devriez donner du style en ligne pour les e-mails Outlook.
En fait, c'est Outlook 2003 utilisée en dernier IE - 2007+ tous l'utilisation de Word. Aussi, Outlook prend en charge
style
balises (de presque tous les grands de client de messagerie, Gmail étant la seule exception).OriginalL'auteur defau1t