Email Design 101: Learn From Campaign Monitor’s Experts

– [Kate] Hi, everyone. Today, we are going to be covering the highly requested topic of email design. It’s something that both myself and my cohost, Tylor, are super passionate about, and we’re really excited to share some of the tips and tricks that the team here has at Campaign Monitor. Before we get kicked off, may as well start by introducing ourselves.

My name is Kate Jordan. I am based in Sydney, Australia. It’s quite early for me here and quite a crisp winter’s morning. And I am the product marketing manager for Campaign Monitor. And I’m joined today over the other side of the ocean by Tylor. Tylor, do you want to introduce yourself?

– [Tylor] Yeah. Hello, everyone. Tylor here. I’m based out of our Nashville office. Having bit of a contrasting weather situation to Kate. It’s kind of warm here and pretty humid. But currently, I work with our brand team as the art director.

Prior to this position, I was working with our professional services team to design and develop emails for our clients. But today, I’m really excited about the opportunity to share some of these great tips with you.

– Awesome. So, the agenda for today, we are going to get kicked off with Tylor giving you a little bit of an overview of why email design is so important, and what we hear at Campaign Monitor consider to be some of the core principles for email design.

He’ll also touch on the topic of design and deliverability which I know was a really frequently asked question in the registration form. So, we’ll definitely touch on that. I’ll then give you an overview of the different types of email design options that we have in Campaign Monitor followed by a demo where we will show you how to actually create one of the emails that Tylor will show you, from scratch, using the drag-and-drop builder in Campaign Monitor.

So, definitely stick around for that. And finally, we’ll wrap up with a few FAQs, and we will use some of the frequently asked questions that came through, again, from the registration form. And we’ll try and get through as many as we can in the time that we’ve got. So, to set the scene, I wanted to start with a quote. And bear with me, it might be a little bit corny, but I think it really captures the message of our webinar today.

And it’s an old one from Steve Jobs when he was speaking to <i>The New York Times</i> back in 2003, which feels like a lifetime ago now. And he says that most people make the mistake of thinking that design is what it looks like. People think it’s this veneer – that designers are handed this box and told, “Make it go look good!” That’s not what we think design is. It’s not just what it looks like and feels like.

Design is how it works. I think this is really relevant for email design even if it might not be immediately apparent because it’s really easy to think of email design as just colors, fonts, and images. But we would say an effective email marketer is going to go much further than that, and really consider how their email design caters to their audience or their subscribers’ preferences, and the ways in which that they want to interact with your brand through this particular channel.

But I will let Tylor tell you a little bit more about that now.

– Thanks, Kate. My goal today is to share some tricks that I use every time I work on a campaign. So, let’s get started. I think of design as an intentional act, an act that shows we are interested in experience and want to create a response to our audience. But you probably already know this given that you choose to attend this webinar.

But you probably… Oh, sorry. You’ve made the choice to listen to your audience which has led you to work on creating solutions to increase engagement and understanding why design matters as a key component to that. I think it’s a good idea to go ahead and break down some of those more specific impacts that design has on your email marketing program.

First off, great design is a way to stand out in the inbox. It’s estimated that an average office worker receives over 120 emails per day. A well-designed email is going to help you break through that noise of the inbox and engage your subscribers. Make your emails enjoyable, your content relevant, and take your audience on a journey so that people can’t wait to interact.

Secondly, consider it an extension of your brand. Your email marketing program should reflect your company’s brand voice. Be sure to use every opportunity from the subject line to the CTA, to echo your brand sentiments. Add personality into your copy, and always consider a conversational style of writing.

Consistent and on-brand email using colors, logos, and layouts reduce the chance of overwhelming your subscriber, making it easy for them to absorb your key messages. Thirdly, increasing your deliverability. This is something I’ll touch on in the next section, but it’s worth noting that poor email design can trigger automatic spam filters, but more likely, it will lead to your subscribers taking actions such as unsubscribing or marking it as spam which can impact your sender reputation.

Analytics and insights will allow you to track your subscribers’ actions. So, use this data to guide your process. And lastly, let’s increase accessibility and imply inclusive design. As a marketer, you want to reach a large and engaged audience. Email design that doesn’t take into account accessibility guidelines, which can range from insufficient color, contrast, exclusionary language, and poor coding habits, will mean that your messages aren’t going to resonate, or perhaps won’t even be available to all your subscribers.

While accessibility focuses on the structures and containers that hold information, inclusive design is based on the information itself and on your understanding and empathy for your audience. Consider your subscribers’ experience and abilities, then create emails that reflect that.

These connections you draw between what you’ve made and who interacts with it will pay off tenfold. From here, I’d like to get into some of our core visual design principles for email. Let’s jump in with brand consistency and how this practice solidifies engagement. A key pillar to email marketing relationship is consent.

So, people want to know immediately who this is from. If this question is left ambiguous, they will unsubscribe, or worse, mark it as spam. The from mailing address and subject lines do a lot of the heavy lifting, but the visuals can have a lot more staying power.

Brand recognition allows them to spend more time with the content, and brand consistency increases your resonance with your user. It enables them to picture something specific opposed to something generic. Take for example, picture coffee, now picture Starbucks. Okay.

I imagine you’re seeing a specific shade of green right now. Those plastic cups, their unique way of telling us what size it is and that mythical siren. While your industry may be vast, you want to find what elements your brand needs to help you stick out and be unique. This is why it’s important to make your emails easily recognizable and build seamless experiences between your email program and other marketing channels.

All of these touch points can help to assist in your consistency. Using logos and any marks to accompany it, plus applying a color story is one of the most effective ways to accomplish this. Follow your brand guidelines to keep colors, font styles, tone, and imagery similar.

Now, I know that some of you may not have these, but my recommendation is to create them as soon as possible. These don’t need to be complicated design systems. This is just about building consistency that helps create recognizable experiences throughout all mediums.

Another great tip. If the goal of your mailing is to drive traffic to landing pages, your template should share the same guidelines as your website. Think of your email template as the sibling to your website. They don’t need to be identical, just share the same visual language. Next, I’d like to talk about hierarchy.

Inevitably, you’ve already done a lot of this work during the content creation process. There, you’ve established the most important pieces of content and created an inverted pyramid, ranking your content from most important to least.

These distinctions create visual interest, and help to guide your subscribers through a campaign, and keep them engaged. This practice can manifest in two different ways, typographically and pictographically. The first, typographically, is the use of weights, styles, and colors within our fonts to establish the way in which people read and rank importance.

I suggest a four-pixel difference between each one of your styles to create good definition. Also, be sure to assign these styles in your HTML to assist with screen reader software. To all my Campaign Monitor drag-and-droppers out there, don’t worry, the editor will do this automatically.

The latter way of adding visual interest is pictographically. And this pertains to imagery, primarily photos, illustrations, and icons within your email. Photography should be assigned to the most important topics. It’s the most effective way to engage your audience because people tend to look to others for connections.

On the other hand, using illustrations for secondary messages can be really effective because they often use brighter colors and explore more complex situations. While iconography should be elemental and simple to understand, it does have the ability to be lost in translation.

While your brand may have slightly different standards, designers should combine the qualities of each one of these to tell compelling stories. We’ll show you in the demo on how Campaign Monitor makes it easy to define header styles. This includes your headlines, subs, body copy, etc., which enables you to create a design system for text.

Balancing color with size and layout can help build a clear hierarchy that is immediately recognizable. This creates visual interest and helps with skimming, which we know is a common practice in email. Easily read copy turns into engagement which then leads to interactions.

I believe that allowing people to parse through information and find their relevant points effectively is key to a successful email. One of the last principles I’d like to talk about is sections, or sometimes called modules.

These are imperative to agile design. As we all know, the needs for sending are ever changing, and we need to be able to move quickly. These sections help set expectations for copy and design by having established parameters, allowing you to place content appropriately. These make testing super easy.

You can move these around throughout your campaign, and see which ones and in what quantity work best for your audience. You can see here some of the most popular options, these naturally set hierarchies, allowing you to give the biggest real estate to your most important topics. And as importance and content availability shrink, so does space.

There’s an old saying, “When you emphasize everything, you emphasize nothing.” There are a few proven layouts that work best for email, and Campaign Monitor has furnished you with layout templates, which Kate will show you here shortly. These allow you to spend more time perfecting your content and analyzing your results.

Now, while deliverability isn’t considered a principle of design, I believe that the work we do can impact this delicate factor. After all the design work you’ve put into your campaigns, it’s now time to check in with what happens after you hit Send.

When you’re talking about deliverability, we’re talking about where the campaign lands once it’s accepted by the inbox provider. Eighty percent of deliverability is influenced by your reputation as a sender, and the other 20% is the content of what you send.

To speak to the content portion of that stat, you should keep in mind there are algorithms that pick up emails composed of all text or all images which can be spam triggers. So, use the 60-40 rule. That’s 60% imagery and 40% text.

Applying this mix makes for a very engaging email and helps to avoid these traps. Also, if you are coding your own campaigns, audit your code, look for any broken markup or open tags. Avoid redundancies.

Concise code is lighter and has a better chance of landing in the inbox. Additionally, make sure you’re in compliance with GDPR standards and CAN-SPAM regulations. The other portion to that stat is your reputation as a sender. This is predominantly influenced by the behavior of your subscribers.

So, keeping them happy and engaged is key. So, here are some points to keep in mind, always create concise mailings with clear and limited calls to action. When content is heavy, choice paradox rears its ugly head causing people to make no decision at all.

Show respect. And remember that you are a guest in your subscriber’s inbox, be conscious of their time, and let them know you are listening to them. Personalization. But I’m talking about personalized content that is beyond tags. Write copy that speaks to your subscribers directly, and consider dynamic content to make their interests seen.

Consider tone, and use your brand’s personality to engage your subscribers. This can be a great way at reminding your subscribers there is a human on the other end of these campaigns. Always have plans for surveys, and make time for testing. Check in with your audience, and make sure you are meeting their expectations.

I would recommend quarterly reviews, and make revisions based on your findings. And lastly, strong, memorable branding. If people don’t remember you, they will stop opening your emails. This inaction triggers some email clients to automatically move these mailings to the spam folder.

Well, that’s going to wrap it up with my thoughts about the theory of design for email. So, let’s get back to Kate for some more practical applications and Campaign Monitor’s platform.

– Thanks, Tylor. I love what you said there, especially, around the personalization part. I know something here that we do at Campaign Monitor with our emails is making sure that we always try and sign off our emails from a particular team member, and make it really feel like it’s, you know, a one-to-one message where you can.

I know a lot of our customers and subscribers really appreciate that. So, I thought that was a real interesting point. I am now going to move on to a bit more of the practical side. And I’m going to jump in and take a look to show you all the different ways that you can create templates in Campaign Monitor. And I’ll set the scene by just giving you a bit of an overview of the different options that you have when it comes to templates.

So, obviously, a template is, you know, it’s a predefined email layout. So, it already includes content such as images, or text, or maybe a brand logo. And it just means that rather than creating a new email from scratch every single time, you can use a template, or your team can use this template, as a starting point.

So, if you’re using Campaign Monitor and you wanted to create a new template, you would simply select My Templates, which is an option on the top right-hand side of your menu. And then this screen would come up, which gives you four different options to choose from. And I’ll just quickly run through each one. So, the first option is to start from scratch, and create your own template using the email builder template version.

So, this allows you to essentially customize the layout, the font, the colors, and the images. It’s a really great way to ensure brand consistency. And it just means that you can help your team get started really quickly every time they create a new email campaign. This has all of the standard sort of options that you would have in our normal email builder, but essentially you’re building out this skeleton of a template.

Now, a tip here, if you are on our premium monthly plan, you have this extra feature, which is super, super handy. And it allows you to lock sections of content, so that changes can’t be made when someone’s using the template. Really, really handy, especially for large teams or if you’re an agency working with clients.

And it just gives you a little bit more control over the design. And it would mean something like maybe your brand logo at the top of the email, or maybe there is some legal text at the bottom of your email, that can be locked. And so when someone creates a new email, they can’t change that. The next option you’ve got in Campaign Monitor is to choose from one of our predesigned templates.

So, we have a beautiful library of dozens of predesigned templates that are optimized to be edited for your own content in the drag-and-drop builder, making it really easy to just jump in, edit a few different things, and then hit Send. We have, you can see that they’re categorized down the left-hand side there, with lots of different categories.

So, you can look at email announcements, newsletters, events, etc. And one thing to point out here is that we have actually just released a new category of templates this month, and they’re called layout templates. So, you can see there, I think that’s the third option on the screen, what layout templates are, and I’ll show you a little bit more in the demo.

Essentially what they are is unformatted templates. So, we give you the basic layout, and we sort of base that off best practice for different types of emails, whether that be a newsletter or a promotion, and it doesn’t have all of the complex sort of formatting, and colors, and images. So, you can just look at this best practice layout, add your own copy and content and hit Send.

So, it’s a really no fuss option. Another option to create a template is to choose from one of the previous emails that you’ve actually sent already. This option will be displayed if you’ve previously used a drag-and-drop builder to send an email campaign. It’s a really quick way to generate a template from a previous email.

And, you know, it might be if you’ve already sent an email with particular content sections that you want to use regularly. The fourth option we have is if you want a little bit more customization, and that would be to import a custom HTML template. This is, obviously, going to be great if you want, as I said, a lot of customization over the design, and it allows you, or perhaps a designer on your team or a contractor, to build out a beautiful template in your preferred HTML editor, and then import it into Campaign Monitor.

You can use our template language. So, that means that you can essentially design the template with editable regions so that when you go into Campaign Monitor, you’ll be able to edit certain sections of that template. So, if you were to open an HTML template in Campaign Monitor, it doesn’t open in our drag-and-drop builder, but it actually opens in our custom template content editor, it’s a bit of a mouthful.

And essentially, it’s just a really basic content editor because the idea being that most of your unique styles and branding has already been hardcoded into the HTML. But what you can do is change, say, the text color, the size, the content, and add personalization tags or custom fields. We won’t touch too much more on HTML today.

We’ll be focusing on the drag-and-drop builder in our demo. But if you are interested in learning more about this and how to code custom templates using our template language, let us know in the webinar survey that comes up at the end of this webinar because we can definitely look at doing a more advanced design webinar in the future as well.

– All righty, on to the demo. So, for this demo, I’m essentially going to show you how to build one of the email designs, this lovely-outdoorsy email design that Tylor used in his presentation earlier. And I’m going to show you how to build it from scratch using one of our new layout templates.

Essentially, I’ll show you how to build it from scratch, and then I’ll take you through some sort of top tips and tricks for using the builder. Little hacks that myself and our team has learned along the way of using the product ourselves. Now, full disclosure, I have prerecorded this demo, so I could pack in as many insights as possible. And do note there’s a little bit of editing magic that goes on.

So, I do speed up some of the actions for some of the more repetitive tasks. But, hopefully, it’ll give you a bit of a taste of how to use the email builder. And, of course, you can always go back and watch this video in the webinar recording that will be sent to you after this. So, bear with me while I just pull up the video. All right.

So, after landing on the Overview page, I’m going to go ahead and select Create a new campaign, the green button on the top right-hand side. I’ll then be prompted to select a name for this campaign, so I can recognize it later as well as enter a catchy and effective subject line and pre-header text.

I’ll also update the sender details. After this, I’m taken to the template library. As you can see, I can take a browse through all of the beautiful predesigned templates that Campaign Monitor has. And for the purpose of this demo, I’m going to start with more of our simple layout templates that we mentioned earlier.

So, I can show you how to quickly add your own brand and content to this preset layout. So, now I’ve landed in the drag-and-drop builder. This layout template’s a really great starting point because it has all the main blocks of content already mapped out for me. And this particular layout is great for a promotional email because it has a big hero section at the top followed by our options to add additional supporting content underneath.

So, to get started, I’m going to click on the Settings icon on the left-hand side, and that’s going to pull up the general Settings page. And this is where I can get started with setting the overall text, colors, font, and background color for my template. Later on, I can go in and actually edit the fonts or colors of individual elements of my design, but this is going to give me a really good starting point.

So, the next thing I’m going to want to do to get started is to add my logo. I’ll just select the blue box at the top of this template, and that will allow me to upload an image from my computer. When I click on the image in the editing panel that comes up to the left-hand side, that’s going to allow me to adjust the size of the logo to make it just right for this particular email.

Once I’ve done that, I’m going to start adding my own heading and subheading text. As I said, I can edit the text size, color, and font within the editing panel that pops up just above the text. I’m also going to go ahead and edit the button with a really clear call to action. And I’m going to make sure to add a URL link for that button, which will come up on the left-hand panel as well.

So, now I want to add a big, bold background image to the top part of my email. I’m going to delete this additional image option, and instead, select the section of the email where the CTA button is. And then on the left-hand panel, I’ll select Choose File. Now, you can see this image isn’t looking quite right here, so what I’m going to do is actually select that section again, to bring up the section settings.

And I’ll select Layout and Spacing. By selecting Full Width, you can see that the image will then blend seamlessly with the full width of the email. The next thing I’ll do is actually add a spacer, and that’s going to pull the section right down, so I can expand the height of this section of this email so we get a really large, bold background image to show and make a real impact.

Here’s a tip as well when you’re using background images, use the Focal Point Tool here on the left-hand panel to identify the main part of the image, so you can make sure that it doesn’t get cropped off when it is adapted for a smaller mobile device. So, now, I’m going to move on to the next section of the template, and I’ll start by adding an image and text to the secondary content block.

One tip here is to match the background color of your email design to the image background color that you’ve chosen, so they blend really seamlessly together. For this section, I’m going to choose to use the inverse or the Ghost button style, so that it’ll contrast really nicely against the light background. So, up next, we’re going to have a section of the template where we have a two-column layout.

And this is going to be perfect to add some blog content to the email. So, I’ll add in the text again, and this time, instead of using a big button for my call to action, I’m going to use inline text link, which you can do by highlighting the text and then selecting the Link button in the formatting menu that pops up, make sure to click the green tick button to confirm that you’ve got that link in place as well.

I’m also going to add some images to sit alongside this text. So, I’ll go ahead and drag an image block into each column, and then select an image from my computer. I can change the image size just slightly so that they sit nicely and are spaced out evenly. Keep in mind as well that you don’t actually have to stick to the exact layout of whatever template you choose.

So, you can always scroll to the bottom of the email builder and select add a section, the green button at the bottom, and that allows you to choose a new block for the email design with various different column options. I’ll whiz through this next section. This is really similar to the one a couple above where I’ve just simply added an image, text, and the call-to-action button, making sure to add the URL in there as well.

Finally, I’m going to use this three-column layout to add some additional content with three really simple images. I’ll add a single column block above and below these images so that I can add a clear heading and text that isn’t split across three columns. Then I’ll go ahead and add the images themselves and delete any of the additional text and buttons that I don’t need.

On to one of the most important parts of your email building process, and that is to add the company name and the physical address to make sure that you’re complying with anti-spam regulations, always something to check before you hit Send. And I’ll also add the section which explains to the subscriber why they’re receiving this email so that they can have confidence that you’ve got permission to send them.

And finally, I’ll add the correct social media icons and, of course, the right links to them as well. So, once you finish with the design and you’re happy with how it looks, the most important next step is to go ahead and double check all of the URL links that you’ve added to the buttons, or text, or images themselves, make sure to also add alternative text or alt text to the images for the instance where an image might not render correctly for a particular subscriber.

Once you’ve done that, go ahead and select Preview on the top right-hand corner. And this is going to give you a chance to view it in a desktop and mobile view. You can scroll through, check that you’re happy with the layout, and you can also go ahead and click on the links themselves on different elements of the email design.

We also recommend sending a test email to yourself, just to check that you’re happy with it in your own inbox provider. If you’re on an unlimited or a premier plan, you can definitely check out as well, we have a design and spam test, and that actually runs your email design against various different email clients to make sure that it will work for all different subscribers and device types.

So, that’s a bit of an overview. Now, I’ll just run through a few tips and hacks that I’ve come across whilst using the drag-and-drop builder, starting with a really obvious but very helpful tip. And that is to make use of the Undo and Redo buttons on the bottom of the right-hand corner of the page. An obvious one and very handy when you want to revert a design change, or if you’ve accidentally deleted that element of your email that you desperately need to get back very quickly.

The next tips I have is around text formatting and layout. And one that I found really useful is that when you’re working with sections of text and you want to do a single line break, so you want to jump just to the next line break without going too far down, on your keyboard, select Shift+Enter, and you can see it drops down just one line.

Whereas when you click Enter on its own, it goes for a full paragraph break. I found that really handy when editing large section of text in the drag-and-drop builder. Another one to point out is to make use of the text formatting options that you have. So, you can select from the formatting drop-down menu, and you can choose to insert bullet points, a numbered list, or an indented section for a quote, which is really handy…

…around with the positioning, the formatting of the line. So, whether it’s left or right aligned and the size of it to suit your design.

And finally, looking a little bit more at personalization. So, definitely consider, where appropriate, to use personalized text from custom fields, where you can, to make it more of a personal touch. So, here I’ve included, “Hi,” and then the firstname of the recipient, but just always make sure that your fallback copy is there by entering in fallback copy.

So, in this case, I’ve entered the word “there.” So, if the name doesn’t come through, it’ll just say, “Hi there.” Also, check out personalized and dynamic content. So, for example, say you want just this section of your email to go to only a particular segment of your list who you know enjoys yoga and camping. So, in this case, you would select that section, and click into the settings where it says, who sees this, and you can choose that particular segment if you have that within your lists.

All righty. That is the end of the demo. So, I’m just going to jump back to our slides. And apologies if you can hear my computer fan just spinning out there. It doesn’t seem to like me having too many applications open at any one time. All righty.

So, I’m just going to wrap up very quickly, and then we’ll jump to some of the frequently asked questions seeing as we’ve got a little bit of time left. So in terms of the main content, you know, if we were to think about what are some of the key takeaways that we would love you to take from today’s session, the main one just being to consider the email design is more than just picking the right colors and images would really challenge you to consider the end-to-end user experience for all of your different subscribers.

Some of the core principles that Tylor mentioned that you should work keeping in mind is to maintain a consistent brand experience across all of your different emails, and then, hopefully, that will ladder up to your broader marketing strategy. Secondly, to use hierarchy to create visual interest and draw attention to your call to action.

So, essentially that’s just going to mean that by having really clear hierarchy, your users are going to know where their eyes should be drawn to, and they’re not going to be distracted by additional content. You know, you can really focus them in on the message that you’re trying to tell them. And the third one, use a variation of sections or modules to balance out content and, again, improve readability.

And as I’ve mentioned, Campaign Monitor gives you a number of different options to design engaging and relevant email campaigns. You can either choose to design your own from our drag-and-drop builder. You can choose from one of our predesigned templates or you can choose to upload your own HTML.

All righty. So, on to the Q&A. I know there has been quite a few questions that have come through live, and I know Kalyn is trying to get to answer just a few of them at the moment. But we will definitely answer more of your questions in the follow-up email later today. But for the purpose of this Q&A, I wanted to go through three questions which were really frequently asked in the registration form when you guys signed up for this webinar.

So, Tylor, I hope I don’t put you on the spot too much, but I wanted to see, I know you touched on this very briefly earlier, but I wanted to get some of your top tips for what we call accessible email design.

– Yeah, Kate. Definitely. And this is a topic that we could, you know, extend this to another hour, so I’ll try to be brief. And, hopefully, if we keep seeing interest in this, we can, you know, expand on these ideas. But this is a really important topic for our group, and our team, and really designers in general right now because it really gets to what designers are really good at.

And that is, like, creating things for other people. Like I said before, it’s a process that begins with empathy, and accessibility is about making sure we are creating paths for everyone to experience whatever it is that we’re creating. I’ll keep my tips focused on designers. But keep in mind, this is an effort that requires many different disciplines.

So, we could also think about how copy is written as well as how emails are developed as well. Alt texts. This is something that most of you should or already are doing, but make sure that you’re being pretty descriptive with that alt text because people with vision impairments rely on this data.

Remember all those things that I said about hierarchy, well, it plays a role here as well. All of these, like, bits of definition that you are creating between these letter forms are helping cognitive retention. You know, and so that’s really where you want to pay attention to those weights that you’re applying, the line heights, the letter spacing, all of that stuff can really affect how people are reading and retaining the information.

Another point is pay attention to your colors. And this is really talking about color combination and really specifically with copy. So, things that you want people to read. The idea here is all about how two colors react when they are placed next to one another.

So, there are tons of online tools that you can access that will help you take hex codes and sort of compare and contrast those to help make sure that you are within the WCAG or the AA standards of these color combinations. But yeah, making sure that you just keep your copy legible is going to be key to a lot of people’s experience.

Guard your buttons. So, my recommendation would be not to use images for CTA buttons. Otherwise, I would recommend using inline links or bulletproof buttons. If you want to use inline links, give these two characteristics to indicate that they are interactable.

An idea here would be to use a combination of bold and then giving it a color, or maybe giving it underline and then giving it a bold. The main thing to take away is that just don’t let color alone be the indicator that something is clickable. On the other hand, if you want to go with buttons, Campaign Monitor’s editor uses what we call bulletproof buttons, and what those are, are buttons that are comprised of all HTML.

So, you know, the button shape, it’s size, it’s text, it’s color, is all generated by HTML. So, that ensures that, that button is always going to render under all circumstances. Use as much live text as possible, opposed to using images as tags or, like, lots of, you know, images that have text overlaid on them.

You know, there are opportunities where you can use those, but be sure to use your alt text. But the main thing is that live text can be picked up and read by screen reader software. My last tip would be pay attention to your alignment. For any sets of copy that are longer than three lines, and this does include when it is in mobile, should always be left aligned.

Just we’ve found that, that is the most easiest way to read long bits of copy.

– That makes so much sense. And just to pick up on something you said there a moment, I know we had a couple questions about this, when you refer to alt text, that’s alternative text, right? So, that would be the text that, say, if an image didn’t display, or if the user’s inbox provider wasn’t going to show an image, the text is there, so they’re able to read that instead, is that correct?

– Absolutely correct. Yes.

– And I know, certainly, in the drag-and-drop builder, that is something you can do. I think it was briefly mentioned in the demo there. So, essentially, what you can do is if you click on an image on the left-hand panel, you’ll have an option to include both the URL link so that when they click on the image, it will go to the URL of your choice, and the alt text section there as well.

So, definitely an easy thing to add when you’re building a design. All righty. The next question that we had that was pretty common was around video integration. And, you know, how do you integrate video into your email design so that, you know, you can guarantee the people are going to be able to interact with it?

– Yeah. So, currently, there are only about five email clients that will support watching a video inside of a campaign. So, this could be a big effort for maybe not a lot of payoff. So, I always like to just throw that out there. I’m not saying that we’re not getting to a place where video inside of email is going to be a bigger thing.

I honestly think it is. It’s just that we are sort of waiting on mail clients, you know, to catch up to that technology. But if you are interested, there are third-party services, Liveclicker, is one of them that can allow you to set up videos. And it gives you some embed code that you can then put into your HTML templates. This would only be available to people using the template builder with Campaign Monitor or someone who is an email developer.

So, there are some additional costs and skills that are needed, you know, to go that route. On the other hand, we do have 13 email clients that support animated gifs. So, an option here is to create an animated gif using some of the frames from your video, and place a Play button over top of that.

This creates movement, and it mimics a video. Then just link that image out to wherever that video is hosted. We know for a fact that animations of all types have been shown to increase engagement and render additional clicks. So, this option is a lot more attainable, especially, if you have limited resources you know, like, money, time, and skills.

So, yeah.

– Yeah. Awesome. I think that makes a lot of sense. It’s one that comes up, I know, a lot of our support team and our customer team get that question a lot, so really good insight, thank you. I think we’ve probably got time for one more question. So, this one is something that’s been coming up a little bit more in the last couple of years, and it’s around, you know, how do you design emails for dark mode?

You know, dark mode being the new display settings that a lot of more modern, particularly Apple, devices now offer.

– Yeah. So, this topic is kind of new to me, and I think it’s new to a lot of people. But, however, our teams have been experimenting with our marketing emails and what we’re sending out. And we’ve been trying to make adjustments to our campaigns. But what we have found is that they have varying results within the mail clients because, you know, what’s happening is that we’re creating code, and we give that code specific direction.

And then when it gets to an email client, you know, their code is overriding our code. And then we have an opportunity to sort of tell it, “Well, no, instead of do that, do this,” but sometimes there is, you know, a translation gap. So, we have found that we get sort of varying different results. But I do have a couple of tips that I would love to share.

When we think about, you know, the images, so there’s sort of two options. We can be saving out our images as JPEGs, and JPEGs will maintain their backgrounds. So, whatever background that you saved it with, whether that be white or whether that be a picture of a mountain, or whatever. Those things are going to stay even in dark mode. Also you could save out your images as PNGs.

And if you’re familiar with this format, this is a transparent image. So, that means the background is dropped off. So, what would wind up happening is when it appears in dark mode, you know, it would look almost cut out and then it would lay on that top of that black background. So, it’s really more about preference.

And so, you know, I think that once you’ve sort of created your email, and you could do some testing and see what it looks like, and you may find that, that changes the way that you save out the images that you put into your mailing. But regarding images, if you do have some sort of permanent fixture items, like, maybe your logo or specific icons that are already dark, a tip you can do is apply a white outline, you know, around that logo.

Or you could also think about, like, an outer glow in white. So, when those things are on a white background, they are completely hidden, but when the black or the dark mode comes in, those outlines will help your logo or those icons, you know, remain visible.

So, that’s sort of a tip that we’ve learned here. You know, the main thing about dark mode is what it does is when your email comes into the inbox of this reader who would like to experience it in dark mode, what it is doing is actually assessing the style attributes of the CSS.

So, when you think about the background, the color, background-color, bgcolor, those are all the things that the mail client is targeting. HTML, so any copy that you have, so that live tags, like what I was talking about earlier, that is automatically going to default to white.

So, you, typically, don’t ever have to worry about that being targeted. You could also look at image swaps. So, this is something that we commonly do with emails in mobile devices, is that we will do media queries that tell this email to, if this is in a screen that is smaller than X, make this image appear.

So, you certainly could do that too, you know, if you are code savvy, you could tell images that are white or are dark to then switch to a white version if it is ever in dark mode. But, of course, that, that all gets kind of in the weeds of coding and email. You can also tell it to apply underlines.

So, that is a style that you can tell through the CSS. So, if you’re worried about your links being a little bit less visible, you can always tell it to apply underlines. But, of course, that is with the CSS and the coding of these emails as well. My biggest tip, and this isn’t just for dark mode, but I would create a testing ring.

Like, all mailings, make time for testing before the big send. So, I would recommend sending tests to coworkers with different dark modes and email clients, and sort of testing it that way to sort of see what their experiences are, and seeing what you can do to sort of mitigate any sort of awkwardness that may occur.

Also, there’s a kind of a quick tip too, if you are in Campaign Monitor’s platform, and if you are creating an email, I’d recommend, you could always go to that little gear icon that is in the top-left corner. Once you click that, you’ll find a backgrounds option, switch your background to black there.

And then you can sort of get a good idea of what your email looks like in dark mode just as, like, a quick preview.

– That’s awesome. Thank you so much, Tylor. And I know, as well, that Campaign Monitor actually has an awesome guide on our blog site which has tons of details on how to design emails for dark mode. So, that will be something we can share, and we’ll send out in the wrap-up email later today.

So, tons more information there, but super helpful. Thank you, Tylor. That is probably all we have time for today. I know, as I said, there was lots of questions that came through. So, we’ll try to answer a couple of them in our wrap-up email. Again, thank you for joining us from different places around the world. Please stick around if you can, after closing this webinar to answer just a couple of questions in the wrap-up survey.

That will help us make sure that all of our future webinar content is as relevant and useful to you as possible. So, have a great evening if you’re over the other side of the world, or morning, if you’re here in Australia, well, catch you soon. Thanks, Tylor.