We were recently asked to talk at an Email Marketing Summit by Figaro Digital and our C.O.O. Tony MacPherson presented on “Sweat the small stuff”. A look at all the nuances, the 1 percents that make the difference in email marketing campaigns. The attention to detail that really makes a difference to your bottom line, not a silver bullet but a long term strategic change.
A look under the hood
So, this week with Black Friday in full throw we thought we would give you a sneaky look into what the presenter sees when you go to an event to see a talk on Email Marketing or CRM or any of the wonderful seminars out there. You can download Tony’s presentation here… However, this time we’ve left the presenters notes, the explanation, what Tony was seeing as he presented. This will explain the slides in a way just looking at them doesn’t.
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:
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.
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
“Designing” by numbers
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.
Monthly Click Comparison
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.
Monthly Bounce Comparison
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.
Text needn’t be plain. Modern CSS can apply all manner of visual effects to text. That makes it possible to create some eye‑catching typography without resorting to using images.
Well, all of that is true in web design. Email on the other hand has inconsistent support for CSS from one application to another. But don’t worry – that’s nothing a bit of graceful degradation can’t handle.
1. Letter spacing
CSS property: letter-spacing
Kerning is typographical lingo for the gap between letters. Increasing the kerning is a neat way to bump up the visual impact of a text banner or heading.
Before:
After:
And the good news? It works everywhere.
2. Drop shadow
CSS property: text-shadow
A drop shadow can add a subtle illusion of depth. Unlike letter spacing, this CSS property isn’t so widely supported in email. But it works in Apple Mail on iPhones and Macs, and that alone makes it worthwhile. With no particular fallback considerations, text shadow is a perfectly viable design option.
3. Outline
CSS property: text-stroke / -webkit-text-stroke
An outline can accentuate a heading or call‑to‑action. Just like drop shadows, support is not universal. So consider it a progressive enhancement and don’t rely on it for contrast!
4. Pseudo 3D
CSS property: text-shadow (again, but fancier)
Masterful coders can wield CSS like a paintbrush. Code‑based reproduction of the Mona Lisa, anyone? To create something like this, you only need bucketloads of artistic talent, abstract thinking, coding prowess and mathematical aptitude!.
These works, incredible as they are, are the endeavors of hobbyists. But the point is that CSS can do a lot more than basic styling. You can combine effects with limitless potential for creativity.
For example: you can apply as many text shadows as you like. How about layering a few to create a 3D text effect?
Colour gradients, a once‑beloved staple of web design, can be easily applied to a background in CSS. But with just one extra property, they can also be applied directly to text. Nice.
Beware if using this technique – some email clients will recognise the gradient, but not the clipping mask – thus leaving you with a coloured block and no text. These are essentially experimental techniques in email, so some degree of fallback content may be necessary.
Gradients aren’t the only thing that can be applied as a text background. You can use an image. I guess you could call it a texture.
7. Web fonts
HTML element and CSS properties: <link> / font-family / @font-face
So far we’ve only looked at effects to be applied to existing text. But we’re missing a trick. A major part of typography is of course the choice of fonts.
Once upon a time, web designers were limited to a small pool of web‑safe fonts. Arial, Times New Roman and the like. The advent of web fonts meant that developers could remotely load any font under the sun onto the user’s computer… thus opening up a new world of typographical creativity.
Do web fonts work in email? The answer – as is so often the case with this medium – is sort of. Compatibility is all over the place. This article isn’t a how‑to on web fonts, so let’s note only the most important points regarding support. They work fully in Apple Mail, in an extremely limited form in Gmail, and not at all in Outlook.
Here’s a comparison of web fonts and their more prosaic fallbacks. When they work, they undoubtedly enhance an email. They also make it possible to produce designs that are more on‑brand. But the downside is that the fancier the web font, the bigger the fall! Perhaps one day all major email services will cater for them.
8. Rotation
CSS property: transform: rotate(#deg);
Text doesn’t always have to lie horizontally. A little bit of rotation can make a big visual impact.
9. Text scaling
CSS property: font-size: #vw
Huge text‑based headings can sometimes present a challenge on mobile. Multiple breakpoint‑triggered classes to resize the font can work, but it’s pretty clunky and requires some trial and error. If only there was a way to scale the text smoothly, as if in an image.
Well, there is. One of CSS’s many units of size is viewport width, or vw for short. That lets text scale relative to the screen size. It’s surprisingly well‑supported among mobile email clients.
Here’s an example, placed on a background image because, well, why not?
10. Animation
CSS properties: animation / @keyframes
CSS comes equipped with a couple of options for movement: transitions and keyframe animations. In the right hands, the latter can produce some richly complex animation. The results are far smoother than an animated GIF, and they’re not limited to that format’s paltry 256‑colour palette.
Here’s a very simple example with some skewed text. To see what can really be achieved, I recommend checking out the myriad examples on CodePen.
Note: this is a GIF-based recording of a CSS animation!
Is this really worth doing in email?
Maybe, maybe not. I’ve written in the past about the value of simple design for this somewhat fragile medium. But I’ve also written about all manner of experimental interactive content. Clearly those concepts are at odds.
But I believe there’s a time and place for both ends of the spectrum. There are accessibility and compatibility considerations for sure. Often an image with an alt tag will be the better choice than CSS text effects. But if you’re feeling adventurous and fancy producing an email that looks spectacular on the strongest email clients… then I reckon it’s an adventure worth having.
Links are a cornerstone of the web. After all, the HT in HTML stands for HyperText. And HyperText is a fancy way of saying text with links.
Marketing emails are of course also based on HTML. And marketing emails also largely revolve around links. They’re a fundamental aspect of the medium. Better get them right, then!
Think like a customer
You built your email. So you know where everything is and what everything does. Your customer, on the other hand, is viewing your mailing without this inside knowledge.
Before linking anything that isn’t a call‑to‑action, ask yourself: is the destination obvious? It makes sense to link a product image or your brand logo, as their role is self-explanatory. But links applied to section headings or paragraphs of text or decorative images don’t necessarily have a clear purpose. If in doubt, leave it out.
Stay focused
An email should have a purpose. That purpose should be apparent at a glance. If an email is instead saturated with links, that purpose becomes diluted. Multiple secondary links result in a confusing user experience and muddied mailing reports.
There’s a balance to be struck between options and aimlessness. While an email may be made up of multiple stories and products, each of those items should link to a single place. Focused, fast, and fit for the medium.
Button up
Large, button-styled links are an email design stable… and with good reason. They’re easy to see and easy to press.
A button’s link should always go to the same place as any other part of the feature. And yet it’s surprisingly common to see emails in which the button leads to a different destination than the associated image or heading. Why?
If a secondary link is essential, an outlined ‘ghost button’ is an excellent design choice. A marketing email is rarely a thing to be perused. In this fast-paced environment, effective visual cues can make all the difference.
Now that your buttons are in place, you just need some text to put on them. About that…
Say the right thing
Calls-to-action are often dull and repetitive. Find out more, buy now, or the dreaded click here. Yawn.
While a user is likely skimming over product descriptions or other paragraphs of text, a call‑to‑action is short and prominent enough to be seen in its entirety. The more specific the phrasing, the better. Shop gift cards is instantly more descriptive – and noticeable – than the generic shop now.
There’s also an opportunity to be creative, where appropriate. Really Good Emails are masters at this. Every email has a unique call-to-action that oozes with brand character while being relevant to the topic, such as uncage the beige or give a ship. Cheeky!
Accessibility is a guiding light
Good design and accessibility are intertwined. By following the tenets of accessibility, you are automatically on-course to producing a good email.
The implementation of links is a factor in that. Much of it comes down to common sense. Does it make sense to apply a link to this thing? Is it clear what will happen when I press it? Are there too many links to the same place? Or are there confusingly many links applied to parts of a single feature? Are clickable elements sufficiently spaced apart?
Better links, better emails
The humble link seems like something that is difficult to get wrong. But in reality it deserves as much consideration as any other aspect of email design. Plan it out, and link it through.
Email is a wonderful marketing medium. Its ROI is legendary. One might go so far as to say that it’s the best marketing channel. They might even be right – but there’s a better way to look at it.
A component of a larger machine
What’s the best meal in a restaurant you’ve ever had? Compliments to the chef! Of course, the (head) chef isn’t alone in the kitchen. There’s a sous chef. And a saucier. In fact, there’s a whole team’s worth of culinary talent.
We can keep zooming out. The waiter who delivered exceptional service, the interior designer who cultivated the perfect ambience, the couriers who delivered fresh ingredients, and the farmers who produced them. Remove any part of the equation and it all falls apart.
Email marketing is also a part of a bigger picture. The most effective marketing campaigns are those in which multiple channels actively work together. But even when this hasn’t been consciously planned, it’s still happening to some degree. An email engager wasn’t always a subscriber. They arrived via your website or social media or by some other non-email means. That raises a question.
Who gets credit?
Attribution in marketing can be seen through tunnel-vision. It’s a little too easy to give exclusive credit to the most recent link in the chain. The truth of attribution is that it’s often more fuzzy than focused.
Even when a clear click-to-conversion can be tracked from a particular email, who’s to say that a series of emails hasn’t influenced that decision? Maybe there wasn’t even anything particularly tempting about that latest email, but it happened to serve as a convenient conduit to your website.
We haven’t even left the scope of email and this is already becoming blurry. There are broader factors to consider, such as your social media activity, or web content, or external influences like third party reviews or good old-fashioned word-of-mouth. A complex series of events leads up to every conversion. The marketing report may assign success to Wednesday’s email, but it’s worth taking a step back and considering the full story.
Clicks aren’t everything
It goes without saying that clicks are one of the key indicators of an email’s performance. After all, the goal of a marketing email is usually to drive traffic to a landing page. A click therefore seems like the email’s final goal, before Team Website takes the baton.
By that theory, all clicks could be considered equal in value. Except they aren’t. An enthusiastic clicker might be disappointed by the content they’re met with online. Is that a weak landing page’s fault, or a misleading email? Most likely some hard-to-measure ratio of the two.
Are conversions therefore the best way to measure an email’s success? Maybe, but not the only one. A non-clicking opener has potential latent value, as does a non-purchasing clicker. As humans we often think in absolutes, but reality is rarely so black and white. Sales may be the most direct way to gauge an email’s performance, but its real contribution to your brand runs deeper.
The depth of design
Design is another aspect of email that is easy to oversimplify. An email’s design isn’t just its layout and colours. It’s the whole shebang. Copy, imagery, links – they’re all intertwined.
Even the subject line isn’t as isolated or single-purpose as it may appear. Its influence extends beyond the initial open, and perhaps beyond the scope of that one email. Words are a big part of your brand’s personality.
Design considerations like responsive layouts and dark mode and accessibility should not be treated as standalone concepts. It’s far better to make an accessible design… than to make a design accessible.
Back to reality
It’s easy to preach. In the real world and the hubbub of business, there isn’t always the luxury of stopping to think about the big picture. It might even come across as an excuse. Hey, this email had a terrible click rate… but at least it raised awareness!
Nonetheless, it’s worth pausing from time to time to consider how everything fits together. There’s a causal chain. Nothing is random. No two things are truly distinct. These concepts aren’t only relevant to email or marketing or business, but to every aspect of our existence.
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.
How do you go about building and sustaining your customer base in the crowded world of email marketing?
Answer:
Why not let your customers do some of the work for you?
This is where multichannel marketing comes in to play. You can reach your untapped potential through other channels than email, such as your own website or social media to encourage new signups to your brand.
But is there a missed avenue to gain even more signups? Your best advocates may turn out to be your own users – if you’ve created engaging, exciting content then why wouldn’t they want to shout about it? Make it easy for them.
Here’s how we do it…
Share on social media
Through us you have the option to share the whole email on social media, or to specify a URL instead for shareworthy articles. Built in to our platform are direct links to open new posts for Facebook, Google+, Twitter (X), LinkedIn or you can select “Generic” and build a link to any social media platform of your choosing.
From a coding perspective it is a doddle, it’s just adding a link tag into your template. If you want to share the whole email:
<a href="#" social-network="facebook">Share this email on Facebook</a>
<a href="#" social-network="linkedin">Share this email on LinkedIn</a>
Then a click on this links will simply set up the post ready to send:
Or to set the post copy as a URL instead of the email image:
<a href="#" social-network="facebook" social-url=" https://www.theemailfactory.com/the_biz/how-ethical-are-your-emails/”>Share this email on Facebook</a>
For Twitter…excuse me X…you know the one I mean, you have the option to pre-write the tweet:
<a href="#" social-network="twitter" social-tweet="Check out this article: https://www.theemailfactory.com/the_biz/how-ethical-are-your-emails/”>Tweet this link</a>
Share by email
You might also encourage your users to share directly to their friends and family, people they would likely only target if they knew they already had an interest:
<a href="#" social-network="sendtofriend">Click here</a> to share this email with a friend.
This is slightly more involved as your user will have to fill out a few details, but if you’ve got them excited enough to share, that shouldn’t stop them!
Once they’ve filled out the form, their lucky chosen recipient will receive an email with the message from their friend saying why they are receiving this email with just a sneak preview of what the email is and a link to the full thing:
Then reassurance that they have not been added against their will to any mailing list and that their data privacy remains well and truly intact:
By making it as easy as possible for your users to spread the word and share your content amongst themselves, it’s up to you to give them a reason. This should inspire you to create innovative, eye-catching emails with a great message that might just motivate your users to share, especially if all they have to do is click a link.
Here’s some ideas on adding interactivity to your emails which could be a good place to start! Not only will well designed and captivating emails help sustain your current base and stave off lethargy and loss of engagement, it might also help it grow if word starts getting around.
You can do all sorts of things with the checkbox hack. But not all of them are useful. For the unfamiliar, the checkbox hack is a clever CSS trick that makes it possible to build interactive emails.
All email content must be useful to the customer, and interactive content is no exception. So, forget about those gimmicky drop-down nav menus product carousels. Let’s aim instead for the kind of interactivity that enriches our emails.
1. Rotatable products
It’s common on a retail websites to be able to view products from multiple angles. But in email there’s usually only a single, static product shot. It doesn’t need to be that way.
By assigning animation triggers to left and right arrows on either side of an image, you can let the user rotate a product right there in the email. Drop in a few frames of animation for each of the quarterly rotations and you can achieve an effective illusion of movement.
For our demo, I grabbed a mug from the kitchen. But just imagine this technique used for cars or any other product where every angle matters.
2. Colour selector
On the subject of cars – they tend to come in a variety of colours. So too do clothes, phones, items of furniture, toasters… and so on. You can guess where this is going.
Place some colour swatches next to the product image and let the user browse all colours before committing to a website visit. This isn’t just a cosmetic effect. Whilst swapping out the image, you can also swap the link, thus directing the customer straight to their chosen colour variation on your web page.
3. Multiple choice quiz
But maybe your customer isn’t so sure about what they want. Why not guide them? A multiple-choice quiz is the perfect way to present the customer with a result based on their personal interests… and you don’t even need any prior data. In fact, you can even use it to start building up a customer profile by tracking the links. How good is that?
Our demo uses a topic close to my heart: dogs. There are 18 possible combinations of answers, each leading to a specific breed of dog. This technique could of course be used for any topic under the sun. Perfect holiday destination, perfect perfume, perfect anything-you-like.
4. Randomiser
Oh, about those holiday destinations – sometimes it’s fun just to spin the globe and discover somewhere completely new. Well, you can do that in email too. Engage your customer’s curiosity with randomisation.
Here’s how it works: you can secretly cycle a series of identical-looking buttons. The random factor is time – i.e. when the user clicks the button. Dress that up in some fancy animation and you’ve created an engaging piece of content based on the element of surprise.
We’ve chosen holiday destinations for our demo, but as always you could pick any topic you like. The possibilities are endless.
What else can you think of?
Done right, interactive content can really bring an email to life. With a bit of imagination, the medium of email can be transformed into something incredible. (Just don’t forget that fallback content for non-compatible email apps!)
Are those pesky email applications messing with your design? You didn’t want that address to be automatically linked to Maps, and you certainly never asked for telephone numbers to be underlined! It’s time to squash the bugs.
The battle begins
Overriding a piece of email software’s functionality often isn’t a simple task. The only tools at our disposal are HTML, CSS and a bit of imagination. Email development forums are awash with questions and suggestions on this topic, plus a graveyard of now-defunct solutions. There’s much trial & error, and the successful method usually amounts to some kind of hacky trick.
Here’s an example. Some versions of the Outlook mobile app will recognise and auto-link dates and times to the user’s calendar. This also turns the associated copy blue. One effective solution is to secretly break up the text with an invisible special character called a zero-width non-joiner. Congratulations – you have successfully tricked an application into losing functionality!
Don’t fight functionality
But why would anyone want to do that? The fact that there’s often no easy ‘fix’ for these ‘problems’ says a lot. The problem does not lie within the application’s functionality. It lies within the sender’s design and objectives.
Suppressing a piece of functionality is not in the spirit of accessibility. And to be frank, it’s not the sender’s decision to make. Nobody likes it when a website blocks or forces the opening of links in new tabs. A similar etiquette applies to the world of email.
Design around it
Addresses are another type of content that could be auto-linked and coloured blue. If they’re sitting on a coloured background, that could result in an ugly clash and illegible text. The solution: place them on a white background instead. Cosmetics do not trump usability.
Outlook has helpfully linked that address to the maps application. Should we break that… or change our background colour instead?
Reallocate the effort
I mentioned trial & error earlier. That means editing code, uploading it to an email platform, sending tests, and checking them on real devices and/or previewing services. All of this all takes time. But this is not a task that deserves it.
Imagine what could be created in that time rather than destroyed. Optimum email designs. Improved accessibility. Better content. Don’t squash the ‘bugs’ – give them a better habitat instead.