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:
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 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-widthstops the column breaking its containermin-widthmakes sure the column is the right width in desktop layoutwidthmakes sure the column stretches to the full width in GmailMedia 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 blockee_columns- Allows columns to be scaledrow-inner- A container that contains the columns themselvesstack-column- A column that will stack on a mobile deviceno-stack-column- A column that does not stack on a mobile devicecol-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.