Design trends and best practices for perfectly crafted emails

Expert Diaries from Zoho Campaigns

Expert Diaries from Zoho Campaigns connects avid email marketers to the experts in their space to learn best practices and tips. Our aim is to connect email geeks and form a community that learns email marketing from one another.

Expert Diaries from Zoho Campaigns
A few tips and best practices that will help us to send out perfectly designed email campaigns to our subscribers.

In our recent session, we had Paul Airy with us. He has been an expert in the field of email design with around 10 years of experience. He is well-known for his ingenious ideas on the subject. A chunk of his forte is occupied by HTML typography. His spheres of interest vary from email development, accessibility, and UI/UX design to web design, ecommerce, and creative strategy. He has also penned a renowned book, A Type of Email: A handbook for working with HTML typography in email. For his immense contribution towards the world of email, Paul was also nominated for “Disability-Smart Influencer” at the 2019 Business Disability Awards.

In this session, Paul walks us through a few of the tips and best practices that we can try in order to send out perfect email campaigns to our subscribers.

 

Video Transcript:

What is the importance of email design in the current scenario?

Well, email design is really important. A lot is considered and decided on the email design stage. Email designs are made to impact the development, the deliverability, and, ultimately, the recipient experience, which then impacts the effectiveness of an email. So, the design stage is significant, and the approach that I’ve always taken is really thinking about the person who’s going to receive the email.

There’s a lot of discussion about the importance of diversity and thinking about people as people. But that’s always really been how I’ve approached email design. From that point of view, I imagine how somebody has taken their time and invited me as a “brand” to their inbox. They’ve given me that privilege—their email address—and trusted me with something of themselves, so for me it’s a responsibility to actually give them something in return that is valuable for them. This is why I am so passionate and why design is important to me. Because, as an email designer or an email developer, I owe it to them to give them the experience that they deserve, that they’ve opted in to.

Thus, that one-to-one connection has always been my project. And I guess that’s driven me to taking such roles where it’s always asking a question. Rather, I am always asking the question of what more can I do, how much more can they experience, and what are the things that aren’t thought yet when it comes to the initial design process. And it’s more than just a visual thing, it’s more than just deciding where text and an image are going to sit on a screen. It is actually about how experience matters. I would like to phrase it as “You don’t design an email, you design email experience,” because it’s a separate tangible thing, especially in the age of mobile technology. Earlier, emails were seen on a desktop machine and it was static. But now people are moving around all the time, and even in the lockdown, they’re still going on and about with their phones. So, it’s important to deliver that experience to them in a very considerate way. It’s a significant stage that would not be rushed or not be done in a half-hearted way.

What are the most exciting designs that you get to see in your inbox?

Well, we mentioned about one-to-one experience, and I think the emails that comes to my inbox are the ones that I do have a connection to, that make me feel interested. There are a couple of things—two or three actually—that I can talk about in that vein. There’s one that I receive from the RSPB which is the Royal Society for the Protection of Birds. And there’s one from a conference that I recently attended, Inbox Expo. It’s been talked about at a conference, and it prompted me to sign up to their emails.

Well, coincidentally, I’ve been spending a lot of time in lockdown taking work to my local woods where I have enjoyed a lot of bird life, catching glimpses of them on trees. The emails from them tell me about these species that I am seeing in the woods, so this is something that I am receiving as a direct connection with my life. With these emails, apart from the level of accessibility implemented into them, HTML typography is the main thing, and I learn about the things that I am seeing around me. So I look forward to the next one that comes along, when I can learn a bit more. It adds to the experience that when I go again, I am looking out for something that I learned about in that email. So, it’s not just an email for email’s sake—it’s actually adding value to my digital experience when I am out and seeing things. So, that’s the RSBP emails, which are really good, and I recommend people to subscribe to.

Then there are couple of other ones that are data-driven. There’s one that I get from Grammarly. Grammarly checks my spelling, grammar, etc. I get an email from them every month. It tells me how well I am doing. It helps me understand where I have to make improvements, which sometimes could be quite a lot. All this information is presented graphically, so this email is very illustrative and shows me graphs of how things increased or decreased as well as all the numbers. It’s very visual. It tells me how many unique words I’ve used in a given time and about many different aspects of the writing. And also how I’ve compared with other customers of Grammarly as well. So, I can see how fair I am against the worldwide users of Grammarly. Again, it’s data-driven.

The other one that I can call out is from my energy supplier, Bulb. They send out an email every six months or maybe three months. They tell me how I used my energy. It’s a green energy company, so they tell me how many trees I’ve saved because of my energy usage and things related to how I’ve used my energy and how much it has impacted the planet. It is interesting because you don’t think about your energy, you just kind of use it. It makes you think about how you can use your energy better. Again, it’s very graphical, so the illustrations are all good. There’s a bit of animated gifs as well. They’re really good, personal emails. There are other emails as well, used for interactivity. I think when it comes down to it, it’s about how relevant the email is to you and your life.

How do you approach email design and the design of each element within an email?

The first thing to think about is the objective of the email and what the actual message is and if there’s a call to action. Sometimes there isn’t a call to action—sometimes it’s purely informational, where you don’t expect a reply. Well, it’s essential to consider those so that you can ensure the elements going in the email are fully considered and thought through. I actually start looking at the elements of an email right from the subject line.

The subject line is the entry point of the email and it’s significant. This is why there’s numerous testing on the subject line so that the email gets opened in the first place. It is the entry point, the star of the email message. And everything else should flow on from there. The subject line is mostly connected to what the content is. I think about email as a journey. So, the subject line is the starting point of that. Then you’ve got the preheader that follows on from the subject line.

Just think about the conversation that you’re saying to the recipient and do you have a design for a person? So, how are these connected? In one sense, you have a subject line, which is one thing, and then you got a preheader, which is another thing, and then content, which is another thing. You need to join them together so that they’re all connected. So, you got the subject line and the preheader, and it’s a perfect opportunity for a marketer to actually add value to a subject line so that it might say something that prompts a response and invitation into the email.

The pre-header will then further add value to the subject line to invite the recipient in, and then you’re into the content of the email. So, you’ve opened up the email and then you’re seeing a headline (if you’ve got headlines—some emails do not have them). But, you go through the sequence. Then you might have a hero image, after which you got your subheadings and content and paragraphs and all the contextual elements and your call to action. These are connected. The CTA has a direct relationship with the subject line, because the subject line is inviting you to do a thing and the CTA is inviting you to do that thing, whatever it is. This is why I said it’s important to consider the objective of the message, because that helps you to decide whether they’re related to each other or whether they’re being treated as individual things.

A typical example of a CTA might be “Find out more.” But, actually it is it better to consider what you actually want to do with the message itself and going back to the subject line. From a content point of view, that’s how I would encourage people to go through the journey.

The visual part of it is about effectively making the same considerations and presenting them visually. So, now you’re using your text, you are using heading, you’ve got hierarchy in the design. You got headings distinctly larger than the main body of the text, you got a headline that is bigger than that, and you’ve got space around. I think space is essential, especially given the number of devices that people use and how space can change. Thinking about how space can change from one device to another as well gets you more experience to think about how that works when you’re looking at multiple devices. And then you have the CTA that gets you to the end of the process.

So, it’s like a journey. That’s how I approach it, and it’s a good test to see if our journey is in some way being halted because of the design or text. Alternatively, is there a free-flowing way through the email? Is it too cluttered, or is it clear enough for the recipient to understand what you want them to do? As long as your message and what you want to convey is clear, all the elements would serve the purpose.

What do you think is the best font that one should go with in terms of writing an email?

We’re seeing an increasing use of web fonts like Ariel, especially for the last few years, because they really help your email to stand out in the inbox.

So, web safe fonts are fine, but if you want your brand to really stand out, you can use different types of webfonts as well. You got free ones like Google fonts, or you can use a licensed font that gives you a bit more exclusivitely and is less likely to be used by any other brands. Some brands even have webfonts commissioned that are unique. The BBC has their own fonts that they actually design themselves with some consultants. There’s an electrics brand, you can find it online, they’ve built their own webfont design for them as well. There are others. I suppose in terms of what I said earlier, when you see that font on a brand, it helps. There’s an immediate connection. It’s almost like you don’t even need to see a logo on the email because you know it’s from them because of the typography.

From the deliverability point of view, I think, it’s important to use HTML typography. And, do not use embed text and images if at all possible. Use HTML text for text and HTML images for illustrations and photographs.

Where would you suggest to keep the CTA in an email campaign? Would it be the upper fold or the lower fold?

I think this is where the A/B test comes in. The fold comes from the days of print, newspapers mainly. It totally makes sense since the fold is where the paper is folded and the content should be above or below the fold.

The fold on digital media and email can appear anywhere. A device may show that button and it may not. If somebody is looking at the email in a phone in a landscape mode, that button might not even appear there—it differs according. So, you cannot say “this” is the best to be in “this” position.

I think it’s more about testing and trying different positions on where the button could be placed. There are also legal financial services as well, situations where it’s actually illegal to have a button higher up. Because you have to dig all information about financial products first before you enable someone to discover more about the products/purchases. So, there are legal offences in some cases where you will have to keep the CTA lower. You will have to test and see and put the CTA in different places.

Another thing to try on is actually links vs. buttons. Links often give less visibility compared to buttons. If you’re putting your CTA in a text link, you might find that there are differences in response purely because it’s visually stronger and easy as well. So, it’s a convoluted question, but really testing is the way to discover.

How many links do you think should one include in an email campaign?

I tend to use links very sparingly. It comes back to the question about the objective. It’s about the appropriateness of those links. So, ask yourself is adding a link into an email adding value to the journey/message, or is it going to pull somebody away from what you actually want them to do? It’s more about that rather than the safety—it’s really about is it going to take somebody away.

You can analyze because when you look at the metrics after an email is sent out, you can see what people have selected. You get to see if those links are disengaging or not. But, yes, I would use them sparingly. I would tend to go for just one button as CTA. Links would be more about third information, related subjects, but not necessarily to the main focus of the email that’s being looked up.

Even with CTAs, you have to be carefull. In an ideal way, one message should have one CTA. Because it’s clear that you have invited someone to an email and you want them to do one thing, and email is likely to get a response if there’s no confusion. The recipient is not being presented with lots of different options to decide which one to do. If you are using more than one CTA—sometimes for good reasons—use a secondary CTA that’s different from the first button. You might have a solid color for the first one and then the second one should not be the same. The emphasis should be visually on the stronger one. So, that’s one approach to take. It helps you visually, anyway, to see what’s been asked of you as a recipient.

What are the common email design pitfalls and how do you think these can be avoided?

In terms of the experience of the recipient, a good way of looking is about devices. Emails often get designed for one type of device, and this is one of the common pitfalls. I see fairly often designs visualized like a pdf or something like that which shows just one view of an email where there’s a lot more variety of how people are going to see that email. Almost like a four-dimensional view of how that email is going to be presented, thinking about how it’s going to look on multiple devices simultaneously. This will really help to strike that balance.

Just take one example, the headline of an email—it might be the headline that could be visualized for one device. Let’s say desktop for an argument’s sake. It may be very big on the desktop view, but when it comes to the mobile screen, if it’s not developed right when coming to the development stage, the heading might fill the screen in mobile device and it doesn’t look right. So, it’s thinking about how the email is going to be received in that sense. Is it going to look disengaging? The visual elements will help you to cross-check.

In terms of the space and deliverability, it again comes back to using HTML typography and that good image-to-text ratio balance. In terms of deliverability, it’s important as a practice. It’s certainly the idea of thinking about multiple devices at the same time, and this is why I tend to think about how the email is going to look or how the experience is going to be. It’s great for one device, but it’s not going to be great on another. You cannot do to all of them because there are a lot of devices, but you can get an understanding of how engaging or not the emails are going to be across them. So, that’s a common pitfall.

Another one, talking about the visual experience, is designing for the video experience only. As you probably are aware, accessibility is something that’s really being talked about a lot. And it’s thinking about the audio experience as well. So, as much as it is about the design of the visual elements, it’s about the video elements also. It should be described with alternative text in the attributes and thinking about how an email is going to sound is how we should see.

What are the best places to get inspiration for email design?

One of the great places, if you already know, is to get involved with the email geeks Slack channel. You will find lots of different resources from all over the email community right there. Every day there will be something new and interesting that’s posted. That’s a great place to discover what’s really current as well.

 Really good emails have always been a favorite of mine. Their website is where they showcase what they consider to be really good emails. They don’t just show the email itself, they show the code behind it as well. So, if you’re a developer, you can see how things have been created from a development point of view. They also give a description of what it is about, so that gives good results for experimenting in your emails.

 I also look beyond the emails as well. Because, you know, we can get quite a little inspiration from the email world. It’s good to get ideas on design because design is bigger than email. So, my go-to places include design weekly emails. And there are often articles about typography and all those kinds of things that inspire us to think if it’s something that we would want to do in our email. So those things that come across as ideas that stand as a hot spark give us more ideas about email. Things like what can we do about accessibility—it might not only be just about emails, but it also might be about color or how tangible things are. So, looking beyond the email is also a good idea. That’s what I do. 

What are some of your favourite email design/writing blogs?

Well, Litmus is always quite famous, and they’re always producing new articles and blog posts and videos and most kinds of things that really help you fine tune the art. Email on Acid as well. They write great articles on specific things. For example, on dark mode as to how to get in dark mode, what’s involved, and how best to approach it. Action Rocket as well. They have a blog post, and they also do an email weekly, and they’re again writing similar things.

It’s actually quite good to read about the same thing from a different perspective, because typically it won’t be a repeat from one to the other. You get a different approach or a view on how to fine-tune the art. So, it’s good to kind of read and see different approaches. What you find is, as time goes on, emails change and support for different things change. So it’s good to read the more recent things as well, if you can. It’s not always possible most of the time, but sometimes things that happen more recently would help.

Moreover, as a recipient of emails, you are almost the best judge of whether they’re successful or not because you’re the recipient and you might be interested. And you can experience as you would on your device and it’s real. So, you can definitely look in to your email inbox for inspiration. That’s the first place to go!

Related Posts