Adrian Young, Author at The Email Factory

Artificial intelligence

Can ChatGPT-4 code a marketing email?

8 minute read

Adrian Young

We conducted a test back in 2023 (where did the time go?) to see if ChatGPT could generate reliable code for an HTML email. The verdict then: no, it couldn’t. While some of the results were close, they weren’t nearly close enough to use in the real world.

Technology doesn’t stand still for long and things have of course moved on since then. We ran that original experiment on ChatGPT-3.5. Its successor, ChatGPT-4 has since arrived on the scene. The new version’s programming skills are better than ever, and its memory within a conversation has been considerably extended. You know what that means – it’s time to put ChatGPT’s email coding skills to the test once more.

Fair fight

We’ll follow the same steps as the original test. Scientific accuracy is important! Or at least we will start out the same way. Depending on ChatGPT’s output, the test could end up following a completely different path.

Our original test kicked off with an intentionally succinct request:

Code a responsive email template

Due to the nature of our request, the interface has switched to a development-oriented view, with a large code panel taking up most of the screen, and the chat itself shifted to a smaller area on the left. In addition, a pop-up has appeared:

Clearly, ChatGPT is taking its coding assignment seriously. This feels much more like a development session already, rather than simply a chat about development.

Anyway, let’s see what it has given us. Unlike the first stage in the original test, it has generated some table-based code rather than email-unfriendly divs. That’s a positive development. Here’s what it looks like in a browser:

But I can see that it’s not going to work properly. Most notable is the blue button that relies on CSS in the document head. Outlook won’t recognise that, so it’ll collapse. Here’s how it looks in Outlook 2021:

While it does fare well in other email applications, being broken in Outlook is a deal-breaker.

Result:
A more promising start than before, but still unusable.

We could take ChatGPT up on its refactoring offer here, but the code isn’t nearly usable enough to simply iron out a few kinks. We’ll start a fresh chat and be clearer about our requirements from the outset.

So let me tell you what I want

When working with any generative AI, it can be easy to forget that it is not magic. It can’t read our minds. The more detailed the instruction provided by the user, the better the chance of usable output.

With that in mind, we’re going to add a lot more detail to our prompt:

Code a responsive email template, using HTML tables for structure. Set the width to 600 pixels on desktop, with a fluid width on mobile. Include CSS classes to enable stacking of content on mobile devices. Include all known email client fixes that are still relevant. Set the page background to a light grey colour, and the email content area to white.

That matches word-for-word what we asked for at the second stage of the original test. The output however is better. There’s some stacking code for mobile, and a breakpoint of 600 pixels. Here it is in a browser:

As before, I can see that the code is imperfect. But it’s not so bad that I’d skip the testing stage, so I’ll check it out via a real email test again. It renders well pretty much everywhere. iPhone Mail and Gmail apps stack as promised:

Even Outlook looks pretty good:

…at first glance. But let’s be honest, there’s not a lot going on in this template to mess up. There’s no button this time around. Did the AI decide to skip that in order to make its life easier? That’s the most accidentally human thing I’ve seen it do. There are no images or other particularly visual elements beyond some background colours.

About that – the blue area around the heading is greatly inflated in Outlook. That’s not a big deal in this simple template, but in a real email with actual graphic design elements it would mean that things break.

Result:
It’s better than stage 2 of the original test, but still not actually usable.

Working towards a goal

For the third step in the original test, we decided to approach the project from a different angle. Instead of asking for a base template, we instead designed a simple email for ChatGPT to recreate. Here it is:

Before we go ahead with that, it’s worth pointing out that the overall test has already failed at this point. Our initial objective of creating a base email template is not an unreasonable one. It’s a task that might actually be assigned to a human developer. That person would be qualified to know the typical content and structure of a marketing email, without the need for a mockup for guidance.

With that said, let’s continue. While it is now possible to upload images to ChatGPT, that wasn’t so during the original experiment. So we’ll stick to words. Our prompt is a lengthy one:

Code a responsive email template, with the following requirements:
• 600 pixels wide on desktop
• Fluid width on mobile
• A page background colour of #f1f1f1
• Email content area background colour #ffffff
• A hero section with an image, heading, paragraph of text, and a button
• The hero image should be 600 pixels wide, to match the email content area
• Button should be pill-shaped, with a background colour of #a56e53 and white text
• Under the hero section should be two secondary features
• Each of these must also have an image, heading, paragraph and button
• Secondary feature images will be 290px wide on desktop, to match their containing column, and expanding to full width on mobile
• Hero text and button should be a bit larger than those of the secondary features
• These secondary features should take the form of adjacent columns on desktop, each at 290 pixels wide
• Place a 20 pixel gap between them
• The secondary features must stack into a single column on mobile
• All parts of the email should have 20 pixels of padding on each side on mobile, except for the hero image which can be full width and touching the edges of the viewport
• All body text should follow this font stack: HelveticaNeue-Light, Helvetica, Arial, sans-serif
• All body text should be colour #61524b
• All heading text should be colour #a56e53
• Use lorem ipsum placeholders for text
• Enter all hrefs as # placeholders
• Apply links only to buttons. Do not apply links to images
• Include all known, currently-relevant email client fixes
• Include CSS or HTML comments around each section to explain what it is or does
• Set a mobile breakpoint based on a max width of 639 pixels
• To ensure compatibility with Outlook and other email clients, use HTML tables for structure

And once I add some image references, it’s ready for a test run. First thing I notice when checking it in a browser is the lack of padding around text and buttons:

Flaws or not, we’ll proceed to send it as an actual email test. Frankly, it’s not great. There are spacing and sizing problems even on iPhone Mail, the most robust of email clients:

Outlook is a total disaster with the two-column section trying to act full-width, this forcing the email to scroll horizontally.

Result:
A mess. That’s a downgrade from the equivalent step in the original test.

Here, try this

We’re an email marketing agency. That means we already have an email template and coding style of our own. So what we’ll do instead is give that base template to ChatGPT and then try to get it to recreate that mock-up. Is it sophisticated enough to pick up our coding style and apply it to the task?

The local browser result looks alright-ish. That last feature is attempting to escape the email, which is worrying.

It’s upon looking at the code that the situation become even less promising. ChatGPT has taken our template code and effectively said nah. It has pretty much ignored our base template and used its own code. Broken code. Let’s run an email test to discover just how broken.

Here’s Gmail mobile:

It stacks correctly but the alignment and spacing need attention. Unfortunately this is one of the better results. Gmail webmail suffers from the same ‘escaping content’ problem as the local browser preview, and as for Outlook – let’s not even talk about that.

Result:
It’s broken.

Last chance saloon

Only one step remains – providing ChatGPT with some feedback. Perhaps it can indeed refactor the code, with our guidance.

The local browser result of that looks pretty good (let’s just ignore those underlined button links):

It stacks, albeit with similar alignment and spacing troubles to previous efforts. As always, we’ll run it as an actual email test.

Oh.

Result:
We give up.

Getting nowhere fast

ChatGPT can generate code for JavaScript and PHP and various other programming languages. I even use it from time to time to help with scripting languages for different email platforms. So why is an HTML/CSS email development task failing over and over?

It’s because email code is weird. Not just weird but largely undocumented. And it’s undocumented because not everyone is on the same page about what an email actually is. Is it a simple digital letter, perhaps enclosing a picture or two? Because that’s what Microsoft Outlook expects to send and receive. Or is it a rich, CSS-laden piece of visual design? Because that’s what Apple Mail is capable of rendering. There’s a vast gulf between those polar opposites.

Not only is there no rulebook to which to refer, but ChatGPT is working blind. It’s not unusual to send multiple tests in a row when creating a new email template, checking it in the major email clients each time.

Now what?

Now nothing. Maybe some kind of custom implementation or plugin for ChatGPT could yield better email results. Or maybe it’s worth having a bash on a code-specialised AI assistant like Github Copilot.

But for now I’ve seen enough. Until such times as it’s easier to ask the machine than to do it myself, I’ll do it myself.

Email Marketing

Six email horrors… that aren’t so bad

4 minute read

Adrian Young

There’s a lot to like about email. Unrivalled return on investment. Unique capacity for one-to-one personalisation. The little ding sound effect when new mail arrives.

There are a few things to dislike too. Spray & pray marketing. Skewed engagement rates. And of course spammers and spamlike mailing strategies.

It’s easy to discern the good from the bad. Or is it? Let’s explore a few blessings in disguise.

Unsubscribers: a healthy fact of life

New subscriptions and growing mailing lists are lovely. New people, new opportunities. That’s what we want to see.

Today’s enthusiastic new subscriber however might be tomorrow’s disengaged recipient. Maybe they only signed up for the introductory discount. Perhaps they only had a one-off need for your products. Or it could be that their interest was based on passing curiousity rather than a real passion for what your brand represents.

Whatever the reason, the worst thing that can happen next is for inactive subscribers to hang around doing nothing. Your engagement rates will drop. You’ll waste money sending emails to people who don’t care. Your sender reputation could take a knock. Therefore it’s better for you, the marketer, if they leave. Unsubscription is healthier than inactivity.

Truncation: keeps us guided

If your email is too big, it gets chopped in Gmail. It goes without saying that is something to be avoided.

When the HTML document reaches around 100KB, you’ve hit the danger zone. I’ve seen many a struggle to limbo dance under that limit when working with larger mailings. What a needless constraint, right?

Actually, no. The kilobyte cap serves as an important reminder about design and content. We’re designing emails, not mini-websites. There are often extraneous items that can be shed, not as a reluctant sacrifice but as way to produce a better mailing. And don’t send oodles of content to everyone. Segment your audience and stick to focused, targeted content.

Forced dark mode: helps keep our designs clean

Black text, white background is no longer the norm… necessarily. Dark mode has become optional but standard functionality across a range of operating systems, and some websites.

What does it mean for email? It depends where you’re viewing that email. Apple Mail on iPhone and Mac lets you, the developer, take full control. You can and should create a dark mode look and feel that satisfies both the user’s choice of display settings and your branding.

Not all email applications are on the same page however. Gmail and Outlook force a dark mode colour scheme of their own. With images left untouched, this can result in a horrible, partially inverted mess.

Until such times as these applications have modernised CSS support, the only solution is to design around this accidental ugliness. But really that’s not as bad as it sounds. Using real text rather than images-of-text goes a long way to solving the problem and is in the spirit of accessibility. PNG images with transparency make sure that your imagery can blend correctly with any background, where appropriate. And avoiding needlessly complex designs reduces the number of things that can go wrong. Less is more in email.

Limited CSS support: encourages creativity

We mentioned Apple Mail’s capabilities earlier. Its CSS support is unrivalled among major email applications. And therein lies the problem – there’s a lack of standardisation, and in particular the ever-popular Gmail simply does not match up to Apple Mail when it comes to displaying emails.

An email designer therefore needs to know what works where and how a mailing can gracefully degrade on less advanced rendering engines. Seen through the right lens, this patchy support for HTML and CSS isn’t so much a nuisance as it is a creative and technical challenge to overcome. There’s an element of liberation through limitation. And to use an obnoxious cliche, it encourages out-of-the-box thinking.

The promo tab: improves the email experience

Gmail introduced a secondary tab for marketing emails over a decade ago, and other email providers have since followed suit. This auto-sorting of mailings was met with intense trepidation by marketers, who feared that their offers might never been seen. There are still questions to be found here and there on forums by people looking for the secret formula to escape the promo tab.

In reality, the promotions tab has helped to create a cleaner inbox for customers… and without destroying the email marketing industry! It’s easily accessible and the stats demonstrate that most users check it regularly. But perhaps most significant is the behavioural insight proposed by Chad White at Oracle – that those who go rummaging in the promotions tab have an active interest in buying something. That in turn is likely to yield a higher click-to-open rate.

Outlook: it helped create an industry

Microsoft Outlook is the standard and long-standing email application in the business world. And it’s also considered the bane of many an email developer’s life. With an antiquated level of HTML and CSS support, Outlook necessitates all manner of coding trickery in order for HTML emails not to fall apart.

But that’s not an entirely bad thing. In fact, it’s a major factor in why email development is a niche skill worth paying for. Knowing how to cater for Outlook while simultaneously making the most of other email applications – that is at the core of email design and development.

Every cloud

Or at least some clouds have a silver lining. Focus on the positives and let’s make the most of this unique medium.

Artificial intelligence

Photoshop AI image generation – is it any good?

5 minute read

Adrian Young

Generative AI feels simultaneously revolutionary and rudimentary. It’s an incredible, world-changing technology in some respects… but a glitchy, error-riddled prototype in others.

With regards specifically to image generation, there are now several tools on the market. Some are standalone applications and others are additions to existing software. Adobe, no stranger to the forefront of visual technology, is one of the players. Let’s see what Photoshop’s image generation functionality can do.

An impossible photoshoot

Photoshop offers two top-level categories of generative AI image: photo and art. We’ll try the former first.

I have to admit, I could not immediately think of any fauxtographic content that I might want to conjure up for an email in a real-world scenario. My first notion was a tropical beach, for a travel company I suppose… but why would they want to show an imaginary destination? Then I considered something as painfully generic as a person checking their phone. But come on, this is an AI image generator – we can let our imagination run riot.

With that in mind, I settled on something out-of-this-world, literally:

astronaut relaxing on a sun lounger on the surface of the moon

Why would we need that? Who knows. But it’s a good example of something that we could not obtain a real photograph of, no matter how nicely we asked NASA. Photoshop helpfully rattles off three variations whenever you generate an image, letting you pick your favourite, or opting to spin again if none hit the mark. Here are my three leisurely astronauts:

Photoshop has followed the prompt accurately but I can’t say I’m particularly enthused about any of the three pictures. Curiously they all have a second moon in the background. If you look carefully at the night sky in real life, you’ll notice we only have one. But this gives me an idea for enriching the image:

astronaut relaxing on a sun lounger on the surface of the moon, planet Earth visible in the background

These are far more pleasing to the eye. The composition in the first variation is lovely. We have a winner.

Art-ificiality

Photoshop did an excellent job at generating photographic content. Now let’s see how well it performs at the other category: art.

Here’s what it came up with for the same prompt:

Each of these has a somewhat realistic digital airbrushing look. They’re alright, if a bit characterless. But let’s not blame Photoshop for that – we didn’t give it any styling guidance.

We need to be more specific about what we want:

astronaut relaxing on a sun lounger on the surface of the moon, planet Earth visible in the background, vector art, minimalist, green white and black colours

The results:

These are are getting much nicer, particularly the third variation. They still aren’t quite what I had in mind. It’s time to explore the effects options. Adobe provides a large array of pre-defined styling techniques. For our astronaut, I’m going for flat design plus bold outlines (you can apply multiple effects).

And here’s how it’s looking:

It’s still a lot more detailed than I had in mind. It’s hardly minimalist. Perhaps if I found just the right combination of words and experimented more with effects, then it might produce something more like a vector drawing and less like some kind of traced photograph.

Style-conscious

But we’re not going to sit here and experiment endlessly. There are deadlines to meet! Instead we’re going to feed Photoshop a reference image. We have a distinct illustrative style at The Email Factory, so let’s grab an image from our design team:

And we’ll load it in the image generator:

The wording makes it very clear that we are matching the style of the image – not its composition. Here goes nothing:

For each row I tried different phrasing and settings in addition to the source image. On the third row I kept the prompt simple, describing only the scene rather than the styling, selected no effects and did not even specify ‘art’. That final set is the closest match. The lesson here is to keep it simple when working with a reference image.

But are any of these actually usable? Does it emulate our style closely enough to be practical? The answer is no. Bottom middle is the best of the lot, and is a whimsically pleasant illustration in its own right, but it’s nowhere near authentic enough for us to consider using in a commercial sense.

Generative AI as a creative assistant

We’re forgetting a crucial detail – we’re working in the world’s most powerful image editing application. That means that we don’t need to use the AI-generated image straight as it comes. Instead, we can use it as a base to work from. And we could combine multiple generated images. We can do whatever we want.

This is how I see generative AI being actually useful rather than a novelty. Not as a magical do-it-all but as another creative tool in the belt.

Time to answer the question: is Photoshop’s image generation any good? Yes, it is – but so are you.

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?

Email coding

Become an interactive email master

2 minute read

Adrian Young

Open, read, click. That’s all there is to email, right? Wrong!

Thanks to some clever coding techniques, email can become a rich interactive environment. Quizzes, menus, surveys, games – you name it. Your imagination is the limit.

Pushing the boundaries of a medium is of course no small task. But we’ve got you covered. Download our 86-page Complete Guide to Interactive Email, and your brand could be sending world-class interactive mailings before you know it.

Get the guide

Sneak preview

Our guide covers everything you need to know about interactive email. The whats, the hows, the whys. Here’s what to expect:

An in-depth guide to the checkbox hack – the CSS technique that makes interactivity possible.
Downloadable demo files. Experiment with and learn from existing code.
Examples of the coolest interactive content possible.
Our tips for content, accessibility, animation, design and more.

Set your brand apart

Interactive content is experimental. Most brands currently send mailings of a more traditional nature. There’s nothing wrong with that, of course. But there’s a lot right with putting your brand at the forefront of email. Make your customers excited to open your emails and the rewards will speak for themselves.

Get involved

Email is niche, and interactive email is even niche-er! We’d love to hear about your interactive content projects, big or small.

Email coding

Totally random

7 minute read

Adrian Young

Do you like surprises? Your customer might. We all know about the value of personalisation in email, but is there room too for a touch of randomisation?

Randomisation as a feature

First things first. We don’t mean dropping random content into emails like some kind of scattershot A/B test, or A/B/C/D/E/F/G test for that matter. We’re talking about the element of chance as an interactive feature. Think along the lines of spin-the-wheel, where the user is aware that they can trigger a random result. And, crucially, that they want to.

How it works

Randomisation is a form of interactive email. The state of an input element – i.e. a checkbox or radio button – can be used to toggle styling on any number of other elements on the page. That lets you show, hide, move or otherwise change content in your email based on the user’s actions. This technique is known as the checkbox hack.

While JavaScript has built-in functionality to generate a random number, HTML and CSS do not. And email of course is a JavaScript-free environment. But there is still one variable and unpredictable factor – user timing. We don’t know when the reader will hit the button. We can capitalise on that.

First, we place a series of identical-looking triggers. Next, we cycle through them rapidly. We’re talking milliseconds. The result of a click is equally random to developer and customer alike.

Let’s build it

We need some inputs. Radio buttons to be precise. Let’s say we have ten possible random results. Therefore we need ten triggers:



	<input type="radio" name="radio-group" id="radio-1">

	<input type="radio" name="radio-group" id="radio-2">

	<input type="radio" name="radio-group" id="radio-3">

	<input type="radio" name="radio-group" id="radio-4">

	<input type="radio" name="radio-group" id="radio-5">

	<input type="radio" name="radio-group" id="radio-6">

	<input type="radio" name="radio-group" id="radio-7">

	<input type="radio" name="radio-group" id="radio-8">

	<input type="radio" name="radio-group" id="radio-9">

	<input type="radio" name="radio-group" id="radio-10">

The name attribute is the same for all of our radio buttons, thus grouping them. Only one can be active at a time. This is extremely useful functionality for interactive email in general, and will be helpful here for testing.

The id attribute on the other hand is unique to each radio button. We’ll use these to identify which radio button has been pressed.

Secret message

Our triggers need something to, well, trigger. We’ll create ten div-wrapped messages to go along with our ten triggers. They’ll all be hidden at the start.

Even though this is a no-frills, bare-bones example, we’ll stick them in a container. That better resembles the structure of a full-on interactive email.



	<div class="messages">

		    <div class="message message-1">You pressed trigger 1</div>

		    <div class="message message-2">You pressed trigger 2</div>

		    <div class="message message-3">You pressed trigger 3</div>

		    <div class="message message-4">You pressed trigger 4</div>

		    <div class="message message-5">You pressed trigger 5</div>

		    <div class="message message-6">You pressed trigger 6</div>

		    <div class="message message-7">You pressed trigger 7</div>

		    <div class="message message-8">You pressed trigger 8</div>

		    <div class="message message-9">You pressed trigger 9</div>

		    <div class="message message-10">You pressed trigger 10</div>

	</div>

You’ll notice that they each have two class names. We’ll use one of those to to neatly hide all messages by default.



	.message {

		    display: none;

	}

The other class name will act as a unique identifier. We could use an id tag, like we did for the radio buttons, but that can lead to CSS specificity problems for elements that we want to restyle in an interactive email.

Hook them up

Our triggers are in place. Our messages are in place. But they’re not connected yet. We’ll use the following CSS for that:

The general sibling selector. That’s the tilde. It’ll let us refer our inputs to the messages div which sits later in the document on the same level.
The descendant combinator. That’s a space between two target elements. It’ll let us connect to specific messages within their container.



	#radio-1:checked ~ .messages .message-1 {

		    display: block;

	}

	#radio-2:checked ~ .messages .message-2 {

		    display: block;

	}

	#radio-3:checked ~ .messages .message-3 {

		    display: block;

	}

	#radio-4:checked ~ .messages .message-4 {

		    display: block;

	}

	#radio-5:checked ~ .messages .message-5 {

		    display: block;

	}

	#radio-6:checked ~ .messages .message-6 {

		    display: block;

	}

	#radio-7:checked ~ .messages .message-7 {

		    display: block;

	}

	#radio-8:checked ~ .messages .message-8 {

		    display: block;

	}

	#radio-9:checked ~ .messages .message-9 {

		    display: block;

	}

	#radio-10:checked ~ .messages .message-10 {

		    display: block;

	}

Let’s try it. By clicking any radio button, the corresponding message will be displayed.

Label it

We’re going to hide all of our radio buttons – permanently. That’s because there are very limited styling options for input elements and we don’t want our triggers to actually look like radio buttons. It’s better to think of them as the circuitry inside your interactive email, not the buttons that people push.



	input[type=radio] {

		    display: none;

	}

And we’ll now create our labels. Using their for attribute we can tie them to their corresponding radio button:



	<label for="radio-1">Surprise me</label>

	<label for="radio-2">Surprise me</label>

	<label for="radio-3">Surprise me</label>

	<label for="radio-4">Surprise me</label>

	<label for="radio-5">Surprise me</label>

	<label for="radio-6">Surprise me</label>

	<label for="radio-7">Surprise me</label>

	<label for="radio-8">Surprise me</label>

	<label for="radio-9">Surprise me</label>

	<label for="radio-10">Surprise me</label>

They need some styling. How about a garish lime green and black outline?



	label {

		    display: block;

		    width: 400px;

		    text-align: center;

		    padding: 20px 0;

		    box-sizing: border-box;

		    border: solid 2px black;

		    box-sizing: border-box;

		    background-color: lime;

		    cursor: pointer;

	}

That cursor property is handy for desktop users. Upon hover, the pointer icon will appear, indicating that the ‘button’ is pushable.

Start cycling

Our buttons are functional, but they’re just sitting there. In a big tower of buttons.

We need to house them in two divs:

A viewing window with a hidden overflow. It’ll be sized to match the dimensions of a single button, while the other nine are hidden at any time.
A slider that will pull each button into view in turn. And to reiterate: this is a process that will take mere milliseconds.

We can put the HTML code into place first:



	<div class="inputs-window">

		    <div class="inputs-slider">

			        <label for="radio-1">Surprise me<label>

			        <label for="radio-2">Surprise me<label>

			        <label for="radio-3">Surprise me<label>

			        <label for="radio-4">Surprise me<label>

			        <label for="radio-5">Surprise me<label>

			        <label for="radio-6">Surprise me<label>

			        <label for="radio-7">Surprise me<label>

			        <label for="radio-8">Surprise me<label>

			        <label for="radio-9">Surprise me<label>

			        <label for="radio-10">Surprise me<label>

		    <div>

	<div>

And now for the CSS. Let’s start with the window. It’s pretty simple:



	.inputs-window {

		    width: 400px;

		    overflow: hidden;

	}

The width matches that of a button. We don’t need to specify a height, as it’ll automatically match that of its contents.

Next, we need the slider. There’s a lot more to explain here.



	.inputs-slider {

		    width: 1000%;

		    display: grid;

		    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

		    animation-name: cycle-triggers;

		    animation-duration: 0.01s;

		    animation-iteration-count: infinite;

		    animation-timing-function: steps(10);

	}

	@keyframes cycle-triggers {

		    from { margin-left: 0; }

		    to   { margin-left: -1000%; }

	}

The width is 1000% – i.e. ten times the width of the viewing window. That sizes it for our ten buttons.

We’re using a grid layout. Normally unheard of in email due to a general lack of compatibility, but we can use it here. Any email applications that can run the checkbox hack have decent CSS support in general. We’ve set up 10 columns, each sized to one fractional unit and thus taking up a tenth of the slider.

We use a keyframe animation to pull each button into place. An entire animation loop takes just 10 milliseconds, and runs infinitely. We don’t need to code all ten button positions into the animation. Instead we can make use of the steps functionality and set the ‘to’ value to the full 1000% slider width. Nice and succinct.

Hit pause

Uh oh – there’s a problem. It doesn’t work. That’s because a click is comprised of two parts: pressing the mouse button… and releasing it. These both need to take place on the same trigger. But we know that the triggers are cycling at a blistering pace. A human finger is glacially slow by comparison and a click could not possibly be completed on the same trigger.

We therefore need a means of pausing the trigger cycle. Thankfully, there’s a straightforward solution. We can pause the keyframe animation upon hover:



	.inputs-slider:hover {

		    animation-play-state: paused;

	}

This hover state doubles up as ‘on touch’ for touchscreens. Now our triggers are held in place when the user interacts with them, allowing a full click to be completed.

Don’t leave functionality to chance

All emails need to be tested, but particularly those with interactive content. Things can and do go wrong!

In order to test all of our random triggers, we’ll temporarily slooooow our animation speed right down:



animation-duration: 5s;

And we can place an identifying number inside each of our otherwise-identical labels:



			<label for="radio-1">Surprise me 1</label>

			<label for="radio-2">Surprise me 2</label>

			<label for="radio-3">Surprise me 3</label>

			<label for="radio-4">Surprise me 4</label>

			<label for="radio-5">Surprise me 5</label>

			<label for="radio-6">Surprise me 6</label>

			<label for="radio-7">Surprise me 7</label>

			<label for="radio-8">Surprise me 8</label>

			<label for="radio-9">Surprise me 9</label>

			<label for="radio-10">Surprise me 10</label>

That gives you a solid half second to press each trigger in turn as they rotate. Now that you know everything works, you can revert to its previous state, safe in the knowledge that everything works as it should.

Jazz it up

Our example is purely functional. In a real interactive email, you can harness all of the power of CSS animation and create something special.

What’s the point?

Do you remember that amazing marketing email you got from [brand]? Me neither. Most marketing emails, frankly, are nothing special. But yours could be.

Randomisation encourages exploration of your products and services. It’s fun to interact with. Your subscribers might wonder what cool content you’ll be sending next time. And when your email engagement rates go up, there will be nothing random about that.

Email Marketing

Email marketing for today’s digital attention span

3 minute read

Adrian Young

Ten seconds. That’s how much time the average customer dedicates to your marketing email. If you’ve written this:

…then your customer is going to see this:

All that copywriting for nowt! So, how can a marketing email deliver its message when up against such a strict time limit?

Wear the shoes

This is step one: put yourself in your customer’s position. Would you read all that text? What do you want from a marketing email?

If it seems too wordy, it is. Treat email marketing like the shop window. Display enough information to capture someone’s interest, but leave the fine details to the salesperson standing inside.

Format for scanning

Nobody reads paragraphs of marketing spiel from left to right like a book. They scan it. You can help them (and yourself).

We don’t want the important points merely to stand out. They need to jump out and scream for attention. Headings, bold text, bullet points – there are plenty of typograhical formatting options at our disposal.

Remove excess padding

I see a lot of big, bloated marketing emails. They’re crammed full of… stuff. Navigation bars. Extensive footers. Tons of secondary links. Boring recurring blocks. And of course, lots and lots of words.

And that’s a pity, because every extraneous thing makes an email less focused and obfuscates its purpose. It can also be a telltale sign of spray & pray marketing. No idea who likes what? No problem, just send everything to everyone! We’re kidding, don’t do that.

Take a step back to evaluate what exactly you want a particular email to achieve. Be ruthless when trimming the fluff and you’ll be rewarded with a purpose-driven mailing that slots nicely into that ten-second reading time.

Graphic communication

As the adage goes, a picture is worth a thousand words. Turns out that may be a pretty conservative estimate. The human brain can process an image in 13 milliseconds. That’s 60,000 times faster than it processes text. And that’s a very, very good reason to use images as a form of communication in email.

Charts and diagrams offer a digestible, bite-sized form of information that is well-suited to the medium. Animated GIFs let you show your customer something about your product that just wouldn’t have the same impact in words. Quite simply: graphic communication is powerful.

Just don’t get too carried away with images! Your email must be accessible, so your text content, imagery and alt tags need to work together.

Don’t be boring

If your marketing emails follow a rigid format, they’ll become boring fast. Mix up the type of content that you send to customers. Have something to say beyond BUY NOW and ONLY FOR YOU. Give your reader a reason to keep opening your emails.

What’s the rush anyway?

Gosh, we all spend so long crafting our marketing emails only for readers to chew them up in mere seconds? What brought us to this point? There’s a lot of discussion, expert and casual, about the causes and consequences of dwindling attention spans. The impact of our ever-online world on the human brain is a fascinating topic.

But we’re not here to talk about that. We’re here to talk about email. I don’t see the ten-second read time as a bad thing. It can serve as a reminder about best practice and keep us focused on the goal. We can reel ourselves in and stop wasting time on cumbersome, meandering mailings. There are certainly positive aspects to this situation. And who has time these days for negativity?

Email Design

GIF it up for animated emails

4 minute read

Adrian Young

Computer technology moves quickly. Unless you’re a GIF. The ever-popular image format has existed largely unchanged since the late 80s (the late-ies?).

Even the phrase itself has become a household name, with libraries of animated GIFs at your disposal on social media or instant-messaging applications. But you know where else you can find them? In emails.

Establishing the ground rules

GIFs are old tech and so are emails in many ways. For the most part, they work well together without any trickery.

Outlook, in its various desktop application incarnations, is the but. Many versions will only show the first frame of animation as a static image, and one version loops three times before adding a button that lets the user play it again. Why? Because.

Either design the GIF so that the first frame isn’t design-breaking on its own, or maybe even swap out the image altogether on Outlook.

Rubbish use of GIFs

Slideshows. Let’s say you have multiple products, or multiple variations of a product. It makes sense to put them in an email and let the customer see their options.

But what does not make sense is to present them via a slideshow. You’re dictating what the customer sees, and when. If the customer likes the blue version of your product, they’re only going to see it for 25% of the time while your GIF ticks through the blue, green, red and yellow pictures. Nobody is going to stick around and wait. Scrap the GIF in this scenario and lay the images out in the design instead.

Example of a GIF-based slideshow — We made this horrible example ourselves as we don’t want to pick on anyone, or get sued.

Okay use of GIFs

Pseudo-video. We live in the age of instant-access, high-definition video. It’s possible to convert a video – or more likely a portion of a video – to an animated GIF. But bear in mind the following:

It’ll be a far cry from the modern viewer’s high definition expectations.
It’ll look grainy. GIFs are limited to a paltry 256 colours. Your computer can display millions.
It’ll be a silent movie. GIFs are purely an image format, not an audio one.
The file size can get out of hand. Even on fast modern connections, that could result in a short delay before the image appears. And many email platforms set an individual file size limit.
You’ll probably need to butcher it a little. That means reducing image quality through compression, and potentially dropping the frame rate.

Here’s one we made earlier:

We found a stock video to our liking and converted it to an animated GIF. We had to ruthlessly edit and compress the file ’til it was of an email-friendly size. The end result is significantly degraded in vibrancy and quality. The conversion process felt more like vandalism than optimisation.

But it’s not all bad news. A short GIF-icated video snippet can still be used to powerful effect in an email. Hey, maybe your brand even has a grungy lo-fi character. But consider why you want to drop a pseudo-video into your message. Are you communicating something useful that can’t be succinctly conveyed in words? Or is it purely for eye candy? If it’s the latter, it probably won’t have the impact that you hope.

Good use of GIFs

Simple animation. Pizza Express do a lot of things right in email, and in the kitchen I presume. This visually-appealing animated GIF is one of them.

The limited colour palette of a GIF is well-suited to flat design and simple shapes, both in terms of rendering quality and sensible file size. A little bit of animation can help to bring your email to life.

Great use of GIFS

Show your customer something about your product. Yes, I touched on this earlier… but it’s important. People simply do not read reams of copy in a marketing email. You may want to tell them every exciting detail about your product, but they don’t want to read it. So why not show them instead?

If ever a picture was worth a thousand words, it’s this animated GIF demonstrating Warby Parker’s Memory Metal.

That’s a GIF with purpose. Useful, right?

Email Marketing

Brrr! Are cold emails worth the cold shoulder?

3 minute read

Adrian Young

Do you have a business email address? Then you probably receive cold emails. On a daily basis.

Let’s define what a cold email is. To quote from Wikipedia: “a cold email is an unsolicited e-mail that is sent to a receiver without prior contact.” Some people might call that breaking the ice. Others might use a less desirable term: spam.

Dear person, buy my thing

Here are some of the products and services offered to me in cold emails lately:

Thing I don’t need
Thing I don’t need
Thing I don’t need
Thing I don’t need
Thing I don’t need
Thing I don’t need
Golf packages

The last one sticks in my mind because somehow the seller is always down to their last few spots. It’s like a parody of FOMO. Final, final, final, final, FINAL chance!

The recurring theme is irrelevance. My first name is the only aspect of personalisation, and by God will they use it liberally throughout the email. Because seeing your name plucked from a database, mail merge-style really builds rapport, right?

Tone deaf

Wording in cold emails varies wildly. Many are faux-chummy (“Hey, Adrian!”). Some are sycophantic. Sometimes there are jokes, sometimes they’re deadly serious.

But here’s the thing – for me, a very experienced cold email recipient, there is no magic combination of words that will make any difference.

Do they ever work?

The law of averages says yes. Even actual spam emails will get a bite every now and then, making the sender’s efforts worthwhile. But spammers don’t have a reputation to maintain.

For cold emailers, someone out there will just so happen to be looking for promotional mugs at that moment in time, and be willing to consider buying from a brand that popped unexpectedly into their inbox.

Stats say that cold emails hover around an 8.5% response rate. What the stats don’t reveal is how many of those responses say **** off.

Unicorn tattoo

I wouldn’t be arrested if I got a unicorn tattooed on my forehead, but it might be a hindrance in the workplace and adult life in general. Just because something is legal doesn’t necessarily mean that it’s a good idea.

I recently looked up reviews for a particularly persistent cold emailer. On both Google and TrustPilot, the score was rock bottom as a direct result of their cold emailing practices. While they surely hit the target every now and then, there’s a lot of damage being done around it.

Tarred with the same brush

I’ve been pretty harsh on cold emailing and it’s clear as day which side of the fence I sit on. But in the interests of fairness, I should mention that some cold emailers put in the work and follow the rules, while others are far more unscrupulous. Some are legitimate companies and some are scammers, pure and simple.

And therein lies the problem – I am not going to take the time to discern which is which. I am absolutely not ever going to risk pressing an ‘unsubscribe’ link on an unsolicited email. Everyone gets marked as a spammer, and ignored.

Opposing views

Cold emailing has its proponents and detractors. A lot of the advice for effective cold emailing is the same as for email marketing in general. Segment properly. Personalise the content. Run A/B tests.

To those cold emailers that put in the effort and get results, good for you. For real. Being impartial for a moment, cold emailing certainly appears to work to some degree despite its questionable reputation. But for me, personally speaking, the instinctive reaction will always be cold shoulder.

Fake cold email example — I asked ChatGPT to create a parody of a cold email. Replete with corporate cliche and insincerity, this is beautifully close to the real thing.

Email Design

Time for a typefacelift? Ten great Google Fonts

4 minute read

Adrian Young

I like Google Fonts. What’s not to love about a vast, free-to-use, easy-to-implement collection of typefaces?

At the time of writing, there are 1,709 fonts on the platform. Here are ten of the best.

Type: slab serif

All the classiness of a serif font, with the contemporary feel of a sans-serif. Roboto Slab is a versatile font, and an alternative choice to its ever-popular cousin, Roboto.

Type: handwriting

Fonts of this category have always caused an uncomfortable conceptual clash in my mind. The digital mimicry of a human being’s penmanship can feel like typographical pastiche. Reenie Beanie, on the other hand, captures the feel of a person’s scribbled notes in convincingly organic and whimsical fashion.

Type: sans-serif

As is the case with a lot of sans-serif fonts, Raleway brings a modern elegance to a piece of design. But while some typefaces in this category can appear a little cold and clinical, Raleway looks far more inviting.

Type: monospaces sans-serif

Sometimes you just need to GET YOUR MESSAGE ACROSS. Its heavy, all-caps nature is best suited to headings. But that little bit of softening on the letters tells your audience that you’re friendly, really!

Type: serif

Don’t worry – despite the name, it’s not a cheesy Halloween font. Simultaneously traditional and modern, Spectral is an aesthetically-pleasing serif and eminently readable for longer passages.

Type: geometric sans-serif

Sounds futuristic, is futuristic. Exo 2 says high-tech, but without being tacky.

Type: display serif

Just look at that wholesome rounded lettering. You could use it to write ‘DANGER’ if you really wanted… but nobody would believe you.

Type: serif

Looking for something a little more classical? Rosarivo’s elegant ornamentation could be just what you seek. And it’s a pretty alternative choice, with fewer than 80,000 websites currently making use of it.

Type: display

Bungee is unashamedly BOLD. When you want a heading to grab the reader’s attention, you can do a lot worse than this font.

Type: monospace

The uniform spacing of a fixed-width font is ideal for a coding environment – but that certainly isn’t its only valid application. Overpass’s tall characters give it a distinctive, refreshing look.

Using Google Fonts in email

Google Fonts is an extremely convenient platform, whether you want to download a font for self-hosting or offline use, or pull it straight from Google’s servers. But we’re email people. And that means some quirkiness.

Here’s a quick guide to using a Google Font in your mailing.

Step 1:
Find your font

Step 2:
Press the big blue button

Step 3:
Get the embed code

Step 4:
Copy the code

Step 5:
Stick this in your HTML file’s <head>. We like to put it directly under the <title> tag. Important: wrap it in MSO conditional comments to hide it from Outlook, thus fixing that application’s web font fallback glitch.

Step 6:
Apply the font inline where desired, with a suitable font stack of your choosing

Step 7:
Test it! Only some email applications support web fonts, so you’ll want to make sure your fallback looks good. In the case of an outlandish display font, it’s probably best to use an image with an alt tag.

And that’s it – you’re good to go. Now go and grab some fonts and give your emails a typographical facelift.