Email Design

Are your brand guidelines throttling your creativity?

2 minute read

Adrian Young

Colours. Tone of voice. Typographical style. Logo dos and don’ts. A brand’s identity is a complex, multifaceted thing. Brand guidelines play an essential role in keeping this distinct character in check.

Just don’t take them too seriously.

Creative straitjacket

It’s no secret that consistent branding is important. Consistency fosters familiarity. Your customers – and potential customers – come to know and instantly recognise your brand.

It’s easy however to get carried away when putting down the rules in black and white (or whatever your colour scheme may be). Brand guidelines should serve as a helpful design aid, not an iron fist that stifles creativity. The clue is in the name: guidelines. Not laws.

Absurdity in detail

I’m a big fan of documentation in general. And the more detail, the better. Usually.

Some of the finer details in brand guidelines however tend to verge on absurdity. Do people really care or even notice that an apostrophe is curly rather than straight? And while it could be argued that our brains are subconsciously aware of these subtle details, my gut tells me that it’s overkill. Focus that energy on quality content instead.

Content blindness

There are consequences to restrictive brand guidelines. Thinking specifically about email marketing, it’s common to see the same design wheeled out time and time again. And that includes recurring content blocks. Regular readers may start to experience ‘content blindness’ as a result.

We have one particular client that is not afraid to break free and design a little more liberally. They were the inspiration for this article in fact. Each of their email’s ‘hero’ images is unique. The typography is varied. In short: their emails are fun to receive, and the variety keeps people coming back for more. But crucially these designs are still on-brand. There is a balance to be struck.

Flexibility is key

The solution isn’t scant detail or oversimplification in a company’s brand guidelines. After all, a creative free-for-all defeats the purpose.

The key is to build flexibility into the rules. The aim is to keep your publications on-brand while giving your designers and marketers room to breathe. Let your creative minds be creative.

Don’t forget about accessibility

In this day and age, no brand big or small should be overlooking accessibility. But I regularly see examples where brand guidelines are favoured over accessible design. Tiny fonts are your thing? Too bad for people with visual impairment.

Adaptability is part of flexibility, and a company’s design choices need to change with the times.

Shake it up

There’s a handy side effect to having an established brand. When you have an important announcement to make, a one-off change of style tells your readers: this is something special. Used sparingly, this can make for some powerful marketing.

Less dramatically, it’s also worth thinking about a template redesign from time to time. Even the best designs become stale after a while. A new look keeps your marketing fresh and engaging.

Here’s to creativity

We live in the age of AI-generated slop. AI-generated imagery now appears regularly in YouTube videos, LinkedIn posts, and the internet in general. Amazingly, spelling mistakes and surreal glitches that could be fixed in Photoshop are left uncorrected. Lazy content like this does not deserve your attention.

True human creativity on the other hand, is something to be celebrated. Let it flourish within your brand and the results will speak for themselves.

Responsive email: why do brands still get it wrong?

4 minute read

Adrian Young

Responsive design isn’t new. Web designer Ethan Marcotte came up with the phrase in 2010. That’s fifteen years ago. And that’s a long, long time in ‘tech years’.

Today, responsive design is the norm both in web and email development. It is understood that a user may be viewing content on the biggest ultrawide monitor, the narrowest mobile phone, or anything in-between.

Why then do so many emails still look rubbish on mobile?

1. Designed on desktop… for desktop

It’s easy to get carried away when working in a creative application like Photoshop or Illustrator. A designer can go wild with typographical effects and gradients and overlapping visual elements and perhaps some fancy borders to wrap it all up.

But here’s the thing: we’re not dealing with a flyer that will be identically produced thousands of times over. We’re talking about digital content that must mould itself to any viewport. It’s all too common for the mobile layout to be an afterthough, if even a thought at all.

2. Overreliance on images

Eye-catching imagery is undoubtedly an important aspect of graphic design. The trouble with email is that the fancier the design, the more likely an email developer will need to resort to images in order to replicate it. Email applications simply are not as capable or standardised as web browsers.

Perhaps the most common problem is image-based typography. Headings are often incorporated into banners or ‘hero’ images. These sit above a paragraph of actual text. That’s all well and good on desktop, where the relative sizes make sense. But on mobile, that banner – and its copy – are going to shrink. That could happen to such an extent that the heading ends up smaller than the body copy below. There goes the emphasis.

3. Link saturation

Responsive design isn’t all about looks. It’s also about function. The implementation of links is a big part of that. And ultimately it boils down to a few common sense rules:

Linked elements should be easy to identify and operate. Large buttons are perfect.
The user should know what to expect when pressing any linked element. Clearly-stated calls-to-action go a long way.
Secondary links should be used sparingly, and made visually distinct. Outlined ‘ghost’ buttons are a simple way to achieve that.

But often in reality this user-friendly simplicity is eschewed in favour of more stuff. A single feature in an email can end up with multiple links to multiple places. It all becomes uncomfortably crammed together on smaller screen sizes, and it’s more likely than not that the user won’t be able to tell what links to where. It’s a link lottery.

4. Scared of scrolling

Mobiles are best suited to single-column email layouts. Yes, two columns are technically possible. But just look at the shape of a phone – it’s clear at a glance that a single column is the most comfortable design for the device.

Increasingly often however there is a desire to squeeze in multiple columns on mobile. That might work out alright on an iPhone Pro Max, but not everyone is using such a wide handset. Where copy is involved, multiple columns can result in tiny text. That’s bad for accessibility and simply does not look good.

5. Lost in the darkness

Screen size isn’t the only factor in responsive design. There’s also display mode, with its light and dark themes. Dark mode remains a widely overlooked aspect of email design.

It’s worth mentioning that dark mode takes two forms in email:

Forced dark mode. Email applications like Gmail and Outlook will force a dark mode colour scheme of their own.
Explicit dark mode. Applications like Apple Mail, with superior rendering capabilities, allow the developer to take full control of an email’s appearance on dark mode.

If an email is not developed with forced dark mode in mind, it can result in a very ugly, partially inverted mailing.

Ignoring explicit dark mode environments isn’t quite so disastrous. In fact, nothing will happen to the email. But it often means ignoring the user’s preferences by showing them a white-backgrounded or otherwise brightly-coloured email.

What can be done about it?

That’s a whole lot of negativity above, so let’s look at ways to turn it around. To produce great emails for all devices and applications is an achievable goal.

1. Get to know the medium

Best case scenario is a specialist email design team, but not every company has the means for that. Every designer can however spend some time becoming more familiar with email. Have a look at emails on different devices. Browse the massive library on Really Good Emails. Check out some email marketing blogs. The resources are out there.

2. Let text be text

Image-based text is fundamentally flawed both in concept and execution. Text is the logical format for copy, not pictures of text. It can wrap naturally to its container without shrinking to silly tiny lettering on smaller screens.

This doesn’t mean that an email cannot incorporate rich imagery. It absolutely should. Photographs or illustrations can be paired with text to powerful effect. The creative possibilities are endless, while respecting the constraints of the medium.

3. Keep it focused

An marketing email’s job is usually to drive traffic to a website. A customer might spend mere seconds looking at the email. Keep the copy succinct and the links focused on the task. The website, not the email, is the place for in-depth browsing.

4. Give it room to breathe

A single column means more scrolling. But with mobile users spending as many as three hours per day doing that, it’s as instinctive in the digital space as walking is in the real world. Breathe, don’t squeeze.

5. Turn the lights out

It’s clear that many companies are blissfully unaware of how their emails look in dark mode. Don’t be one of those. Viewing emails in dark mode is an essential part of the modern testing process.

Better emails, better results

Roughly 50% of emails are opened on mobile. If a mailing’s appearance there is essentially a butchered version of the desktop design, then it’s a poor user experience. It’s worth going back to the drawing board to produce a truly email-friendly design that looks great everywhere. The results will speak for themselves.

Email Design

Variety is the spice of life

4 minute read

Mel Jewell

It’s very easy to fall into the trap of doing the same things week in, week out when creating emails. This formulaic approach may be useful if you have limited resources to develop your email campaigns and rely on set layouts for speed. However, without enough variety (variety is after all the spice of life) this could lead to your readers just skimming over their emails, feeling like they’ve seen it all before and failing to absorb the content.

“Hey, we’ve got a sale on this week!”
“Here’s some of our best sellers!”
“Hey, it’s another sale!”
“Guess what, we’ve extended the sale!”

Using the same format and style is of course fine to maintain brand identity and make your emails instantly recognisable, but NOT the same content. One obvious mistake to avoid is to keep using the same hero image email after email.

The hero image is the first thing your readers will see, so this is your best opportunity to grab their attention. If you repeat it 4, 5 even 6 times in a row the likelihood is they will nod off.

Spice up your emails

So how can you spice up your emails? My first suggestion is…

Tap into the hectic melee that is “day” celebrations

Yes, a good old fashioned themed email. You’ve got a whole host of National, International and even World Days that cover every day of the year and there simply MUST be at least one that fits in with your brand identity.

You’re a chocolatier? 7th July is “World Chocolate Day”.
You sell animal products? January 14th is “National Dress Up Your Pet Day”.
Swimwear? Why, 5th July is “National Bikini Day”.
I’m a stationer – nobody could possibly celebrate the humble pen and paper? Oh yes, they do…for a whole week every year in the middle of May!

The sillier the better to entice your readers in. 21st June is World Giraffe day? You’re having a giraffe! Here’s how some companies have been making use of these type of days for some one-off, attention grabbing campaigns:

To get started, here are a few useful sites to look up for inspiration:

https://www.un.org/en/observances/list-days-weeks
https://www.awarenessdays.com/
https://www.nationaldaycalendar.com

Next up…

CSS effects

CSS is typically used for prettifying websites but it is available for use in email design, albeit slightly more primitively, and is often overlooked. You can use it for things like fixed positioning, parallax scrolling with perspective attribute, manipulating 3D objects – all of this will enhance your emails and garner that coveted attention.

It has its drawbacks as it is not supported everywhere, but if you have decent fallbacks there is no excuse for not implementing some of these tricks.

And another thing about CSS…

Information as images

Life is changing – people just don’t want to read anything for any length of time anymore. So we really need a way to condense lots of information into something digestible. Here’s where CSS can step in again turning your data into eye-catching charts.

Is there anything else you can do with CSS?

Surveys

It is possible to insert simple surveys into your emails without sending anyone to any external site. By reducing the steps in the user journey you are likely to get both a higher response and email engagement rate. Why not check out Development Project 4 to see it in action. We can provide the ability to capture the responses in a database and then view the results.

And?

Games

Simple games can be included to play inside the email which is a great user experience. Simple doesn’t mean not fun! If they can’t play because it’s not supported, they can be directed to a browser to get the same experience.

If you want to see it for yourself in action, just enter your email below and we’ll send you the Black Friday special we made (don’t worry, we won’t use your email for anything else):

Finally…

Interactivity

To get your users to engage, give them something to actively engage with. As humans, we are pre-programmed to wonder what a button does, consequences be damned. Fortunately, most emails aren’t going to trigger a bomb with the mere click of a link, but you can still offer up a little more spice before directing them to your website.

We’ve come up with 4 useful ideas for interactive things that can be included in your emails across a range of industries, from colour palettes to rotatable products to see every angle. The possibilities with adding interactivity are ever growing and will boost the attractiveness of your emails no end.

Just get in touch if you need help with implementing any of this in your emails. You can also become an interactive master by checking out our complete guide to interactive email.

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 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.

Email Design

It’s just a [colour] theory

3 minute read

Adrian Young

Do you work in marketing? Then there’s a good chance you’ll have seen a colour theory chart like this one:

There are a few variations kicking about, and they can often be found doing the rounds on LinkedIn. These charts all follow much the same pattern: emotions are grouped by colours, and an assortment of brand logos are cherry-picked as examples.

The trouble is that it doesn’t take much scrutiny to spot weaknesses in the logic or think of contradictions. Ferrari with its yellow logo is in the optimism and warmth group, but I doubt anyone would argue against exciting and bold as better descriptors. Even their cars are rosso corsa. Or what about BBC News? It does have a red logo, and yet would seem more at home in the blue sector of emotions.

So, it’s easy to poke holes in this. Does that mean that colour theory (in marketing) is all wrong?

The age of oversimplification

The answer is no. It’s not all wrong. Things are rarely so black and white.

But we’ve inadvertently highlighted the problem. Social media is the land of brevity and bite-sized absolutes. Content candy is addictive, and reality is inconveniently complex. On an algorithm-driven platform like LinkedIn, engagement is valued above education.

Armchair psychology

On the topic of education: professional psychology is a field that demands years of study. I can’t claim to know the precise stats, but I’m willing to bet that ninety-nine point something percent of marketers are not qualified psychologists. Marketing techniques like split testing can certainly yield insight into customer behaviour but I would hesitate before labeling Monday’s A/B test as a psychological study.

Colour psychology is a subject that can fill a 764-page, professor-authored book. Is it possible to condense such an expansive topic into a meme-sized infographic?

Hue are you?

Let’s go back to a design and marketing perspective on this. Colour is certainly an intrinsic element of branding. It’s often a simple way to differentiate competing brands within a particular sector at a glance.

Back in the day, the big three UK mobile networks were Orange, O2 and Vodafone. The orange one, the blue one and the red one. I can’t say I ever thought of them as the friendly one, the dependable one and the passionate one.

The scope of these colours extends beyond the logos. Their websites and marketing in general predominately feature each colour. It’s colour-coded brand recognition.

A visual key change

Brands can capitalise on this colour familiarity. If there’s an important announcement to be made – perhaps a product launch or an off-topic statement – a one-off change of palette can be an effective attention-grabber.

Context is everything

Colour associations vary depending on context. A blue sky is positive, but feeling blue is not. Green can signify safety, but you wouldn’t want to be green around the gills.

Likewise, the colour of a brand’s logo or a piece of advertising is just one factor in the overall mood. An important one, of course, but one that contributes alongside typography and shape and imagery and tone of voice.

True colours

There is certainly an element of truth to these simple colour charts, but design is a broad, complex topic. It deserves better insight than like-farming posts for social media. The real world is far more colourful.

Email coding

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 Design

How to improve your email design – Notes from an email designer

4 minute read

Josh Green

One area of email marketing that is always changing is email design. All our clients often look to improve their email designs. Whether it’s questions about what a certain email platform can do or simply where to start with an email design, the questions about email design can be endless. We have many articles on good email practice and email design on this very blog as well as on our sister site display block. In this blog however I’d like to ask some questions I usually ask myself, or our clients when starting on a new email design project. A collection of these questions might be helpful in your next email design project, and help you create a more engaging and effective email.

What should you consider before starting an email design?

Companies or organisations seldom send one-off emails so it’s important to know if the email sits within a wider marketing campaign. If it is to run alongside in-store promotions or any other type of marketing their might be a wealth of guidelines that the email design might need to stick to in order for it to seamlessly join the rest of the marketing effort. Even in the case of one-off emails it is important to match the branding and voice of the company or organisation sending the email so if at all possible try and collect as many previous communications as you can. Lastly it is important to understand the primary goal of the email. Are you selling products, telling people about an event and so on. The goal needs to be clear to best inform your design choices.

How to organise your content or create a clear content hierarchy

Once you know what the goal of your email is then it is time to start to organise the content for your email. Most emails these days lead with a large hero graphic and there is nothing wrong with this, emails need to be eye-catching. Make sure to try keep the top of your email as clean as possible. Minimise cruft, ask whether the logo needs to take up that much space? Can the view online link be moved or made smaller. Is it possible to drop the navigation bar (emails are not websites)? Once you have the pre-header and logo area decided the rest of the email’s content needs to flow in a way that supports the goal of the email. Common and effective layouts are the standard grid, inverted triangle, bulleted list, and zig-zag.

How do images fit in with the design, does it even need images?

Good design is simple design, and great design is design you probably don’t even notice. Images can be great visual pieces of colour or interest for a design however it’s important to ask if you even need them. Product emails are great and including an image of the product is a usually a great idea but then you might ask is the additional lifestyle image also really needed?

Another common pitfall in email design is just adding everything in. Great emails use a lot of empty space where necessary to really allow the content enough room to draw the eye and focus the attention.

Can you strike a balance between message and design?

Text is a vital part of email and not only helps the email get delivered literally but also by getting the message of the email across to the reader. It is important to strike a good balance between text and images. If an email is too overladen either way the email can quickly be discarded by the reader as either to wordy and boring or just images and vague or confusing. Striking a good balance also allows you the designer to place important email parts like buttons where the reader can see them.

What can you do if there is too much copy?

Concise copy in email is essential. When writing email copy the goal should always be as succinct as possible. Edit it down as much as you can to get the message across as simply as you can. If you imagine you only have a few seconds, probably less than 7, to keep someone’s attention you need to keep the brand’s voice and get the message across. It’s no easy task but with the right amount of editing you can get there.
Remember the goal of any email is to be relevant to the reader, email copy needs to be engaging and entice with clearly actionable conclusions.

How many CTAs can an email have?

Too many CTAs can quickly get confusing and disrupt the focus of the reader. I suggest including one CTA per concept or section. e.g. If there is an email about men’s shoes and women’s shoes, I would include one CTA for men’s shoes and one CTA for the women’s shoes. While each individual shoe might link to its own product page sometimes having a button for absolutely everything can make things too crowded.

To summarise

Keep it concise. Emails need to have a clear purpose and be easy to read and understand.
Content hierarchy is important. Make all the content flow to an action point.
Stick to tried and tested grid layouts, but this don’t mean the design needs to be boring.
Create a good balance between images and text too much of either can be overwhelming.
Make sure the brand identity shines through.

Need more help with your email designs?

Get in touch and we can create you a solution specifically tailored to your requirements. If you’re just looking for a second opinion or would like some analysis on your current designs get in touch and we can help you.

Email Design

Can AI design a marketing email?

4 minute read

Adrian Young

AI is a big deal at the moment. And by “the moment”, that likely means from this point onwards in human existence.

We’ve previously talked about AI’s skills as a copywriter and its influence on email marketing in general. Now it’s time to look at another major branch of AI content generation: imagery.

The journey begins

Midjourney is one of the most advanced and best-known AI image generators in the market. If you’re not familiar, let me explain – it’s a form of digital magic that needs to be seen to be believed.

Picture something in your head. Anything. Now type it into Midjourney’s prompt bar. Within seconds, it will generate four images based on your input. How about:

a Jaguar E-Type parked next to the Eiffel Tower in the rain

Incredible, right? Pictured unmistakably are the vehicle, landmark and weather conditions of my choice. But after the initial wow factor has worn off, it doesn’t take much scrutiny to spot the flaws. In one picture the Jag is making a nuisance of itself in the face of oncoming traffic. In another there’s not one Eiffel Tower, but two. This is a landmark that surely doesn’t need any more replicas!

As a user, there are several options at this point. We can spin again and get four brand new images based on our original prompt. Or we can ask Midjourney to create variations of what it’s already generated. Maybe we’d like to do some manual editing in Photoshop, feed the image back to Midjourney and ask it to work from that. Perhaps we’d prefer to rewrite our prompt and be a little more specific.

But let’s move on. We could play with whimsical pictures of this and that all day, but we’re here to examine Midjourney’s potential visual contribution to email marketing.

An a-eye for design

We’re going to test this from two distinct angles:

Overall email layout
Individual images

I should preface this by saying that Midjourney clearly isn’t intended for the design of websites or emails. It’s a tool with an artistic bent (and one that gives it a distinct character from its rivals). Nonetheless, let’s see what it can do as a source of design inspiration.

We’ll work with purpose. Our goal is to design an email for a make-believe travel company. Its brand colours are a sunny blue and a beachy tan. Those can sit on a traditional white background, with body copy rendered in an eye-pleasingly contrasting dark grey. AI can’t read our minds (yet), so my request is quite specific:

Marketing email for a travel company. Beach imagery. White background. Dark grey text. Use of colours #6084f7 and #c1aa60

And here’s what it came up with:

TO TE MAIAY THI – do you know what language that is? It’s mangled English. And that’s an indicator as to how AI image generators work. The output is a visual echo, based on countless source images that have been fed in. That’s why it’s not uncommon to see distorted intepretations of brand watermarks or artist signatures. As with all AI products, we’re seeing the results of complex algorithms rather than any real intelligence.

But can we make use of these mock-up emails? Of the four images above, option 1 is the most useful. It may have largely disregarded my colour choices, but in terms of layout and volume of content it’s the most plausible as an email. Now we’ll conjure up some imagery to bring it to life.

It’s a kind of image-ic

The big beach image from our layout mock-up is pretty nice:

That picture is of too low resolution to use in its current form but thankfully Midjourney is a flexible tool. I’m going to feed the image back to the platform, along with some instructions:

[beach.jpg] panoramic illustration of a yacht next to a tropical beach with palm trees and rocks --ar 11:4

That ‘ar’ tag at the end is a way to define the aspect ratio of our images. We don’t want the default square shape in this case, so I’ve picked dimensions that suit a long strip-like image.

Here’s the result:

I like option 4. So let’s upscale it to a useable resolution, and I’ll modify the colours a little in Photoshop to make it more on-brand.

We have a layout. We have a main image. Now we can move onto the final step.

Assembly required

Let’s put the AI-generated components into an actual email. If this was a real commercial mailing, we’d have generated many more trial layouts and images, and made a lot more edits along the way. Working with AI tools feels a bit like the infinite monkey theorem. Spin and spin again until we finally get the result we had in mind.

But what we have here is good enough for experimental purposes. Here’s the final product:

Is it a revolutionary design? No. Could the main image be better? Yes. The point isn’t perfection but progress.

Some final thoughts on AI email design

AI content-creation tools are becoming more sophisticated and widespread. It’s not far-fetched to see image generators becoming an everyday tool that lets marketers conjure up fresh, on-brand graphics in seconds.

In answer to the opening question – can AI design a marketing email – my verdict is sort of. It can certainly help. But at the current rate of progress, who knows what it’ll be capable of a year from now.