Understanding Email Layout and Structure

This is the fourth article of the “Email Design Basics for Email Marketers” series. In this chapter, I’m going to explain what kind of elements make up an email template and how they are built.

I’m not an email design genius, neither an email developer. I’m an online marketer who truly understands what lies behind a fancy email template.

If I wanted to simplify the whole story, I would say HTML emails are “only” the combination of rows and columns, and that’s all really. We simply fill up the empty cells with our desired content and we’re done, right?

Something like that. But to know how to combine the structure elements with content element you need to understand how the layout and structure of an email template are built up.

By the end of this article, you’ll be able to create all sorts of designs with a drag-and-drop email editor like Chamaileon, even without knowing how to code HTML.

If this is your first article in the series, you might want to check out previous ones too:

If you want to be noticed about future articles, subscribe to our newsletter below:

Layout vs. Structure – Short Explanation

I’m sure most of you have heard of both terms. But do you know exactly what they mean?

The layout is the look and feel of the email (i.e. overall appearance), while the structure is the order in which the elements are arranged. The structure makes the email feel connected when putting together.

The usual structure for a marketing email template includes:

• Greetings
• Headline
• Content (body)
• Call to action
• Closing

For example if you want to structure your email for “scanners”, you will need to break up your emails into bite sized chunks which can be understood even for those who don’t read your email.

In your email templates, you will use:

• Titles
• Texts
• Images
• Buttons
• Rows
• Columns

These are still the very basic building blocks of most responsive email templates from a layout perspective.

HTML emails layouts are still built up from tables, rows, columns

Unfortunately due to various historical reasons, responsive HTML emails are still based on tables.

On top of that there are usually many tables nested into each other to make your email design look perfect even in Microsoft Outlooks.

That’s why email coding can be extremely tiresome especially if somebody is new to it. If you are a code minded person, you might want to check out our modern HTML email coding tutorial series on EDMdesigner.com

Thankfully you don’t have to learn code. It’s enough if you read on and learn how different elements of email layout relate to each other, and what are your limitations and possibilities.

Note: I may not use always the most technically correct expressions in this article. I tried using simpler expressions that even those will understand who never saw an HTML code.

Email “body”

Email “body” is the main background of your email message. This background is behind every content you add to your template.

It’s like a special table which contains every other table you add to your template later. You can change the settings of your email body under the “Defaults” tab in Chamaileon.io.

The email body can have:

• Background color – You can give a single background color to your template.
• Background image
• Single image – You can either add a large single image (generally not advised since your email weight can get really heavy)
• Pattern – Or use some lightweight pattern instead which repeats in the background of your email.

You can take a look at out video tutorial on how to change the background of an email here.

Note: You need to use “repeat both” property for your background images / patterns to make them work in Outlook 2007, 2010, and 2013.

Rows and columns

Most email templates contain rows (red) and columns (blue) to organize content elements, like images and text.

If you want to put an image and text, or simply two text blocks next to each other, you will need to add “columns” to your template and then add your content elements (like image or text) into the columns.

In Chamaileon, all of your building blocks are separate rows in the email template. These rows – aka “Full-width element” – have the following properties:

• One or two cells – You can divide your full-width element in half and give distinct backgrounds to both sides.
• Background color
• Background image
• Mobile display settings – You can hide the whole row in the mobile version of your email template.

Note: Email builders give different levels of control over the properties of “rows”.

Most of the so called “single column” email templates actually contain multiple columns. Let’s see an example from MailChimp’s email editor.

Although the main content area has one column, both the pre-header and footer icons include multiple columns.

The MailChimp editor doesn’t gives you sophisticated control over columns or rows, they rather offer built-in elements, like the “Social Share or Follow” elements, which will automatically create the required multi-column structure.

In the Layout editor of Chamaileon, you have complete control over the following properties of columns:

• No. of columns (max 5 in one structure, but you can embed multiple elements into each other)
• Pixel perfect width settings
• Mobile display settings – To configure if you want your columns to be visible on mobile and even if you want them to reorder to a single column.

These settings provide you with the flexibility to create most email designs with Chamaileon without writing a single line of code.
.
This is how flexible it is to create it in Chamaileon.

Container / Structural tables – aka. “Box”

If you want to add spacings and backgrounds to the various elements of your email template, you will need to use some “invisible” tables – we call them “Boxes”.

These tables will provide frames to all of the elements you insert into them. You have control over the following properties:

• Spacings – Set pixel perfect paddings and margins. Padding is the space between your inner content and the border of the Box, while margin is the space outside the border.
• Borders – You can set color, style, width, radius (coming soon).
• Background – Color, image, or pattern. Note: Outlooks do not support background images, so you need to apply secondary background colors, because only these will show in Outlooks.
• Hide preferences – You can configure this if you want to hide the given Box and it’s content on mobile or desktop. In this way, you can show different content to your email subscribers depending on their device in use.

Most email builders have some kind of “box” element built into their HTML code, but in most cases users are not able to control all the above properties, and especially not in a “pixel perfect” manner.

You will usually find a Divider or Spacer element in email builders as well, which is technically an “empty box” which can have spacing, background, and border properties.

This handy little box (table) element is very useful if you want to truly customize an existing email template or you want to recreate a really complex design based on PSD.

When you truly understand how rows, columns, and boxes relate to each other, you’ll be able to do some magic 🙂 and turn your imagination into reality.

Basic Content Elements – Text, Image, Button

From a design perspective, it’s really important to understand how you can create the structure of your email template – but in real life, content comes first.

You cannot start designing an email template without knowing:

• Goal of the email,
• Target audience,
• Email copy.

Text / Title element

Using Lorem ipsum all over the template is a bad practice. You have to compose the text of your email at first, then focus on finding the right layout to represent the chosen message.

This article focuses on email design, so I won’t go into details about email copywriting. We will do that in future blog series.

After you come up with the message of your email, you’ll need to style it and make it attractive for your subscribers.

Unfortunately text styling is limited in email design compared to regular web design. Only web safe fonts are properly supported by all email clients. That’s the reason why most email builders – just like Chamaileon – are restricted to web safe fonts.

Properties that you can configure on a text element:

• Font type – Arial, Georgie, Tahoma, Times New Roman, Trebuchet MS, Verdana
• Font size
• Line-height
• Text color
• Text background color – This will make your text look like you used some kind of highlighter pen. Please don’t use this option. Even a single highlighted word might ruin your email design. The reason is that it simply is not fashionable and it looks cheap.
• Link style
• Link color
• Spacing – In order to position your text, you are able to decide top, bottom, right, and left spacings around your text in most email builders – in Chamaileon too. It is solved by an invisible table around your text element.

Text content is usually born in a Word or Google Doc file these days and will be copy pasted either directly to the HTML or to an email builder.

If you copy paste your text content from Word to your email builder, always double check the HTML code. Unfortunately, MS Word can sometimes add really messy and unnecessary code to your email.

Image element

Images should be used to reinforce and strengthen the written message of your email. Right image usage will help you make more out of your email templates.

You can set the following properties of an image in the email:

• Alt text – This is the text that will be displayed in case your image is not shown. For example, Outlooks won’t show images by default.
• Link
• Alignment
• Size
• Margin, Padding, Border (just like in case of Box)
• Background color

Image styling is still quite basic in email, though it includes all of the essential properties. But there are a couple of things you cannot reliably do in email:

• Wrap text around images – Not supported in Outlooks and Windows Mail.
• Rounded images – It’s better to use an image editor to create a rounded or circle version of your image (for example, from a profile picture).

Button element

Since you can add a link to an image, there are still many companies using images instead of HTML based buttons. Actually, that’s completely against the best practice because images won’t show up if the recipients’ email client blocks images by default.

HTML buttons will always show up (even if images are blocked), and they can easily resize to the needed size on mobile screens too.

We generally advise all of our users to use HTML based buttons in their responsive email designs. They might not look as “fancy” as image based buttons but can totally meet the material or flat design requirements.

HTML based buttons in email can have the following properties:

• Link
• Font type
• Font size
• Line-height
• Color
• Alignment
• Size – In the email editor you can decide if you want your button to have a fixed size or fit size to text, and even configure if you want your button to be fluid on mobile – which means that it will scale to full-width of the screen when your email is viewed on the smart phone.
• Margin, Padding, Border + Border radius
• Background color or image

You will most likely use buttons for call-to-actions, but you can also use them for menu elements, or social share buttons. Literally, for any action you want your subscribers to make.

We made a tutorial video on how to add a link to a button. You can check it here.

I hope the above explanation of the various elements of email gave you a clear understanding of the basics, so it’s time to move on and test your knowledge.

Test yourself – Do you know how these email layouts are built?

Here are a few building blocks from our email builder software. All of these were created with the Chamaileon editor itself. No hand-coding involved.

Let’s jump to the first example, which includes all basic elements: image, text, button and is organized into a fairly simple structure.

I hope you can see that there are two (full-width) rows on the picture. The first row includes an image element, the second row includes a Box, a Title, some Text and two Buttons which are placed next to each other using two Columns.

I hope you successfully identified the elements and would be able to create the same layout with an email builder.

It’s time to move on to a more complex layout, which also features the basic elements (Image, Text, Button) but organized in a more complicated way and there’s quite a tricky solution in the middle.

First, let’s analyze the layout before I give you the detailed solution. From the image above, we see that:

• There’s a logo on the top. This is most likely an image or maybe text.
• There are 5 menu elements underneath with a thin black bottom border.
• Then we see a big block with a light green nature themed background image.
• This block includes a framed text block inside.
• Title, a text, and a button under that block.

Whenever you start designing an email from scratch you have to “draw” the layout in your mind. I hope this little analysis helped you to imagine the layout of this email block.

When I think about this design, I see that the framed text block in the middle is quite tricky to create. But don’t worry, you’ll understand everything shortly.

In the these illustrations I marked everything with separate colors. Here is the list of colors I used:

• Row (full-width): Light red
• Box: Dark grey
• Border: Dark blue
• Margin: Light green
• Padding: Light pink
• Columns: Light blue

Perhaps there are more sophisticated ways to name my colors, but sorry I’m a man. We only know like 10 or 12 colors, right? 🙂

I left the content elements (Texts in this case) completely untouched, and focused on the layout elements only.

You can see that the whole header (row) includes a box, which has 10 px margin (light green), 10 px padding (light pink) and a thin border (dark blue) on the bottom. The 5 menu elements are added into 5 equally sized columns (light blue).

The text elements have separate font sizes, line heights, and spacings which are not marked on the illustrations to avoid confusion.

You can see similar email header designs all over the web. So I hope from now on you’ll be able to create your own headers even from scratch with an email builder, right?

Let’s jump to the second block, which includes that tricky framed text in the middle. How did we build it with Chamaileon?

Shortly: by adding a box > 3 columns > box with frame and margin into the middle column. But let me break it down to steps:

1. Add a Box into a Row (full-width).
2. Add a nature themed background image to the Box, and choose a similar fallback color – since on Outlooks the background image won’t work.
3. Set the paddings of your box (40 px on the sides and 30 px on top and bottom).
4. Add 3 columns inside the big box with the background image. We add 10 px sized dividers / spacers to the left and right column. These spacer elements will be necessary when the three columns reorder to one column on mobile. They will provide extra spacing on top and bottom of the middle column.
5. Add a box to the middle column.
6. Set margin, border and padding of your box.
7. You can add your text elements in the middle and a divider in this case.
8. The rest is quite easy since you only need to drag and drop two text elements and a box under each other, and style each of them separately.

This was quite complex, wasn’t it?

Definitely.

You have to understand the layout elements of email templates and know that these elements can be embedded – at least in Chamaileon – into each other to create complex layouts.

You don’t have to be an email design genius in fact, since there are tons of free responsive email templates online, which you can repurpose for your needs.

Good news: all these building blocks are available for you to use in Chamaileon for free. You don’t have to recreate any of them from scratch. You can choose a template block and than tailor it to your needs in the layout editor mode.

And if you want to create your very own building blocks, you can do that too.

If you took your time and read this article carefully, you’ll be able to create almost any structure. If not, just send us your design and we’ll help you!

Note: Those who built these responsive email templates are not developers, but regular people like you or me who spent some hours learning and understanding the principles of email layout and structure.

Now they can create stunning email designs in couple of hours even from scratch using Chamaileon’s email builder interface. These 40+ email newsletter design examples can help you to come up with the email design following the best practices. In Chamaileon, we have predesigned email template collection, you can access and modify them here.