email
Codage d'e-mail hybride
Recherche…
Introduction
Lorsqu'un client de messagerie ne prend pas en charge media-queries , une approche hybride peut être utilisée pour reconfigurer la présentation pour différentes tailles d'écran pour les clients de messagerie, quel que soit le support de requête multimédia. Il utilise des tables fluides et max-width et min-width pour imposer des lignes de base rigides (permettant un certain mouvement) et impose une large largeur fixe pour Outlook qui est de toute façon enchaîné au bureau. Une fois qu'une base de référence adaptée aux mobiles est définie, les requêtes médias améliorent progressivement le courrier électronique des clients qui le prennent en charge.
Colonne unique, disposition des fluides
La configuration de base du codage hybride est une colonne unique et fluide. Comme la plupart des clients de messagerie prennent en charge la max-width , nous pouvons l'utiliser pour définir la largeur de la <table> à 100% (fluide), sans toutefois dépasser une largeur maximale ( 660px dans ce cas). Tout comme sur le web.
Toutefois, Windows Desktop Microsoft ne prend pas en charge la max-width et rendrait cette table à 100% de largeur. Nous utilisons donc des balises conditionnelles Microsoft pour configurer les " Ghost Tables " qui donnent à la <table> une largeur de 660px . Windows Desktop Microsoft est uniquement conçu pour les ordinateurs de bureau, il n'est donc pas nécessaire qu'il soit fluide à de petites tailles. Et comme Windows Desktop Microsoft est le seul client de messagerie prenant en charge ces balises conditionnelles Microsoft, aucun autre client ne sera contraint par inadvertance à une largeur de bureau de 660px .
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="">
<tr>
<td align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top">
<p>Content Goes Here.</p>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>