Email construction

This page outlines some best practices for laying out emails using the modular system.

Hierarchy

Adhering to the following design principles will make emails more organized and easier to read. Content that's simpler and easier to understand can increase user engagement.
 

Prioritization

The key message should always be the first thing the user sees when they open the email. There should be a correlation between the subject line and the A-Spot. The biggest, most important products or promotions should appear directly below the A-Spot, followed by secondary or tertiary information like upcoming promos, Triangle NPPs and suggested items.

As a rule of thumb, organize emails in order of largest, least dense information to smallest, most dense information. Eg. A-Spot, B-Spots, Product Tiles, C-Spot, Reco Feed.
 

Grouping

Modules that look alike should be grouped together, which will simplify the appearance of your emails. Don't interrupt a grid of Product or Category Tiles with a different type of module. Use the Standalone Copy Block and/or Button modules to frame sections and separate them from what comes above and below them. Breaking your layout into clearly-defined sections will greatly improve the reading experience.
 

Variation and the element of surprise

The variety of modules allows you to present information in different ways, keeping emails from becoming monotonous. After prioritizing information and organizing it in clear groups, varying the presentation of those groups will keep the layout fresh and the viewer engaged.
 

Feature Spots are designed specifically to interrupt the expected flow of the information. They go against the rule-of-thumb, mentioned above, that modules should go from biggest and simplest to smallest and most dense. That's exactly why they can be effective: they surprise the reader.

It's important to note that, to create variation or surprise, you first need to establish a rhythm by grouping similar modules. It's possible to go too far, creating too much variation in your layout: if your B-Spots are broken up by C-Spots and your Product Tiles are broken up by NPPs, inserting a Feature Spot won't create any surprise it will just add to the clutter.

Module relationships

Considering how one module flows into the next can keep users reading and will make layouts more polished.

Z-patterns

A back-and-forth arrangement of image-copy orientation, known as a z-pattern, is a layout based on people's natural eye movements. It can boost engagement with emails, keeping users scrolling down the page and it keeps layouts interesting, too. Use it with B-Spots and C-Spots.

Alignment

While we've designed our modules to be mixed-and-matched, there are some combinations that work better than others. When laying out a module, always consider its relationship with the modules directly above and below it.

Here are some examples of alignment problems and how to fix them. Note that, in these examples, the issues have been resolved simply by switching the template in use. No custom modifications have been made.
 

Colour

As we discuss in the Grouping section of this page, colour can be used to group things, but it can also be used to keep modules separated. Use optional background colours to create relationships or distinctions between adjacent modules, helping readers understand what's all part of the same message and what's different.