Make your email template responsive

Our email templates contain various CSS styles that are essential for your email campaigns to be rendered correctly across devices.

Gareth Burroughes avatar
Written by Gareth Burroughes
Updated over a week ago

Responsive custom HTML

Where possible, build with responsiveness in mind, and use percentage widths instead of pixel widths:

<table style="width: 100%;"></table>

Pixel widths in Microsoft Outlook

Microsoft Outlook doesn't support percentage widths. To make sure that this example displays correctly in Microsoft Outlook, you'll also need to use conditional comments with pixel widths.

Responsive columns

To find the HTML for columns:

  1. Drag and drop a Columns building block into your email campaign.

  2. Expand the UTILITIES drop-down menu and select Edit source.

  3. Find the HTML that is between the following comments:
    ​<!-- STACK COLUMN : BEGIN -->
    ​<!-- STACK COLUMN : END -->

The container for the columns building block is the table with the ee-type="container"attribute.

The HTML and CSS for a 50% wide column in a 640 pixel-wide container looks like this:

<div class="stack-column stack-column-width" ee-percent-width="50"     style="max-width: 50%; min-width: 100%; width: 50%;">

Here's an explanation of what each of these CSS properties does:

  • max-width stops the column breaking its container

  • min-width makes sure the column is the right width in desktop layout

  • width makes sure the column stretches to the full width in Gmail

  • Media queries force the column to be the correct width on other mobile devices

Automatic updates to column widths

If you use the correct classes for columns, EasyEditor will update any incorrect widths when you drag a block in the user interface.

Columns classes

EasyEditor has many different classes for creating columns and complex layouts. For best results, build a layout by using the building blocks in EasyEditor first, then edit the source code.

Here are explanations for some classes that you might find in the source code of column blocks:

  • row - Defines a row in a column block

  • ee_columns - Allows columns to be scaled

  • row-inner - A container that contains the columns themselves

  • stack-column - A column that will stack on a mobile device

  • no-stack-column - A column that does not stack on a mobile device

  • col-inner - A container in a column

Creating email templates compatible with different email clients

Media queries

Media queries work on most email clients, but not on all of them, for example, the Gmail Android application doesn't support them.

As a workaround for media queries, you can stack columns using the style="width: 600px;" inline style, but you might need to research and create your own way of stacking columns for you own email templates.

Microsoft Outlook

Microsoft Outlook (MSO) supports only some newer HTML tags, such as <div> tags. Instead of using these tags, we recommend that you use tables.

However, if you really don't want to use tables, then you can include tables just for MSO by using conditional comments.

Testing your campaigns

If you're marking up your own templates, then it's important that you test your email campaigns with our inbox testing tool.

Did this answer your question?