Responsiveness

Media queries are a standard way to optimize layouts for small screen sizes on the web. In the email world, though, there are some “small screen scenarios” where media queries aren’t supported (eg. some Gmail Apps) or only partially supported (eg. some Android device native mail apps).

Hybrid design uses inline-block, max-width, min-width, and ghost tables stack columns without media queries while imposing a fixed, desktop width for Outlook.

<tr>
    <td>
        <!--[if mso]>
        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
        <tr>
        <td width="340">
        <![endif]-->
            <div style="display:inline-block; width:100%; min-width:200px; max-width:340px;">
                Column 1
            </div>
        <!--[if mso]>
        </td>
        <td width="340">
        <![endif]-->
            <div style="display:inline-block; width:100%; min-width:200px; max-width:340px;">
                Column 2
            </div>
        <!--[if mso]>
        </td>
        </tr>
        </table>
        <![endif]-->
    </td>
</tr>

In this example, the two columns will display side-by-side on wide, desktop displays and stack on top of each other in narrow, mobile displays. The promotional email template uses this technique in a few places.

Once a hybrid baseline is set, media queries can be used to fine-tune a responsive email layout. Since columns are (hopefully) already stacked, media queries can be used to change the width and text alignment in small viewports.

Default desktop padding for email templates is 30px. Utility classes can be used to reduce spacing to 20px or remove padding on smaller viewports. Useful for tightening up email layouts on mobile.