Email Design

Three experimental CSS effects to spice up your emails

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

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

  1. Keep it concise. Emails need to have a clear purpose and be easy to read and understand.
  2. Content hierarchy is important. Make all the content flow to an action point.
  3. Stick to tried and tested grid layouts, but this don’t mean the design needs to be boring.
  4. Create a good balance between images and text too much of either can be overwhelming.
  5. 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?

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

Four AI-generated images of a Jaguar E-Type in front of the Eiffel Tower

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:

Four email layouts created by AI

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:

AI-generated image of a beach

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:

Four AI-generated images of beaches

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.

Final, modified version of an AI-generated beach image

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.

Email Design

How to make light work of dark mode

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

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

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

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

Don’t be afraid of the dark

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

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

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

Discover the dark mode landscape

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

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

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

Don’t be vexed by text

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

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

Let’s be (partially) transparent

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

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

Fictitious Travel logo shown in various light and dark mode variations
Here’s how a logo might look in various light and dark mode setups

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

Code for the mode

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


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

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

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


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

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


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

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

Give it a go

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

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

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

Simplicity keeps things… simple

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

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

Final thoughts

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

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

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

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