Email layout: Structure your design right

Effective content use requires proper presentation. Back in 1997, a trend was noted: 79% of people don't carefully read the content in front of them, but rather scan it. They literally scan the lines, picking out the necessary hooks that compel them to read the information they need.

And over 20 years later, this trend hasn't changed. Research has revealed different scanning patterns, leading to the creation of various content layouts, and email is no exception. In this article, we'll look at the main layout options used in professional email templates, provide some tips, and show you how to easily create the necessary layouts in Stripo.

As a bonus, we’ll also cover some nuances that impact email layouts when you work for an audience that reads from right to left (or simply RTL). 

What is email layout?

First of all, let's figure out what email layout actually is. In short, an email layout is an email plan that determines where each piece of content will be placed. It's a sketch that outlines the future email.

Every email you see in your inbox can be tailored to one of these layouts. These are the ones marketers use when thinking about how to present content in emails, ensuring you read exactly what you need to read and click where you need to. Picking a certain email layout ensures that you'll have a balanced and organized presentation for your email’s design and content.

Key components of email layout

The email layout interacts with the email design, and as a result, the layout has its own components, and there are only three of them that you can work with.

Email header

This element is a classic in any email, often featuring useful links, brand logos, and so on. Overall, this element is relatively unaffected by layout changes, as the element itself is fairly simple and doesn't allow for much experimentation with content placement.

Email body

This is the cornerstone of email marketing campaigns and is essentially a playground for layout experiments. Following the header, the layout transitions into multiple blocks arranged however you need. You have an entire block at your disposal, where you can mix and match layout options to suit your needs. All content you add (text, videos, banners, product cards, etc.) can be placed according to popular layout options, which we'll discuss in detail shortly.

Email footer

This is the closing section of the email, where social media links, your addresses, phone numbers, and the obligatory unsubscribe links are located. There's also not much room for creativity here, but you can still try to arrange the content however you like, although the chances are slim that your layout will resemble email layouts that apply to the email body.

Main types of email layout

As we've discussed previously, research into how people scan has identified patterns based on eye movements, and these patterns have given rise to the layouts we all use in email design today. We'll walk you through each of these, so you can clearly see the visual differences between them. We’ll also give you some tips on making each layout RTL-compliant, so you can use them both for those who read from left to right and vice versa.

Alt-text layout

The first and simplest layout type that comes to mind. No images, videos, or other content. Just text and, at most, a CTA button. Strict and concise, but not quite suitable for marketing. Such layouts are often used in personal messages, work correspondence, and simple welcome emails, but sometimes you can even see them from large companies.

(Source: Stripo template)

RTL layout nuances

Adapting this layout to RTL reading is a no-brainer, since you have to deal with texts only (sometimes CTA buttons, but that’s pretty much it). Simply mirror your content to support reading from left to right, and you are good to go. If your email has a CTA button, place it under the text, but right-aligned (leans more towards the right side, while in the default layout it leans to the left).

Single-column email layout

Next comes a fairly popular layout format, the single-column layout. Essentially, all your content is laid out in a single column, with no major accents. It's simply a sequential, readable (or in our case, scannable) presentation of content from top to bottom. It is perfect for many types of emails, be it promotional, welcome, re-engagement emails, or many others.

(Source: Maillbr)

One of the advantages of this layout is that emails of this type work well on mobile devices as responsive email templates because they easily adapt to smaller screens, offering a user-friendly reading experience. Yes, the entire email content becomes a large scroll, but you don't have to think too much about placement or cutting out unnecessary content for the sake of the design of your email campaigns.

RTL layout nuances

This layout type is also easy to make RTL-friendly, as you need to right-align every piece of design you add to your email (headlines, CTA’s, lists, and more).

However, there are a few things you should keep in mind:

• if you use numbered lists, they must start on the right;
• CTA’s that point to various parts of emails or any visual pointers should point left, as it’s a natural direction that is interpreted as “forward” in RTL;
• visual elements like images and icons must appear on the right side of each block.

Two-column email layout

This layout option is similar to the previous one, except now you have two columns at your disposal. You get two sections that allow you to separate your content and cover more topics than a single-column layout.

(Source: Stripo template)

RTL layout nuances

This layout is a bit tricky to adapt, as it depends on the content blocks you want to adapt. For example, classic image-left/text-right blocks (for example, blog digest, product cards), the whole thing must be mirrored, so you’ll have an image on the right and text on the left.

Or if you show a sequence (like Step 1, Step 2, for example), the whole structure must be mirrored horizontally. The other rules stay the same as in previous layout options (right-aligned texts, CTAs, and so on).

Hybrid email layout

This layout option is interesting because your email body design begins with a small, single-column structure, followed by a two-column layout below. This design may sound odd, but it ultimately gives you ample space to fill your content and emphasize the right elements.

For example, the first column could highlight your main offer, while the bottom two could promote related products or those most popular with your audience. These multiple-column email layouts are a great choice if you need to put a lot of content and keep things structured in promotional emails.

(Source: Stripo template)

RTL layout nuances

Adapting a hybrid layout is more about content flow. Even though the rest of the rules are the same, you need to think through the way how recipients will scan your content. 

If you need an RTL approach, you can follow these rules:

• visual navigation and overall hierarchy flows from right to left;
• your main content must be placed on the right, to read it first, while the secondary is placed on the left side;

Inverted pyramid email layout

Inverted pyramid layout is a classic not only for emails, but also for website designs, brochures, and other types of content. This is because it matches the reading flow of many. In emails, this layout begins with compelling text, an image, or a banner, after which the reader's focus gradually narrows to the email's main objective (for example, a CTA button). As a result, we literally have content shaped like an inverted pyramid, where each element plays a role in maintaining attention throughout the entire reading experience.

(Source: Stripo template)

RTL layout nuances

This layout works naturally in the RTL approach, as it’s pretty much the same as a single-column layout. Right-align all the headlines and intro texts. Place the main CTAs on the right. If you have side illustrations, they should be right-weighted, or in simple words, the main visual on the right side of the block.

Zig-zag email layout

A zig-zag layout is another option if you have a lot of content but need to package it in a way that's pleasing to the eye. The idea behind this layout is that it follows the natural eye movement when reading, from left to right and so on down, creating a zig-zag pattern. As a result, the most important information should be placed on a horizontal line, then diagonally leading to the next important block.

(Source: Maillibr)

For example, a news or article digest benefits greatly from this hybrid layout, as it allows you to highlight key elements, display multiple pieces of content while presenting more details to those searching for them.

RTL layout nuances

Zig-zag layout is pretty easy to alter to RTL, as all you need to do is mirror the usual LTR approach. In LTR, you have:

• image left, text right;
• text left, image right;
• image left, text right.

In RTL, this scheme will look like this:

• image right, text left;
• text right, image left; 
• image right, text left.

And you still need to follow the basic rules of RTL, like left-aligned texts, CTAs, and more.

F-pattern

This layout is built on a content hierarchy: the most important information is at the top, followed by less important information at the bottom left, including a call to action at the bottom, and so on down until the content runs out.

(Source: Stripo template)

While this design may look odd, with all the content on the left (and indeed forming a sort of F shape), it also follows a natural reading pattern, allowing you to read one section at a time and immediately move on to the next one below. As you progress through the content, it becomes increasingly thinner until it ends at the desired CTA. This is an excellent option if you need to accommodate a large amount of textual information that needs to be easily scannable.

RTL layout nuances

This one needs the strongest transformation, because the F-pattern is based on English reading behavior.

At its core, the RTL version is the mirrored F-pattern:

• readers scan from top-right to left, not left to right;
• your attention blocks should now sit on the right side first;
• scannable elements (icons, bullets, short headers) anchor the right margin;
• secondary content flows horizontally from right to left.

Signatures and their adaptation to different layouts

Email signatures are an important part of many emails, as they contain important information about you, your business, contact information, and much more. Email signatures are somewhat independent of the overall email layout, but they do interact with and are influenced by the design of the email itself.

We'd like to point out that there are design changes, but they're not dramatic. If you see an email signature in any layout, you'll immediately recognize it. So, we'll briefly describe how signatures might look in different layouts.

Alt-text signatures

Alt-text is the easiest one to handle, as all you need to do is just add your contact information, sprinkle some links, and that’s pretty much it. Since you have a text-only email, there’s not much to figure out in terms of content placement. Everything is left-aligned and easy to place. 

Single-column signatures

One-column layouts are also a no-brainer in terms of signature placement. Since the entire email follows a single-column structure, it naturally ensures that the signature sits at the bottom of the email without any alignment issues.

(Source: Stripo template)

Two-column signatures

In a two-column layout, there’s a risk that the signature might get split or displaced if it isn’t handled carefully. The best decision will be to keep the email signature in its own distinct block at the bottom of the email, ensuring it doesn't interfere with the main two-column content.

(Source: Stripo template)

Hybrid signature

A hybrid layout may seem like an all-over-the-place thing, and it may be hard to add a signature to this design. However, it all depends on what your last block before the signature looks like. In our example, we have a picture-text block, so we’ve decided to make a mirrored signature so we don’t have a stale design pattern. Still, it’s best to keep your signature in a separate block.

(Source: Stripo template)

Inverted pyramid signatures

In an inverted pyramid layout (where the most important content is at the top), the signature is typically at the bottom, so it’s less likely to be affected by the layout itself. However, the context of the email’s content (such as promotional offers, CTAs, or images) might conflict with the signature’s simplicity.

The best way is to make sure that your signature remains clean and simple, placed below the main content. If the layout’s body content is long and heavily designed, the signature needs to stand out by being minimal and uncluttered.

(Source: Stripo template)

Zig-zag signatures

A zig-zag case for an email signature is pretty similar to our hybrid example. Just make your signature mirrored to the block before the signature itself. This way, you'll maintain the overall email pattern and seamlessly integrate your signature so it's naturally scannable, increasing the chances of it being seen.

(Source: Stripo template)

F-pattern signatures

Since the F-pattern relies on strong visual hierarchy, make sure the signature has a clear visual divider (like a horizontal line) so that the reader knows where the content ends and the signature begins.

(Source: Stripo template)

How to create an email layout easily with Stripo

Now you know how each email layout looks, it's time to give you some hints on how you can create professional-looking emails with these layouts without a headache, thanks to Stripo features.

Use the Layouts tab

Since a layout is the basic arrangement of content, basic features come to your aid. When creating an email, you can use the Layouts tab. It contains all possible customized email layouts that you can mix and match. Each element is a separate stripe with a different number of content containers.

And since you can add them anywhere in the template, you can create your own layouts or stick to classic options, simply creating them using basic blocks.

For example, we simply dragged these two layouts over here and now have a base for an email with a hybrid layout.

And here's a two-column email, for example.

Experiment with options and arrangements to achieve the desired result for your email template.

Use general modules

If you're short on time or want to see a rough draft of your email with design elements while sketching out your email, the General modules tab is at your disposal. It features hundreds of modules for every occasion and all the email elements you might need.

Headers, footers, product cards, banners, digests, and much more. All of them were created by our designers to inspire you and help you create your own emails using these modules.

But most importantly, each module, whether a product card or a promotional article, is available in several display options that fit popular email layouts. For example, here's a product card laid out from right to left and left to right, and if you combine these two modules next to each other, you can get a zig-zag pattern.

Or here are two different promo block options (with one or two pieces of content).

Simply drag them onto the template and edit them to your heart's content.

Tweak each structure manually

If you need to customize a specific layout element, we've got you covered. Stripo has a user-friendly email layout editor that's quite easy to use.

Clicking on any structure will open the structure's settings menu, and you'll be interested in this section. It allows you to fine-tune the number of containers and their sizes.

For example, clicking the "+" button will add one container, and you can continue doing this until you reach the desired number of containers.

The trash can button next to each container allows you to delete it.

You can fine-tune the size of each container by clicking the plus or minus sign next to the corresponding container.

If you want all containers in the structure to be the same size, you can click the "=" button, and the containers will adjust their sizes based on the number of containers in the structure.

You can also click on the padlock button to lock the size of the container you need to make sure its size stays the same, even if you change the sizes of other containers.

This way, you can create customized layouts quickly and easily.

Wrapping up

Email layout is the cornerstone of any email design, and its choice determines the final appearance of your email and how recipients perceive it. Choosing the right layout for your marketing emails will not only help you capture attention and direct recipients to the desired email goals but also seamlessly and effectively present the necessary content.