Responsive custom HTML
Where possible, build with responsiveness in mind, and use percentage widths instead of pixel widths:
<table style="width: 100%;"></table>
To find the HTML for columns:
Drag and drop a Columns building block into your email campaign.
Expand the UTILITIES drop-down menu and select 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
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.