Learn how to make your email templates responsive across various devices.
Our email templates are designed to look their best across all devices. As a result, building blocks contain various CSS styles that are essential for your email campaigns to be rendered correctly.
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.
To find the HTML for columns:
- Drag and drop a 'Columns' building block into your email campaign
- From the 'Utilities' dropdown, click Edit source
- 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
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-widthstops the column breaking its container
min-widthmakes sure the column is the right width in desktop layout
widthmakes 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.
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 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 (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.