Email best practice

Gmail truncation – what gets the chop?

3 minute read

Adrian Young

It’s a well-known fact that Gmail truncates emails over a certain size. At least I think it’s well-known. There are still plenty of brands out there sending big bulky emails that exceed the limit. Here’s what happens when they do:

Yes, the missing portion is technically still available. Via a click. But let’s be real – who is going to do that?

Keep it under 100

If your email code exceeds around 100KB, you’ve hit the limit. That means the code content of your HTML file only. Images are a separate entity and not a factor in truncation.

Email code is responsible for:

General template setup and fixes
HTML elements and their attributes
CSS, both inline and in the head of your document
Text content
Code indentation

But in practical terms, we can consider that 100KB to be shared between just two things:

Content
Design

A quick fix

First thing first – you probably don’t want to sacrifice either content or design, and you might not have to. Stripping indentations can make a significant saving in code, and is often sufficient to pull a large email back into safety.

It’s worth pointing out that this technique doesn’t work in all email platforms. Some of them will reformat the code, thus restoring the indentations, and you’re back to square one. Thankfully most don’t do that.

If your email is still over the limit, you might then consider looking for sections of your email that could be coded a little more efficiently. That will shave a few bytes here and there. But frankly, unless your code was terribly bloated in the first place, the savings are going to be negligible. You’re going to have to make a tougher decision.

What matters more?

You have lots of stuff to offer your customer, and you want your customer to see it. And you want it to look pretty too. That’s a problem, because:

lots of content x complex design = too much code

Something has to go. There are a couple of questions to help determine the next step.

Is your design a little too much?

I’ve personally been involved in many a desperate battle to squeeze a marketing email under the limit. And every time I wonder why are we having this fight? Often the problem could be solved by reining in the design to a more medium-appropriate form.

There’s nothing wrong with a good-looking email of course. It certainly doesn’t need to be plain. But there is a point at which the design becomes needlessly elaborate, especially in this medium that requires so many tricks. It’s worth taking a step back and re-examining the design:

Is it fancy for the sake of being fancy?
Are links applied to every square inch? Those add up quickly.
Does it communicate what it needs to?

Are you showing the right content to the right people?

We established already that you have a lot of content that you’d like to promote. Products for every need. Juicy offers aplenty. You name it.

But does every customer need to see all of it? The answer is no. They’re probably not going to peruse your email with the same level of attention with which you created it.

Targeted, relevant content is so much better. That keeps your email focused, without the bloated file size.

A necessary nuisance

Email truncation can feel like a source of frustration. Why would someone interfere with our emails like this!?

But that’s the wrong way to look at it. It provides a benefit to the customer. And really it provides a benefit to us marketers by reminding us about best practice.

So, what gets the chop? Bad practice. And who’d want to keep that?

What’s the point of design and hand coding?

4 minute read

Mike Parry

Designing by numbers

So, we’ve been working with a client who came to us a few years ago wanting to get away from image heavy, WYSIWYG coded emails for their EU region. Meanwhile their US region continued to do things in their traditional manner, not the traditional manner. Things were going okay until they had a crisis of resource and over the last 6 weeks have had to revert to type, and their EU emails have gone back to being the very samey, very US style. The new management team asked us to justify the benefits of going back to proper design and properly hand coded emails with live text and background images, and generally all the cleanliness in the code that comes from not getting a machine to do it.

We gave them the justifications:

Better delivery
More clicks
More consistant rendering
Better user experience
Fewer unsubscribes
More on-brand
Higher revenues

Ultimately, well designed and hand coded emails would give them small long term gains, they would getter better delivery, better engagement, less churn – not a silver bullet on its own but a really, really good long term strategy. Unfortunately, we felt this advice was falling on deaf ears. We knew the argument that to increase profits you either need more sales or less cost and felt the less cost argument was winning over the opportunity cost argument we were making. Fortunately, we have numbers available to us. Could we prove, using the last year’s numbers that the argument we were making was in fact correct?

So we delved into their data

We had our data team go back and look at a comparison between all factors available to us within their Email Service Provider. We then ran some analysis over those numbers. Since MPP, open rates have been a soft metric and there has been a greater take up of MPP in the US. However their EU data performed at 104% of the US number. But interestingly, in the 6 weeks since changing from proper design and coding to the US style, open rates also fell off by around 104%. Within this period there was also a large data cull in the US of people who hadn’t engaged for a long period and this meant there were 2 months of increased open %’s there. Essentially skewing the figures a little because if you look at the numbers before the cull there it a 116% increase for EU over the US.

More interestingly for me are the clicks, unsubs and bounce rates. As a long term strategy the longer you can keep people engaged on your list and clicking, the higher the revenues. So we took a look at those. The EU emails designed by a designer and coded by hand received approx 3 times the number of clicks per email as the US emails, 3 times! That’s a number so significant as to be impossible to ignore.

When we looked into the unsubscribes and bounces we get a similar story, unsubs for both are well under 0.1% which is below industry average with EU being slightly higher but only very marginally and this can be accredited to the fact there was no cull in the EU data and also the US data is less engaged and as such is less likely or able to unsubscribe. If we look at unsubs as a % of opens then EU is significantly lower than the US.

However, what was really interesting were bounce rates, the ISPs were voting with their servers! Bounces for US emails before the cull were at 2.636% and for the EU were 1.223%. The ISPs don’t like image led, code heavy WYSIWYG emails. Interestingly in May where the EU were no longer hand designing and hand coding the email bounces went up from an average of 1.223% to 1.794%. The big drop in US bounces coincided with the cull of the long term unengaged data but over time will gradually start to increase.

So in conclusion

In a game of inches the opportunity cost of taking short cuts has a dramatic bottom line effect. The stats don’t lie, design great engaging emails, code them by hand, send them regularly and clean your data. A recipe for long term email marketing success over a short term cost saving.

Email Design

Three experimental CSS effects to spice up your emails

2 minute read

Adrian Young

Three experimental CSS effects to spice up your emails

CSS is the technology that makes the web pretty. It’s also used in email, albeit in a more primitive and fragmented form. A lack of universal support for the more modern features of CSS means that email developers tend to stick to the basics.

And that’s a pity, because some fancy CSS effects could mean the difference between plain-old-email and something that truly stands out. Let’s break with convention and think outside the (in)box.

Fixed positioning

One of the primary roles of CSS is layout. On a web page, an element can be set to a fixed position. While the rest of the page scrolls, that particular element stays put. That can be handy for components of an interface in a web app, for example.

Fixed positioning doesn’t work properly in email, not even in the otherwise ever-reliable Apple Mail. But luckily the email industry is home to some bright sparks who love to push the boundaries of the medium. Email on Acid’s Halloween email features a clever workaround for fixed positioning, originally conceived by Mark Robbins.

Being able to place an element independent of scrolling opens up a host of creative options. Here’s an example we knocked together based on the same principle:

Parallax scrolling

Those who owned a Nintendo in the 90s will perhaps remember this term. Before home technology had the muscle to render true 3D graphics, programmers used a variety of clever tricks to create an illusion of depth.

One of these techniques was parallax scrolling. The concept is simple. Graphics are placed on separate layers. ‘Distant’ objects move slowly, while ‘nearer’ objects move quickly. It lends the feeling of a third dimension to an otherwise two‑dimensional environment.

That brings us to the the perspective attribute in CSS. A web page, or part of it, can be pulled into a third axis. The result is layering of content that exists in different planes, and thus scroll at their own pace. Hello illusion of depth:

3D objects

Let’s continue the theme of three dimensions. CSS isn’t only capable of layering items. It can rotate them in 3D space. That means, with a bit lot of effort, a developer can sculpt and manipulate 3D objects. Check out some examples in this YouTube video.

These are impressive feats for sure. But so too is constructing a replica of the Eiffel Tower using only matches and glue. Complex 3D in CSS is a labour of love, not something you’ll be knocking together for Tuesday’s marketing email. So let’s think about something that could realistically be implemented in an email. How about a greetings card? That’s two rectangles, pivoting around a fold.

By combining this idea with some interactive triggers (also courtesy of some experimental CSS), a subscriber could manipulate a customised greetings card:

Oh, and that laminated sheen on the cover is achieved by sliding a white gradient across the surface. Lovely!

Are these effects really useable?

Full disclosure: pushing the limits of CSS in email is going to present you with compatibility and accessibility problems. Not insurmountable ones, but ones that will take effort to overcome. You’ll need to think about fallback content and graceful degradation. You might even want to give people the option to specifically opt in or out of such mailings.

We reckon the payoff is worth the effort for visually‑driven, energetic brands. And, hey, not only do you spice up your email – you also play a role in evolving the medium of email.

Email coding

Was Outlook right about email all along?

5 minute read

Adrian Young

Ask any email marketer what their biggest bugbear is, and there’s a strong chance that they will answer Microsoft Outlook. The desktop Windows application is notoriously uncooperative with modern coding standards. It’s a place of archaic development techniques, myriad quirks and unpredictable rendering glitches. That sometimes leads to protracted development times and hair-pulling levels of frustration.

Here’s a comparison of clean web-style code versus Outlook-targeted bloat:

But I don’t think Outlook is entirely to blame. Here’s why.

Outlook is not alone

Modern web browsers, for the most part, agree on how HTML and CSS code should be interpreted. The same cannot be said for email services. The various pieces of desktop software, webmail sites and mobile applications all behave differently. Each email platform, from Gmail to Samsung to Yahoo, has its own strengths and weaknesses. The only significant exception is the ever-reliable Apple Mail. This uneven landscape is the reason for email-coding being a profession of tricks and workarounds.

While Outlook is inarguably the least code-friendly of all major email applications, it’s not alone in its patchy support for modern web-coding standards.

I’m here for the offer

I don’t open a marketing email to see brand fonts or fancy design or flashy GIFs. I open it because I think there’s something of value to me in there. That might be a special offer, or a new product that matches my interests.

And I want to absorb the information in the quickest time possible. A marketing email is rarely a thing to be perused. If I crave visual stimulation, I will look at art. If I’m in the mood for reading, I open a book.

When I open a marketing email, seeking that tempting discount, a plain-looking design or a graphical defect is not going to be a deal-breaker. It’s an irrelevance.

Email is email, the web is the web

I missed an if earlier: if I want to browse the internet, I’ll browse the internet. Email – electronic mail – used to be the digital equivalent of a posted letter. But at some point it became standard practice for marketing emails to resemble mini websites. Navigation bars, complex layouts, rich graphics, fully-blown footers. Even interactive components such as drop-down menus have become fairly commonplace.

To achieve such an email requires layers upon layers of non-standard coding techniques. To a front end web developer who is used to coding efficiently, it’s likely to look like an incomprehensible mess at first glance. I picture it as a ramshackle machine, bodged with duct tape and liable to break down at any moment. And what is all this effort for? To force a medium to do something that it was never intended to do!

Word games

Microsoft made an industry-changing decision when they released Outlook 2007. Emails would be displayed using the Word rendering engine. Yes, that’s Microsoft Word as in the word processor. And, at the time of writing, it has remained this way for all subsequent Windows editions of Outlook.

Not only does this explain the platform’s extremely limited support for modern web code, but it’s also the reason for sporadic rendering glitches. Marketing emails are often fractured by pixel-thin lines appearing as if at random. One common cause of this is content falling on Word’s unseen page breaks behind the scenes.

But is this truly a flaw in Outlook, or a problem created through misuse of the medium?

Things change: part I

From time to time, email vendors update their platforms and significantly change how they interpret HTML and CSS code. Sometimes that means improvements, sometimes it means email-breaking regressions.

Here’s a good example. More than once, I’ve seen the code used to stack content on mobile suddenly stop working. The solution: yet more unorthodox coding techniques.

This is part of the reason why companies (should) regularly check their mailings on as many email services and devices as possible. An email may display perfectly today, but tomorrow could be a different story. Even the most robust HTML email template is ultimately fragile. Keeping things simple is an effective future-proofing technique.

My needs are simple

From a consumer’s perspective, Outlook is perfectly capable of everything I need a marketing email to do. Formatted text allows me to scan over an email and pick out key points such as product name and price. High resolution images show me what a product looks like. Large, clear buttons give me a means to move onto the next step – in a web environment – should I choose to.

But what about pixel-perfect design, drop shadows, cool GIFs, web fonts, animation, and other bells and whistles? I don’t need those. Such non-content is of immeasurably more concern to a marketing department than it is to a customer.

Things change: part II

And now it’s time to unravel everything I wrote above. Technology progresses, trends move on, and I don’t want to be a closed-minded Luddite.

When I claim that Outlook does all I need it to, I’m seeing things through a conventional lens. In actual fact there are several pieces of enhanced functionality that would benefit me as a customer. It would be handy to watch a movie trailer, or to listen to a snippet of an album, or check out a t-shirt in different colours… all without leaving the mailing. Just because email has traditionally been a gateway to a website doesn’t mean it must always be that way.

So, is outlook right?

I’ll pick a side – no. There are definitely lessons to be learned from Outlook’s approach to email, and it reinforces the importance of substance over style. But ultimately its resistance to modern web standards is resistance to progress in general, and holding the medium back. And if Microsoft was truly making a stand about what email should be, why equip Outlook with a diluted level of HTML and CSS capabilities rather than none at all?

Google’s AMP for Email is a determined move to transform email into a rich, fully interactive experience. The technology may not have taken off in dramatic fashion, but adoption rates are slowly growing. In any case, it would be absurd for the world of email to maintain its antiquated coding techniques forever.

There’s also a new version of Outlook on the horizon. Anticipated for late 2026, there are convincing rumours that it will at last support modern development techniques. That changes everything.

When that day comes, we’ll be given the gift of time. Instead of wrestling with rendering problems, let’s focus our efforts instead on customer-focused content and design.

Email Design

How to make light work of dark mode

5 minute read

Adrian Young

Black text, white background. That’s been the go‑to colour scheme on websites and emails for a long time. After all, it emulates the printed typography of a book or newspaper.

But a digital display isn’t a piece of paper. That’s why some bright spark came up with the idea of dark mode – an inversion of the default colour schemes of old. And there’s a point to it beyond ‘because we can’. Light text on a dark background is easier on the eye, especially in a dimly‑lit environment. It’s also easier on battery life. Whereas ink comes with a material cost in physical media, light comes with an energy cost on a screen.

The use of dark mode is entirely optional. You can generally switch from light to dark whenever you like, or set your device to react automatically based on light conditions. Most modern operating systems, lots of applications and some websites cater for dark mode.

We’re not here to talk about any of those. Email is our thing. Let’s take a closer look at how dark mode affects email, how to design for it, and how to code for it.

Don’t be afraid of the dark

There’s an important point to set down from the outset: the objective is to optimise your emails for dark mode, not to override your reader’s settings.

That means we all need to be flexible with our brand guidelines. Whether your customer has a visual requirement for dark colours or simply prefers them, user prerogative trumps everything else.

Google homepage in its light and dark versions — If Google isn’t afraid to invert its brand colours, none of us should be!

Discover the dark mode landscape

Rendering quirks and the tricks to get around them are at the heart of email development. The handling of dark mode maintains these traditions.

Some email services allow full control – you get to set the dark mode colouring. Others ignore your styling and force a dark colour scheme of their own. Some offer partial control, and a few don’t support dark mode at all. The challenge is to design and code an email that looks good on all of them.

It’s important to note that those services which apply their own dark mode colours are not a lost cause. You can and should still optimise your design so that they look as good as possible. Familiarity and consistency ward off unsightly surprises and the wasted time of trial & error.

Don’t be vexed by text

Warning: please excuse the rant‑like nature of this paragraph. It’s frustratingly common in email to see images used to display copy. There has never been a convincing reason to do so. Images‑of‑text instead of actual text is often a way to foist a brand font or elaborate design on users. And one that comes at the expense of accessibility, usability and best practice.

Dark mode is one more reason to use text. Image‑based text can lead to a messy, partially inverted email in dark mode. Real text puts the email developer in the driving seat. Some email services support web fonts, so it’s still possible to show brand fonts to a reasonable percentage of your audience. Other accounts will fall back to standard fonts of your choice.

Let’s be (partially) transparent

Email supports a handful of image formats. JPEGs are common, and best‑suited to photographic content such as product shots. GIFs are also popular, and handy for simple images such as icons, or for short animations.

Somewhat less widely used are PNG images. Which is a pity, because their built‑in transparency support is a dark mode designer’s best friend. Let’s take a logo as an example. Save your logo as a JPEG and it could end up sitting in an unsightly white box against a dark background. Utilise the PNG format instead and it’ll automatically let the background colour shine through. If your logo itself is dark, it could be lost against a darkened background. A white outline or glow effect – invisible on light mode – can counteract that.

Here’s how a logo might look in various light and dark mode setups

It’s worth noting that GIFs also have a transparency capability… but it’s limited. It’s an all‑or‑nothing deal – a single colour can be set as fully transparent. While that can be useful in some situations, it doesn’t allow for the smoothly‑blended curves of a PNG.

Code for the mode

It’s time to get coding. First up, you need to explicity enable dark mode in email. That’s a two‑step process. Add the following HTML <meta> tags in the <head> of your document:

<meta name="color‑scheme" content="light dark"> <meta name="supported‑color‑schemes" content="light dark">

And then create a new <style> sheet, separate from your existing responsive styles. Now add a couple of root selectors to define light and dark mode:

:root { color‑scheme: light dark; supported‑color‑schemes: light dark; }

These colour modes can now be targeted via media queries. Not only does that mean you can set up specific custom colours for dark mode, you can even swap images.

@media (prefers‑color‑scheme: dark) { .email‑background { background‑color: #313336 !important; } .darkmode‑show { display: block !important; width: auto !important; overflow: visible !important; float: none !important; max‑height: inherit !important; max‑width: inherit !important; line‑height: auto !important; margin‑top: 0px !important; visibility: inherit !important; } .darkmode‑hide { display: none !important; } }

There’s an important reminder in that prefers‑color‑scheme syntax! We should always bear in mind that light or dark mode is a user preference.

Give it a go

We could go on about the technicalities of dark mode all day. But let’s now put it to the test.

Below is a simulated email. It’s interactive – try the controls to see how it looks in various states of light and dark mode.

Note: this demo approximately simulates light and dark conditions in email. Specific email services and devices will have their own rendering quirks. This simulation is set to automatically disable the use of swapped images on forced dark mode, so some switches will be tripped automatically.

Simplicity keeps things… simple

The more complex the design, the more work will be involved in making it dark mode‑friendly. That raises a question: is that design essential, or can it be stripped back? I like to find the answer in a second question: does the design help to relay information to the customer, or is it a box‑ticking exercise for the marketing department?

In light of that way of thinking, the best solution is often to simplify the design rather than piling on more and more CSS code.

Final thoughts

Dark mode is a good thing. It’s a piece of functionality in the spirit of accessibility and respects the user’s autonomy.

As with all things development, you don’t need to work from scratch every time. An email template and snippet‑based coding style mean consistent results.

Despite that, surprisingly few companies are actively supporting dark mode in email or even the web. By designing for dark mode, you are helping to lead the way.

Perhaps it isn’t light work, but it’s definitely the right work.

Email coding

Modules vs snippets in email development

3 minute read

Adrian Young

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 Marketing

User experience in email design

4 minute read

Josh Green

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.

Email coding

Cut and waste: is email clipping ruining your mailings?

5 minute read

Adrian Young

Websites are displayed in web browsers. Browsers, for the most part, agree on how things should work. There’s a high degree of standardisation.

Emails are displayed in email clients. They do whatever the hell they want.

As email developers we need to contend with patchy support for modern web technologies and a shifting landscape of rendering quirks. And then there’s the matter of email clipping. That’s a nice way of saying your email could potentially be chopped in half.

The root cause of email clipping

Gmail has a 102 kilobyte limit on email code. Let’s round that to a neat 100KB. We’re not talking about images – they’re a separate entity. The 100KB cap applies to the HTML at the core of your email.

Exceed the limit and your email will be unceremoniously sheared. It doesn’t matter if you’re using a desktop or mobile device, via the Gmail web page or the app. The same rule applies across the board.

I’ve knocked together a purposely code-heavy email to demonstrate this process in all its ugliness. Here’s how my mailing should look:

There’s a significant amount of bloat in this email. That includes things like superfluous code, border effects, device-specific imagery, and a drop-down menu on mobile.

The result is a file weighing in at 120KB. In Gmail it renders up to a certain point and then… stops. This is as far as it gets:

And yes, there is a link to view the email online in its entirety but realistically who is going to press that? I wouldn’t. The damage is already done.

Apart from the obvious consequences of a broken email and wasted content, clipping can also result in the unsubscribe link and terms & conditions going missing. That’s a serious problem.

Let’s find out what we can do about it.

Accept the limit

This is step one. The limit exists and there’s no way to circumvent it.

We also cannot afford to ignore it. Gmail is the world’s second most popular email platform and accounts for a third of the market.

I think it’s important not to think of this restriction as a nuisance. Much better to regard it as a reminder to follow good practice. If your emails are being clipped, that’s your cue to reign in rambling marketing spiel or refine your code or declutter your design.

Respect the limit and your marketing emails may end up all the better for it.

Code efficiently

There’s a single top-level cause of email clipping: the file size is too big. This is caused by one or more of the following factors:

Excessive content
Excessive code
Complex design

Let’s focus on code for now. If an email is being clipped, it doesn’t necessarily mean that its code is bad. It may be error-free and email-friendly in the traditional sense. There’s just too much of it.

We should always strive to find the most efficient way to turn content into code. Some of the most helpful methods I’ve found are as follows:

Padding on table cells is well supported in email and makes for a lighter alternative to spacers.
Nested tables are intrinsic to email-coding, but it’s easy to get carried away. See if you can cut back.
Merge tables where possible. If you can add a row to an existing table rather than creating a new one, do it.
Be prepared to deviate from the design. A simplified email is eminently preferable to a truncated email.
Allow some leeway. If you’re scraping under the limit, remember that image references and tracked links could end up longer than they appear in your local files.
Know your templates. It’s worth reviewing what every piece of code actually does.

If you’re have truncation troubles, it’s not a battle that needs to be fought on a daily basis. Snippet-based development and a template library lets us record and re-use good code. Solve the problem, save the solution.

Show the right products to the right people

I wasn’t kidding when I suggested that Gmail’s code limit is a good thing. Sending huge mailings with lots of products and no personalisation is a haphazard and old-fashioned approach to email marketing. Please buy something, buy anything! A limit on file size discourages that.

Tailored email marketing via strategic segmentation and data-fuelled product recommendations is the way to go. It’s easy to treat personalised content as an afterthought, but personalisation deserves to be at the heart of our marketing programmes. Modern email tools and technologies make that possible.

With a mere 100KB to work with, code is precious. Let’s not waste it on irrelevant content.

Redefine your design

If elaborate design is the root cause of your email clipping woes, then it’s time to go back to the drawing board. As dramatic as it sounds, it can be helpful to re-assess what email actually is.

Consider these questions:

What’s the goal?
What’s the functional value of your design?
Is your mailing truly responsive, or are you splitting content for desktop and mobile?
Are links applied only to logically-appropriate design elements?
Is there any need to send your customers a replica of your website header on a daily basis?

Simplified design means a slimmer file. I’d wager that customers are a lot more interested in product and price than borders and background effects. And if you pit fancy design against an email that actually works, there’s no contest.

Out with the indentations

In the real world, this fix is likely to be the first course of action. It can be extremely effective and takes seconds to implement. But I haven’t listed it first here, as it doesn’t reflect the same spirit of best practice as the other improvements above.

Indentations in code are useful… to humans. A screenful of HTML or CSS becomes a lot more readable when it’s neatly formatted.

But these indentations serve no purpose for a computer, and they account for a surprising chunk of your overall file size. Stripping them is often all that’s needed to save an email from clipping.

The scale of this kilobyte reduction is affected by various factors but it primarily depends on whether your indentations are tab-based or space-based. While tab-based reductions are relatively modest, space-based reductions hover around 20% in my tests. That’s a significant result for such a low-effort fix.

You don’t even need to lose your indentations forever – create a copy of your HTML file for uploading, and keep the original for editing.

Final cut

It’s time to take my Fauxrniture email and rescue it from Gmail’s axe. I don’t want to sacrifice content, so my focus is on improving code and dropping unnecessary extras.

There is huge scope for code refactoring. Several blocks of HTML can be merged, dramatically reducing the overall file size. Plus that makes it even more readable for my human brain.

The application of links to every single paragraph is overkill. The drop-down menu is a gimmick. Alternative imagery for desktop and mobile serves no useful purpose. So we’re saying goodbye to all of those.

The code-based border effects on the main image come with a hefty kilobyte cost, so I’ll incorporate them into the JPEG directly instead.

And finally (although we’ve done enough already at this point) let’s get rid of the indentations for good measure.

The end result is a file that is half the size of the original. That’s so far into the safe zone that we can relax completely. And crucially, nothing of importance has been lost.

The lesson here is that a clip-proof email absolutely does not have to mean a short email. Code efficiently, design for email, and lose the fluff. Now you can concentrate on content creation rather than email truncation.

Email Marketing

What’s the real cost of not outsourcing your Email Marketing

3 minute read

Mike Parry

Why is it more expensive to do something in house?

Just recently our sales team have come across a number of potential small business accounts which have said; We manage email marketing ourselves… It’s become a part of my role and I fit it in when I can… We’re too small to outsource… We use the DIY email builder for our emails… We can’t afford to go for email marketing outsourcing.

The answer to all of these is simple: You can’t afford not to outsource and here’s why:

As a small business you need to leverage every penny of your resource to it’s maximum. If you’re an SME you probably don’t employ a marketing manager, a designer, a coder or a database administrator. This means someone on staff is muddling through, it might even be you.

Whoever it is has a value beyond just their salary.

The Marketing managers role (or your role)

Whilst they are conceiving an idea, writing a brief, writing copy, designing and then trying to build an email they are almost certainly not doing what you are paying them for. The same is true whist they are maintaining an email database and trying to segment your list for more targeted mailings.

And it doesn’t stop there. Once they have managed to do all these things are they then going to test that your email renders as it should in all the major browsers, on all the main smart phones and tablets and finally all the major versions of Apple Mail, Outlook and other office based email clients?

What if they find a rendering issue, which if you’re using a WYSIWYG editor to build and update templates you almost certainly will? How long will be spent trying to fix it before giving in and sending the email despite its issues? Below is an example of a simple 2 image and a few lines of copy email and a bunch of code spaghetti added by a WYSIWYG. Imagine then having to try and edit that!

Email HTML Code Spaghetti — All this code spaghetti added by a WYSIWYG Editor

How much is a poorly rendered email going to impact your ROI from the campaign? What perception will your recipients have of your brand if the email is difficult to read, is missing images or just plain broken? Below is an example of an email built with a WYSIWYG rendering in Outlook 2013 and Apple Mail, as you see the first one is a brand car crash!

Two versions of an email — How Hypnos email rendered is Outlook 2013 and Apple Mail

Are they likely to engage with that email or future emails you send them? What is the cost of losing an engaged user because their experience with your emails is poor.

If you add up the physical cost in terms of time, the opportunity cost of lost sales today and lost customers tomorrow and weigh that against the cost of outsourcing – which could be as little as £250 a month – the question becomes not can I afford to outsource but can I afford not to?

Associated benefits

There are other benefits too. Outsourcing your basic email broadcasting also allows you to outsource the clever stuff, such as triggered emails which have higher open and click through rates.

You are able to automate welcome programmes, birthday messages, anniversary of purchase, the cross sale, order confirmations and dispatch notices.

Getting these and other automations right give your business a more professional look and improves customer confidence because you’re sending the right messages at the right time.

The benefits outweigh any physical cost, with hard earned customers staying and paying for longer whilst helping grow your database and increase profits.

The real cost of email marketing outsourcing is your bottom line. Contact Tony, tony@theemailfactory.com or call 0131 557 7780 today to see how we can help.