4 Simple Rules for Designing Better Emails

Editor's Notes

• #2: Anca Hello everyone and welcome to this Adestra webinar! Today, we’re going to share some simple rules to use that will open the door to experimentation, innovation and beautiful emails. We’re going to share lots of examples from different sectors, so make sure to stay tuned!
• #3: Anca A few house-keeping things before we start: You are all on mute so we can’t hear you, but you can ask any questions using the questions panel in the sidebar. We’ll have some time at the end for discussion, so I do encourage you to use this feature. Alternatively, you can also ask questions on Twitter to @adestra.
• #4: Anca But first, I’ll just tell you a little bit about Adestra. We’re an email-driven technology company who have been helping global and growing brands maximize their marketing ROI for oven 10 years.
• #5: Anca …and we do that by being obsessed with their success. We like to say we’re not just a Software as a Service company, we offer Software and a Service.
• #6: Anca My name is Anca and I’m a Content Executive here at Adestra. I’m joined by Rob Pellow, our Head of Digital Design. Apart from having an awesome beard, the envy of all men in the office, he also has over 10 years of experience with digital design and development. He gets really excited about email design innovations and consistently pushes the boundaries of what is possible. Without further ado, I’ll hand you over to Rob.
• #7: Thanks Anca, so although we are advertising 4 rules, it’s more like 4 rules and a commandment but at that point it starts sounding like a 90’s British rom com so bear with me. Rule one is a bit like Tolkien's one ring (and I’m not just saying that because I bear a passing resemblance to Gimli the dwaf) - it is the one rule to bind all others and is not specific to email, more to any sort of UX design. Click – read statement So while the truth is that this statement, how ever fluffy, is universally true, the world of email is more challengeing than most. Our inboxes our inundated with things we signed up for in order to get one off offers or because we didn’t see the right checkbox when we signed up so when you do have someone who is even a little interested, to make it hard for them to understand what we expect from them is a little unforgivable.
• #8: I’m actually cheating here, but only a little – that 1st rule is more of a commandment, so lets call this rule, 1b. This one is more specific to email, or at least more important considering the busy inbox we’ve discussed and the pressure to capture peoples attention and engagment in a short space of time. So these are the things that you aboslutely have to include in your communications – and mostly in this order.
• #9: In the interest of virtual paper, I have confined the rest of the rules to one slide – but they are no less important!
• #11: User experience isn’t restricted to just the email/website/tv ad in front of them, it is all about the journey. Likewise, that journey is not continuous, people start that journey with their first interaction with your brand and everything you do or say to them after that is another step. Even zooming in to a single step, your email is unlikely to be the only point in a journey – it could be the start: We’d like to tell you about a promotion The middle: Thanks for registering Or the end: Thanks for your purchase
• #12: Creating consistency is not about recreating your website in your email. It is about making people feel ‘at home’ in your brand. Instead of trying to fit your homepage into 600px, you could pick some key elements from it – colours, buttons, parts of the navigation – and use these to help your users understand what is expected of them.
• #13: Creating consistency is not about recreating your website in your email. It is about making people feel ‘at home’ in your brand. Instead of trying to fit your homepage into 600px, you could pick some key elements from it – colours, buttons, parts of the navigation – and use these to help your users understand what is expected of them.
• #14: Here’s an example: This is the website of a company called Air Charter Service. They regularly send a emails for various subjects and individual customers may (and probably will) receive more than one of these. So although the journey is not a linear one, they will understand in each engagement how to interact. We’ve used different pieces for different emails but kept the consistency going throughout. So the 1st email they receive looks most like the website and the lead image will change depending on which area of the business they interacted with, subsequent newsletters retain some of the key pieces of 'Why Us' messaging as well as other elements such as the call to action buttons and brand colours.
• #15: Perhaps the most complicated of these was the cargo availabilities email that goes out once a month in 9 different languages to 12 different territories. The main piece of information is the list of availabilities and we wanted to create a specific journey around these for anyone that was interested. This starts with the desktop version where we combine the brand colours with the idea of an airport departures board. Then, as we move to mobile the challenge is about how to effectively get this information on to a mobile screen and still have it legible, which led us to using some touch interraction.
• #16: Then we considered the onward journey, we know this will be received in many different languages and we know it’s going to a form so we wanted to make it as easy as possible to fill out – which meant pre-filling as much information as possible, as well as having the form automatically display in the correct language. Once this is submitted, we want to keep people engaged online so we re-direct them to the appropriate countries website – also in the right language. So you can see how thinking about the wider picture of each interaction can create an entirely consistent journey.
• #17: The reason I love working in email so much is it is one of the few places where, as a marketer, you really do know a lot about your audience. That might be lot’s of personal information based on what they’ve signed up for or preferences they’ve given you, it might be behavioural or it might be what devices and email clients they use.
• #18: Personalisation is much much more than just starting your email with ‘Hello Rob’ rather than dear customer (though you should still do this!). My favourite thing about working in email is how much you know about the people you are talking to. That said, you don’t need to know EVRYTHING in order to talk to them in a a more personal way. Here are 2 examples of different approaches. Firstly, a template that is all about creating a feeling of re-assurance: This shows some fairly advanced personalisation to help dismiss the notion that using this particular fuel card means having to drive out of your way to find a petrol station that accepts the card. Working with a combination of an XML feed and customer data, we are doing a few things within the email to really drive home the message in the most appropriate way for the user (talk through and highlight areas) Notice the hierarchy of the content; good design is not just about the colours or images used but about everything the user sees and the order; remember we said at the start; we’re talking about the What, the Why and the How, this does this twice – once on a personal scale and then again in a more general way. The design makes use of background images to show all of the well known brands, using repetition to create an impression of a never ending list of logos, as well as making full use of the available brand colours in a way the represents their online presence.
• #19: This is another example of personalising your content. In this example, a fictional events company is sending out an email to announce an event is coming soon. The only information they have about all of their users is their name and email address. It doesn’t seem on the face of things that they will be able to do much personalisation but that’s not the case. Let’s assume that this isn’t the only email that they will send about this event, they’ve need to send a register now email, then a series of reminders and new information emails. So how can they get personal with it? Our approach for this would be to design a large, modular template that has all of the sections we might need to use. Then we send our 1st email to everyone with maybe some personalisation in the subject line but otherwise a static email. Once we’ve done that, we know some really useful things about all the recipients. We know some people opened the email and clicked through to register their interest, we know some people opened the email but didn’t click through and then a third group didn’t open at all. To make life really easy we could use Message Focus’s automation tool to automatically drop these people into some new lists and then do things based on their displayed behaviour.
• #20: For example, our most engaged people can now get the rest of the emails in the series as normal, this is our ‘hot’ list and they are interested and excited about the event. They should be the easiest to keep. The people that didn’t open at all are also easy to deal with – we can resend the same email but maybe this time we A/B test it with some different subject lines or we can try a different day or time of send. The middle people were interested enough to open but not grabbed by the content so to engage these guys, we can try sending something with a different tone, or a different hierarchy of content. If you apply these groupings across the lifespan campaign, then you have a whole load of new lists of people that you can treat differently right off the bat with the next event. If, at some point, you also ask them to give you some more details – maybe with the promise of a reward for doing so – you can start to enrich all of the behavioural information with some ‘real’ customer data and then your content can not only be the right type of messaging sent at the right time, but also personalised to the extent that people feel like you are actually talking to them – which is why email is such a powerful medium to be working in.
• #22: For some brands this is easier, not just because they have people whose only job is to inspect everything that is published to make sure it matches the tone, visuals and technical specifics of their brand but also because they are so well established that consumers do that job for them. Take Apple; arguably the most well recognised brand of the modern age. We, as consumers, already know how to react to their messages. On the flip side, we know instinctively when things aren’t right.
• #23: Even for large well known brands, there is still work to be done in email. When you, as a user, open an email you do so with certain expectations – these are based on the subject line and what they expect from your brand. In many ways, the best thing we can do with email design is to reassure them that the brand they were expecting is being represented here. A lot of this harks back to earlier points – bringing in elements from your website, making the message and the calls to action clear are certainly all parts of this. A really good way of doing this is to not make your emails all about selling – products or services. Sometimes its nice just to remind people of your brand values and help them feel good about subscribing/buying/or whatever you offer and also increases the likelihood that they will talk about you.
• #24: We recently did some work with Nkuku who understand the value of this type of story telling and we’ve been working closely with them as they rebuild their amazing new website. We needed to make sure that the people that they work with, the building processes behind their furniture and the products themselves all get the right treatment so that hearing from them is something to look forward to, not just another red number on your phones home screen to mark as read. They have a mix of amazing imagery and stories and it was hugely exciting to find enough exciting ways to allow them to get these across. In fact, this is a large part of what my team does; working with brands to create the templates that will allow them to get their content across to their users in the best way, without re-inventing the wheel every time. So what practical considerations are there when thinking about all of these things?
• #25: Images in email can be a contentious point. There is a reasonable proportion of businesses that have some really great graphic designers working for them but no developers, at least, no developers that are used to working in email. In this scenario it is tempting to make your email virtually all image and it’s easy, in isolation to be tempted by this path.
• #26: They look great! Brand is well represented Makes the email easy to build – more robust as not reliant on fiddly coding. They get included in lists of great looking emails!
• #27: This issue is not an uncommon one, it’s just that some brands have already built such a loyal base that people don’t even notice. When trying to describe my job to my Aunt (who thinks of herself as the cool one in the family), she suddenly exclaimed ‘Oh, marketing emails – those are the ones where you have to right click and download images aren’t they’? Now she may not be that cool, but she does work in an office environment and emails are a big part of her world. Imaging if her reaction was more, ‘Oh emails, those are the ones where you get great offers aren’t they?’. What a world that would be.
• #29: Well not quite, the way this was built uses a background image as well as some nice typography that ties into the branding colours and makes the whole thing feel less like an email and more like a well presented message. This way, we use the image to back up the content, but the offer and message is not less engaging without it. The image is, as it should be, extra fluff to support the message.
• #30: Well not quite, the way this was built uses a background image as well as some nice typography that ties into the branding colours and makes the whole thing feel less like an email and more like a well presented message. This way, we use the image to back up the content, but the offer and message is not less engaging without it. The image is, as it should be, extra fluff to support the message.
• #31: So, all the way through this I’ve referenced mobile but what am I referring to specifically? Clearly mobile is important, but so is understanding your audience. You’ll lots of consideration given to phrases like ‘Mobile First’ or ‘Mobile responsive’ and neither really capture the whole story every time.
• #32: So step one then is to take a look at your reports; What percentage of people are opening on mobile and, of those, what device are people opening on? These 2 questions will be instrumental in deciding your approach to mobilsing your emails.
• #33: Not wanting to start a fanboy war here but this is a very real consideration for people when approaching email as the level of support for different techniques varies pretty wildly between the two and with Android it varies a lot between versions. So 1st the good news, most people that open emails on mobile are using some form of Apple’s iOS. The reason that’s good news is that the native iOS email client supports all the things needed to allow you to drastically change your emails look and behavior for mobile.
• #34: So on Apple devices, you can take your desktop email and update the layout based on the screen size to follow a whole suite of new style rules which can dramatically change – and optimise – your email. Let’s look at the fashion email again; the most noticeable thing is the wide image but we’ve also got the full web site’s menu as well. Using some CSS media queries, we can see that when the user is on a smaller screen, we can control not only how the text wraps, but also the position of the background image, as well as adding in some mobile interaction with the menu.
• #35: With Android, things are a little more complicated. The main distinction comes in the form of the gmail mobile app. The Gmail app does not support the required media query that allows us to detect the size of the screen which limits what is possible. It also makes it’s own choices as to how it will deal with smaller screens and will automatically try and resize some elements while completely ignoring others. Why is this important? Because some Android devices use the Gmail app as their native email client. This was true of Android version 4.4 which makes up 20% of total mobile usage – though not necessarily email usage. This means that the more advanced layouts won’t work easily with these restrictions. There is some hope, however, and this is where it is important to understand your audience, message and the difference between mobile 1st and mobile responsive really comes to the fore. If you know that a large proportion of your user base is on Android you’ll want to spend some time working on how to support them
• #36: There are a couple of ways to do this. By far the simplest is to design you email to be a single column without lots of complicated nested tables.
• #37: While this may seem restrictive on the face of it, actually for a promotional or other single message email that’s probably a really good approach – keeps the message simple and then everything just shrinks down automatically (assuming you’ve coded it well!). If you want or need to do more complicated emails with multiple columns and have this work well on Gmail/Android then it is achievable but there is a fairly significant overhead in terms of the hoops your developer will have to jump through to make this work.
• #38: This template for Air Charter Service for example has some extra coding in so that the 3 columns turn into single columns on all mobiles but the effort required to make this work is fairly substantial, therefore I refer you back to knowing your audience and designing or briefing your designers appropriately. For the most part, we optimise for iOS and Windows phones where everything works and then make sure we test thoroughly on all major devices to make sure those key 3 messages – the what, why and how – come through and that all of the other rules are adhered to.
• #39: Lastly, I want to mention testing, no-one knows your audience as well as you so how all of these rules apply to your user base will vary from business to business. As well as functional testing – so does your email look great across all email clients and devices in as many situations as possible – you should also test the resonance of certain messages and combinations of content. If you are trying something new in terms of interaction or messaging, try and find some real people to test with. When we designed the mobile version of the ACS cargo email with the different drop downs, for example – we made use of people from outside of the team to play with it and interact so we could be sure that people would understand the intention. Everything should always roll back up to the 1st statement I made: before making any decisions make sure you are not placing unnecessary barriers between your message and your users interacting with it. Some people will need more text, some more images. For some people a $ value is what will sway them but for others it will be how much they feel they can trust your brand so use all of the tools at your disposal to understand who your users are, then apply the rest of the rules to talk to them.
• #40: So while these rules will only have a small effect if used individually, considering the whole user journey and where your email fits in with that, who you are talking to and using language they are most likely to respond to, coupled with delivering on the promise you set out with your brand will lead to a real change in engagement levels. When it comes to the content – what you are actually putting in the email, stop and think about what you would say if you were telling your friend about the same thing. You would probably lead with what it is, then tell them why they would be interested in it and let them know how to react to that. Which is to say, What, Why and How, and emails are no different.
• #41: Anca Thank you very much for joining us Rob! I’m sure our listeners have taken a lot of your valuable advice in and they’re ready to go back to the drawing board and start applying it. But before we say goodbye to them, let’s see if we have any questions. We have a few listeners asking about the slides. Do not worry folks, the recording and slides will be sent to you in a follow-up email in the next few days. Feel free to share them with your colleagues too!