How-to: Mastering Multi-Column Layouts in Responsive HTML Emails – Emarsys Expert Connect

Creating responsive HTML emails that look great across all devices is a challenging yet essential aspect of email marketing. One of the key elements to consider is the use of multi-column layouts. While multi-column designs can enhance the visual appeal and organization of content on desktop, they can pose significant challenges on mobile devices. Here’s a guide to effectively implementing multi-column layouts in responsive HTML emails.

Mobile Devices: Limit to Two Columns

For mobile versions of your emails, it’s crucial to limit the layout to no more than two columns. Here’s why:

Limited Width: Mobile screens have very limited width. More than two columns can make the content appear cramped and difficult to read.
Text Breaks: Longer text strings can break the layout due to the lack of reasonable word breaks. Mobile devices may not handle long words well, causing them to stretch the container awkwardly and, therefore, distort the whole email.
Readability: The smaller the columns, the less space there is for text. This can make the email content look cluttered and challenging to read.

Avoid Three-Column Layouts

We strongly recommend against using three-column layouts for the following reasons:

Space Distribution: Three columns often lead to unequal space distribution, which looks unbalanced and unprofessional on mobile screens.
Rendering Issues: Images and text in three-column layouts can render poorly, leading to a disjointed and unattractive email.
High Failure Rate: In 99% of cases, three-column layouts cause issues on mobile devices, resulting in a poor user experience.

Optimal Column Strategy

For desktop versions, working with even column numbers (e.g., 2, 4, 6) is advisable. This approach allows for easier adaptation to mobile screens by splitting into a maximum of two columns. Here’s how to effectively implement this strategy:

Desktop: Use even numbers of columns to ensure balanced and organized layouts.
Mobile: Split the desktop columns into no more than two columns for a cleaner, more readable design.

Footer Blocks: A Special Case

While content columns should be carefully managed, footer blocks containing multiple icons (like social media links) are an exception. These elements do not change often and can be coded with a fixed-width approach on mobile devices. This ensures consistency and visual appeal without the complexity of responsive adjustments.

Implementation Example

Here’s a simple example of how to structure a two-column layout for responsive emails:

Two-column on desktop and mobile:

HTML

<tr>
  <td>
    <table cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td>
          <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
              <td align="left" style="vertical-align:top;" class="rw50p pr5">[CONTENT - COLUMN 1]</td>
              <td width="20" class="mh"></td>
              <td align="left" style="vertical-align:top;" class="rw50p pl5">[CONTENT - COLUMN 2]</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>

CSS

<style>
@media only screen and (max-width:414px) {
.mh {display: none !important;}
.rw50p {width: 50% !important;}
.pl5 {padding-left: 5px !important;}
.pr5 {padding-right: 5px !important;}
}
</style>

Four-column on desktop into two-column on mobile:

HTML

<tr>
  <td>
    <table cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td>
          <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
              <th align="left" style="vertical-align:top;" class="fl">
                <table cellpadding="0" cellspacing="0" width="100%">
                  <tr>
                    <td align="left" style="vertical-align:top;" class="rw50p pr5">[CONTENT - COLUMN 1]</td>
                    <td width="20" class="mh"></td>
                    <td align="left" style="vertical-align:top;" class="rw50p pl5">[CONTENT - COLUMN 2]</td>
                  </tr>
                </table>
              </th>
              <th width="20" height="20" class="fl"></th>
              <th align="left" style="vertical-align:top;" class="fl">
                <table cellpadding="0" cellspacing="0" width="100%">
                  <tr>
                    <td align="left" style="vertical-align:top;" class="rw50p pr5">[CONTENT - COLUMN 3]</td>
                    <td width="20" class="mh"></td>
                    <td align="left" style="vertical-align:top;" class="rw50p pl5">[CONTENT - COLUMN 4]</td>
                  </tr>
                </table>
              </th>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>

CSS

<style>
@media only screen and (max-width:414px) {
.fl {display: block !important; width: 100% !important;}
.mh {display: none !important;}
.rw50p {width: 50% !important;}
.pl5 {padding-left: 5px !important;}
.pr5 {padding-right: 5px !important;}
}
</style>

This simple structure ensures that each column is displayed side by side on desktops, while stacking them vertically on mobile devices.

Conclusion

By adhering to these best practices, marketers can create visually appealing and highly functional responsive HTML emails. Limiting to two columns on mobile, avoiding three-column layouts, and using even numbers of columns on desktops ensures that emails render beautifully across all devices. This approach enhances readability, maintains visual integrity, and ultimately drives better engagement from your audience.

Related articles