Creating An Email Layout Using Columns

Published by

With The Drag & Drop Email Builder nearly a week old I thought it would be a good time to explore the way email layouts work and the kind of things a designer must keep in mind while creating them.


In order to keep some level of consistency across all clients, whether web based (like Yahoo! or Gmail), Smartphones or even good old Outlook, emails use HTML tables for their layout. A HTML table is exactly as you might expect it to be and is made up of rows and columns (just like in your favourite spreadsheet program). Regardless of whether you are creating an email in the Email Builder or hand coding it yourself, this is the way you would need to think about layout when designing your emails. To use the Builder to its full potential it is important that you understand this concept so I shall try to explain it in full within this article.

How to think like an Email Builder

Creating the layout for your design using columns is easy in the Email Builder as it provides a number of structural components to let you define the wire-frame to then position your content exactly where you want it.

Structrual Components

Take the following email as an example:

Full Email


We can see how most of this email neatly falls into one, two and three column sections and how we might divide that up. But this concept doesn’t stop when we come to looking at the more complex areas such as the footer. Let’s take another look at that section with the show/hide regions option switched on:


Email Footer


We can see now how this seemingly more complicated layout still can be achieved by simply nesting different column layouts within others. Specifically this layout is:

  • A 1 column layout with the dark grey background set on it.
  • Inside that we have a 2 column layout for the email preferences text (left) and the contact details (right).
  • Below that (but still within the overall 1 column) we have another 2 column layout for the copyright info (right) and the standards compliance logos (left).

When it comes to the logos we could, of course, uploaded these as a single image to save ourselves some complication but in this case we want each logo to have a different link set on it so needed them to be separate images. It is not possible to simply sit images next to each other in the same column (they would automatically be positioned one under the other) so what we have done is to nest a 3 column layout inside the left hand column of the 2 column layout that we already had in place. This allows us to place each image in it’s own column and so effectively position the different images next to each other as we want.

Nearly all emails can ultimately be broken down in this way which makes our job as an email builder nice and simple. So take another look at your designs to see how they might work within The Drag & Drop Email Builder and let us know in the comments section below how you get on.

Happy Building!

About Matthew Serbyn

Product Manager at Emailcenter, the UK's largest independent ESP.


Design & Content