The Email Factory

As an email marketer, you probably don’t go back to the drawing board every time you create a mailing. Email layouts are saved as templates, and recurring components are stored as content blocks. There’s more than one way to do that. Let’s compare the email development merits of modules versus code snippets.

Some email development definitions

Modules are recurring template components stored on an email platform.

Code snippets are shorthand phrases defined by a developer that trigger pre-built chunks of code.

Modules and snippets therefore serve the same purpose. But the means to get there is very different. That deserves a closer look.

Module methodology

A module is essentially a standalone HTML file that can be dropped into a larger template. It might be a banner, or a stacking product section, or an intro with a hero image and a button. Whatever you like, it can be moduled.

That module is hosted in a library on your email platform. You can copy, edit and select any module for use in individual mailings. The specifics vary but you’ll generally perform this task via a graphical user interface. There often needs to be some additional programming using your platform’s scripting language.

Next, there’s usually a master template which has modules slotted into preset positions. These can of course be moved around or removed or added to as required.

So, that’s modules. Now for snippets.

Snippet style

The phrase ‘hand-coding’ is sometimes misunderstood. A developer will not sit and type thousands of lines of syntax in their entirety. Modern development environments support all manner of production shortcuts.

Among these shortcuts are code snippets. There’s more to these than simple blocks of code. A developer can set a snippet’s variables and cursor locations, thus producing a piece of code that can be navigated and edited in seconds.

Thinking about email development specifically, one example of a snippet could be a call-to-action button. By typing a pre-determined phrase – let’s say ’embttn’ – the developer triggers the snippet. Within moments, the text, link, colour, size and border can be set.

And the winner is…

I’ve kept the tone neutral(-ish) so far, but now it’s time to pick a side. By just about any reasonable measure, there’s a clear winner: snippets.

Here’s why:

Understanding

A skilled developer will work primarily in a code editor like Sublime or VSCode. Raw code may look daunting compared to the friendly GUI of an email platform, but ultimately that interface only fragments and obscures what is going on behind the scenes. When a new user needs to familiarise themself with the setup, it becomes a puzzle to be pieced together.

Speed

Working with modules means navigating through multiple pages and menus in an email platform. It is never quick. Working with snippets on the other hand is lightning fast. I’ve seen build durations reduced from all-day to an hour as a result of switching to snippet-based coding. There is no comparison.

Cohesion

Snippets mean far fewer sources of content for an email, and a more consistent format. Often an entire template can exist in a single file. Dynamic content written in your email platform’s scripting language can go there too, peacefully co-existing alongside HTML and CSS.

Flexibility

We’ve already covered the flexibility of snippets themselves. But there’s a related benefit – it means the developer can work in their environment of choice, rather than the one presented to them by an email platform. The advantage of a familiar and custom-configured comfort zone cannot be understated.

Final thoughts

To pit modules against snippets is part of a larger battle – drag & drop email builders versus hand-coding.

We are biased, of course. But with good reason. As a company of email developers, we’ve seen the comparative disadvantages of module-based configurations. There are situations in which errors can go unseen months or years. But the fault is buried somewhere in a maze-like setup that potentially no one person understands fully.

Hand-coding, by contrast, is uncluttered and transparent. For me, snippet-based email development is not only the best way to build mailings – it’s the correct way.

Email is a fantastic graphical way of communicating with others. But so often in email design the primary function of an email is forgotten. It may be time for a fresh look at user experience in email.

Sure, some emails are just to pass on information, but nearly every single other email is about selling. It is currently impossible to complete a purchase with just an email but this is no bad thing, it streamlines the email’s function. The email exists solely to drive traffic to a web page.

The email exists solely to drive traffic to a web page.

Email is not website-lite

This key idea is so often lost in email design. Often it is closely tied to reproducing a similar or lesser version of a website instead. I think this is a terrible waste of space, and poor design that doesn’t challenge the ways email should look.

Instead of the ubiquitous ‘view in browser’ link, the logo, and a site navigation bar, why don’t designers just go straight into some products? The Subject line, Pre-subject line, From address and Friendly From address could all be used to establish the brand. The ‘view in browser’ link doesn’t have to be at the top. Lastly the navigation bar is just a poor version usually of what is on the site. Furthermore it nearly always links away from the main campaign … which is the primary purpose of the email!

Emails are ephemeral messages, they focus on what’s happening now. Including links in a navigation bar at the top of an email design just takes the user away from the sale that is happening now. This is a bad user experience. It’s equally bad for the sender because the click has been wasted. The purpose of the email was to get the user to go to the sale section and now they have clicked something else in the navigation bar.

Link with purpose

Emails also need to consider where they are driving traffic to. If it is easy for people to complete a purchase from nearly any page, that’s great. However if the email can misdirect users to contact pages or other areas of the site before the reader has even seen the primary content of the email, that’s not great. There would be an argument to say the content is incorrectly ordered.

Large full-width images are also a component that can affect the overall user experience of an email. First, it must be said stated that they are necessary and often provide some much needed beauty and spectacle to a design. However, they can be tiresome to scroll through and take up a lot of space for a single link. Consider their use carefully.

Text links form the backbone of the internet and were the first types of link on the internet. In email design, however, designers don’t always stick to the rules and sometimes only use bold links or just colour them differently. Always apply underlines to text links. Format them with sufficient font size and line height so that they can be clicked easily. Unfortunately, it is not uncommon to find many text links all squished into a paragraph of small text. This makes it very hard on some smaller screens to click the link you intended.

The primary message must be the focus in order to provide a good user experience in email design. Links that might scatter users all over the website should be kept to a minimum and collected at the bottom of the email. Analysis of email heat-maps always show the vast majority of clicks happen toward the top of an email. They gradually decrease as you move further down the email. With this in mind, email designers should focus on making the primary message content of the email as close to the top as possible. Migrate all other types of content towards the bottom.

The courage to break convention

This could mean a layout that reverses the content order completely would be a better email design. Start with the products you want to focus on, then any other content and finally add the branding and any footer content necessary. This would be designing in a manner that takes into account where the most clicks happen and relying on people to know who sent them the email. This is a step designers have so far been too scared to take.

To this date I have not encountered a brand that has been brave enough with their email design to use such a forward thinking approach. There are some examples, though, where brands do drop superfluous components such as navigation bars, however I have never seen one brand completely flip the email design.

Design for clarity, not confusion

Individual components in email design often provide terrible user experience. For example, an email might be trying to sell a high cost item. Instead of solely linking to that product, the email links to all sorts of other things relating to that product. For example, the product might be a new car. Rather than taking the clicker to the new car page it links to the car accessories page. It can be argued that at least the user is on the website, but the point of the email was to sell the car. The goal wasn’t to sell windscreen wipers for their existing car. Polluting the layout with complementary links to add-ons or related products only decreases the traffic to the main intended link.

To have the best user experience in email design, the email’s components need to be concise and link to a single location. Prioritise content order and remove superfluous components. Subject lines and From addresses should factor into the email design. Place recurring content at the bottom of the email.

When you need help, not another agency

Tag: email development

Modules vs snippets in email development