Summary

Our 'Start from scratch' and our 'Mobile email. Rebooted.' 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.

Making custom HTML responsive

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.

Making columns responsive

To find the HTML for columns:

  1. Drag and drop a 'Columns' building block into your email campaign
  2. From the 'Utilities' dropdown, click 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

Making your email templates compatible for 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.