email
Hybride e-mailcodering
Zoeken…
Invoering
Wanneer een e-mailclient geen media-queries , kan een hybride aanpak worden gebruikt om de lay-out voor verschillende schermformaten voor e-mailclients opnieuw te configureren, ongeacht ondersteuning voor mediaquery's. Het maakt gebruik van vloeiende tabellen en max-breedte en min-breedte om stijve basislijnen op te leggen (waardoor enige beweging mogelijk is) en legt een vaste, brede breedte op voor Outlook die toch wordt vastgezet op de desktop. Zodra een mobielvriendelijke basislijn is ingesteld, verbeteren mediaquery's de e-mail geleidelijk verder bij klanten die deze ondersteunen.
Enkele kolom, vloeistofindeling
De basisinstelling van hybride codering is een enkele, vloeiende kolom. Aangezien de meeste e-mailclients max-width , kunnen we dat gebruiken om de breedte van de <table> te stellen op 100% (vloeibaar), maar niet meer dan een maximale breedte (in dit geval 660px ). Net als op internet.
Windows Desktop Microsoft ondersteunt echter geen max-width en zou deze tabel op 100% breedte weergeven, dus gebruiken we Microsoft voorwaardelijke tags om " Ghost Tables " in te stellen die de <table> een harde breedte van 660px . Windows Desktop Microsoft is alleen desktop, dus het hoeft niet vloeibaar te zijn bij kleine formaten. En aangezien Windows Desktop Microsoft de enige e-mailclient is die deze voorwaardelijke Microsoft-tags ondersteunt, wordt geen enkele andere client per ongeluk beperkt tot een 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>