How To Make Html Email Responsive In Gmail?
Solution 1:
Build the email to fit gmail app first and then use media queries and conditional code to make it work in everything else.
Mobile first design is the only way to make a responsive email in gmail app - see great example here
Solution 2:
Hybrid Design achieves a responsive, shape-shifting layout without using media queries. At its core, it uses max-width and min-width to impose rigid baselines (allowing some movement) and imposes a fixed, wide width for Outlook who is shackled to desktop anyway. Once a mobile-friendly baseline is set, media queries progressively enhance the email further in clients that support it (like iOS Mail).
Here is a basic 2-column scaffolding from Fabio Carneiro's code samples on GitHub (all credit to him!):
<!doctype html><html><bodystyle="margin:0;"><center><tableborder="0"cellpadding="0"cellspacing="0"height="100%"width="100%"><!-- // 2-COLUMN SCAFFOLD [CENTERING, FLUID] --><tr><tdalign="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]--><tablealign="center"border="0"cellpadding="0"cellspacing="0"width="100%"style="max-width:660px;"><tr><tdalign="center"valign="top"style="font-size:0;"><!--// DEVELOPER NOTES:
1. Setting font-size:0; is necessary to ensure
that there is no extra spacing introduced
between the centering divs that wrap each
of the columns. //--><!--[if mso]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
<td align="left" valign="top" width="330">
<![endif]--><divstyle="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;"><!--// DEVELOPER NOTES:
1. To have each column center upon stacking,
wrap them in individual divs, set the same
max-width and width as the table within it,
and set display to inline-block; using
vertical-align is optional.
2. Setting min-width determines when the two
columns of this block will wrap; in this
case, when the total available width is
less than or equal to 480px. //--><tablealign="left"border="0"cellpadding="0"cellspacing="0"width="100%"style="max-width:330px;"><tr><tdalign="center"valign="top"><!-- // REPLACE WITH BLOCK --><pstyle="background-color:#2BAADF; color:#FFFFFF; font:16px Helvetica, sans-serif, normal; margin:0 !important; padding:10px;">LEFT</p><!-- REPLACE WITH BLOCK // --></td></tr></table></div><!--[if mso]>
</td>
<td align="left" valign="top" width="330">
<![endif]--><divstyle="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;"><tablealign="left"border="0"cellpadding="0"cellspacing="0"width="100%"style="max-width:330px;"><tr><tdalign="center"valign="top"><!-- // REPLACE WITH BLOCK --><pstyle="background-color:#51BBE5; color:#FFFFFF; font:16px Helvetica, sans-serif, normal; margin:0 !important; padding:10px;">RIGHT</p><!-- REPLACE WITH BLOCK // --></td></tr></table></div><!--[if mso]>
</td>
</tr>
</table>
<![endif]--></td></tr></table><!--[if mso]>
</td>
</tr>
</table>
<![endif]--></td></tr><!-- 2-COLUMN SCAFFOLD [CENTERING, FLUID] // --></table></center></body></html>There are more scaffolds and patterns in that repo and elsewhere, but this shows the basic principle in action.
Post a Comment for "How To Make Html Email Responsive In Gmail?"