Basic structure of a template

Summary

If you're building your own templates, the easiest way is to create a new email and use one of the 'Start from scratch' templates.

In doing so, you'll know you'll always be starting from the latest version of our markup.

Basic structure

Here's a very brief outline of how the layout of the templates look:

<style blocks>
<outer table>
  <full width row>
    <drop zone>
      <building block>
      <building block>
    </drop zone>
  </full width row>
 <full width row>
 </full width row>
</outer table>

The drop zone represents where elements within EasyEditor can be dragged and dropped into. These are fixed-width elements, which are typically the full width of the email.

The full-width rows span the entire width of the user's email client. These can have background colours, as you require. Though the background colours can be changed in EasyEditor itself, EasyEditor can't actually manipulate these rows (move, add, remove, etc.).

Adding full-width rows

To add a new full-width row, you need to find the comments within our 'Start from scratch' template that read:

<!--- EMAIL BODY : START -->
...
<!--- EMAIL BODY : END --->

If you duplicate that code, you will create a new full-width row. You can add your own styles to that table, as you see fit.

For more information about adding full-width rows (or full-width images), see 'Full-width rows in templates'.

Outlook conditional comments

You will notice, throughout the markup, that there are a lot of Outlook conditional comments which look like this:

<!--[if (gte mso 9)|(IE)]>
<table cellspacing="0" cellpadding="0" border="0" width="660" align="center">
<tr>
<td>
<![endif]-->

Please make sure you preserve these blocks. Without these, your email will not display correctly in Microsoft Outlook.

Outlook conditional width calculations

You will notice width="..." values throughout the Outlook conditional comments. If you make changes to your email, such as changing widths, etc., there is no need to update these: when you next save your campaign, these will be automatically updated for you.

Responsive HTML

Our responsive templates are designed to look their best across all mobile devices, and, as such, they may contain various styles that could prove challenging to initially understand. However, all of the styles you see are required in order for the email to render correctly in all email clients.

For example, a column looks a little like this:

<div class="stack-column stack-column-width" 
style="max-width: 50%; min-width: 320px; width: 600px;">

This is the code for a 50% wide column in a 640 pixel-wide container. To briefly explain this further:

  • 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/Android (the 600px here is not a mistake!)
  • Media queries force the column to be the right width on other mobile devices

There are many styles which make this column work, and even more thought and care is needed when you start nesting columns.

For the most part, if you're adding columns inside EasyEditor, you don't need to worry about this. However, if you're hand coding your templates, you'll need to make sure you're marking it all up correctly.

If you use our classes/columns, EasyEditor will update any incorrect widths, but only when you move a block within the email. Please remember to do this to safeguard against sending out any incorrect HTML.

Adding custom HTML

If you're building custom blocks outside of EasyEditor, then understanding how our templates work is even more important.

Where possible, build with completel responsiveness in mind, and have no pixel widths. Instead of:

<table style="width: 550px;"> ... </table>

Do:

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

Obviously, at times, this isn't possible, and you need to use pixel widths. And at other times, making something purely responsive isn't what you need (for example, columns that stack when on a mobile device).

Media queries

Please be aware that media queries work on most mobile devices, but not all. The Gmail app (on Android) doesn't support them.  

The Gmail app has various limitations in this respect. It's possible to get columns to stack using the "width: 600px;" method (see above). But for your custom code, you may need to research and invent your own way to get it to work.

That said, media queries do work on most other mobile email clients, so you can use them to make your code responsive in everything except the Gmail app.

Our advice is to get your email to look good enough in the Gmail app. Whilst it may look different in other mobile email clients, this may be the best result you can achieve.

Outlook

And don't forget about Outlook! Outlook doesn't support certain newer HTML tags very well, such as <div> elements, etc., so you're still best advised using tables for layout, when it makes sense.

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

Testing

Beyond anything else, we urge you to test test test! Testing is always a great idea, regardless of what you're doing. If you're marking up your own templates, then it's imperative that you test using something like our inbox testing tool.

There are other tools that will help you test too, such as Litmus (which powers our own inbox testing tool) or Email on Acid.  

Alternatively, you can test directly to your own devices.

Have more questions? Submit a request

Comments

Powered by Zendesk