Responsiveness

All email templates use a hybrid approach to reconfigure the layout for different screen sizes in all email clients (regardless of media query support). Once a mobile-friendly baseline is set, media queries can be used to progressively enhance emails further in clients that support them.

Stacking Columns

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

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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.

Media Queries

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.

Class Description
stack-column Makes table columns 100% wide and stacks them in source order.
stack-column-center Makes table columns 100% wide, stacks them in source order, and centers everything inside.
Note: Only email clients that support <style> in <head> will render this.

Responsive Spacing

Default desktop padding for email templates is 30px. Utility classes can be used to reduce spacing to 20px on smaller viewports.

Class Output
.sm-p padding: 20px;
.sm-pt padding-top: 20px;
.sm-pb padding-bottom: 20px;
.sm-pr padding-right: 20px;
.sm-pl padding-left: 20px;
.sm-py padding-top: 20px; padding-bottom: 20px;
.sm-px padding-right: 20px; padding-left: 20px;
.sm-mb margin-bottom: 20px;
Note: Only email clients that support <style> in <head> will render this.