Speaker 0: Hello, ParDreamin. Thank you for joining us today. We have the amazing Ruanthi here today to talk to us about how to create dark mode friendly emails. Welcome, Ruanthi.

Speaker 1: Uh, thanks, Kate. Uh, hi, everyone. Welcome to my session. Uh, hope you can hear me clearly. Uh, so today, my goal is to help understand, uh, why dark mode is important to us as email marketers and, uh, how we can improve our emails dark mode friendly. Uh, so during during next, uh, twenty five to, uh, twenty to twenty five minutes, what I’m planning to explain what is dark mode and, uh, why we should consider about dark mode. And then, uh, I will share with you how, uh, we can improve our emails for dark mode with some tips and some codings. Uh, I think most of you are mostly familiar with this, uh, hot topic, but, uh, I just want to make sure that everyone is in the same page. With the new launch of, uh, iOS 13, Apple introduced dark mode, uh, in 2018. Same year, Windows 10 also, uh, support this. Currently, most popular operation systems, apps, uh, even email client also support this. Uh, this is a color theme that identify light background and dark text convert to dark background and light text. Let me ask you one question. Do you think that every email client at, uh, the same way? Unfortunately, no. Some email clients do the opposite as well. Uh, like, they identify, uh, dark background and light text convert to light background and dark text. Uh, but not every email client, uh, support this. These are the email clients who support, uh, dark mode, but that doesn’t mean they handle your emails in the same way. Overall, we all know that email, uh, rendering is complex. Also, the dark mode is adding another layer of, uh, complexity. So, basically, you might be wondering why we should consider, uh, about dark mode. The motivation behind is, uh, more than 55% of email might be open with dark mode. Uh, Gmail already announced that they are going to support this, and, uh, they are still doing their research. After they, uh, like, after they finish their research and, uh, like, accept this concept, 55 will be increased to 83%. The first reason, uh, for these people love dark mode. Recently, I have done a a survey and found that nearly 82% of people, uh, they said they like dark mode. Also, I’ve done the same research in last year. Uh, so, also, you can see this year numbers are increased. Also, many people said that it’s easy on their eyes. Also, many research proves that, uh, it improves readability, but, uh, not a best practice for use in a cluttered, uh, interfaces such as gaming devices. Also, if your target audience is developed, this is a very good motivation for you to study on this, uh, topic because most of the developers work on dark interfaces. Next motivation is that majority of people change their device appearance into a dark mode. I’m also a huge fan of this, uh, concept, so I did the same. That’s why I conducted this, uh, survey and found that 57% of people did the same thing. Let’s move on to see the real example of, uh, uh, the light mode and dark mode user. Here you can see a a good looking email on light mode. Everything is clean and clear. You can read the text properly and have, uh, well, nice graphics, so people love to, uh, read this. Also, people who are using dark mode appear as expecting the same week. But here you can see, uh, they can see the messy email, uh, like this. Like, you can see they have a lot of contrast colors. Even it’s very difficult to see the we see these temp templates. And you can see this has many distractions, and no one, uh, wants to read it. That’s our next motivation. Uh, and it affects to our company branding. This is exactly how I look at my machine when I, uh, got the really messy email during my outbreak or very stressful situation. Most of the times, I ignore those emails or unsubscribe them. Also delete the the emails without without reading. I’m pretty sure if you are a dark mode user, uh, you might experience, uh, this earlier. Based on my study, I found that, uh, some dark mode users change their appearance when reading the email because they think that, uh, that email content is very useful and they don’t want to miss it. That’s why, uh, those dark mode users change their device appearance into light mode and read the email. But that’s not a good user experience. What are steps. Also, as a email marketers, how we are going to achieve our email marketing goals, like, our goals, like, if we fail to give better experience to our users. Like I said earlier, email client, uh, respond differently. This is the last motivation. And, uh, email email here you can see email client work in three different ways. I’m not going to explain, uh, this one by one, uh, now, but I will show you guys, uh, how this email client work with real example, uh, from in, uh, coming up slides. So those are the motivation factors that we should consider about, uh, dark mode. And let’s see how we can improve our emails. Before that, I would like to recommend, uh, you to do some color experiment with your corporate colors. Uh, here you can see my, uh, color experiment with our, uh, corporate our company branding. Once you have done this, you can get a better idea about how your company colors are changing each email client. Uh, this is, uh, these are the email clients who, uh, fully convert the colors. You can see, uh, light background changing to dark background as well as dark colors changing to light colors. These are the email clients who, uh, parcially convert the colors. Means they only detect light backgrounds and change into, uh, dark colors. You can see dark dark colors are not changing even, uh, they’re not changing border colors. You can experience this with, uh, Outlook, uh, email file. At the end end of the presentation, uh, I’m going to explain how we can customize our email templates. For that, we have to create this custom, uh, color theme, like, suitable for your company branding. How we can create it? What I’ve done is I’ve analyzed a, b, c color theme and developed the, uh, date. So you guys can, uh, do the same thing. Also, uh, here, you can’t, uh, use light colors of as a custom color code. Some because some people think that they can’t change their corporate color. Yes. It’s, like, uh, it’s true because we have to maintain the consistency. But here, we have to focus for focus on our dark mode users because we have to give better experience today. That in the sense that we have to create this, uh, custom color theme of, uh, from, yeah, from our company, uh, branding. Let’s go through one by one and see how we can improve those emails. In here, whether the app is in a light mode or a dark mode, your email doesn’t change. As a email designers, we can help you about this because our email doesn’t look messy. But on the other hand, dark mode users won’t happen because they are expecting, uh, our emails on dark interfaces. Let’s look at the real example, uh, of this. Uh, this is in Gmail, uh, client. Here you can see, uh, the design of the email says exactly the same. Like, no matter if you’ll be in a a light mode or a dark mode, your email doesn’t change. Uh, okay. Let’s move on to another slide. Uh, these type of email clients will fully, uh, convert the colors. You can see light, uh, light colors change into dark colors as well as dark colors changing to light colors. Uh, same thing for, uh, phones as well. Also, uh, we can’t do any customization. Means, uh, change the colors, uh, in a suitable way or, uh, change the logo into a visible one. Let me take you the real example so you can get a better idea about that. This is, uh, iPhone Gmail fan. Here you can see how dark colors change into light colors, and light colors change into, uh, dark colors. Also, uh, when you focus on our logo in white background, it’s visible. But on here, it’s not visible. Uh, in this version, email client won’t allow us to switch the logo, but we can do few changes while we are working on design stage. Uh, let’s see how we can do this. We can improve our logo. We can add a drop shadow or a outline or a background color. Let’s see if your, uh, if your logo has a full orange or, uh, some color, uh, visible on, uh, black backdrop. In that time, you don’t have to, uh, follow these, uh, three steps. What you have to do is, uh, save your logo in a transparent backdrop. Also, some companies have contrast colors on their logo. In that time, you better keep another version of for the emails because those contrast colors are very difficult for dark mode users. Uh, let’s say if you have to use this, uh, background color, don’t use it like this. Always try to sometimes that won’t enough. Here you can see our, uh, like, logo is like a white touch on a email. I’m not a fan for this. That’s why I’m or recommend to, uh, follow these two steps. You can, uh, save this full logo area as a image with white background. Or else, you can save one pixel, uh, white image and add it as a background, uh, image, but not for the not for the entire template, only for this, uh, logo area. Here’s the code you can, uh, use for that. And, uh, you can see after how email look like, uh, we follow first or second step. But remember, uh, don’t try to use this for entire template or all the time. Next, we must consider about, uh, images. Always try to use transparent background. But, uh, some cases, you can’t, uh, use the transparent background. In the sense, uh, let’s say, if you are using, uh, GIFs or, uh, your log your image has white fonts, in that time, what you have to do is save your image, uh, as a background, uh, as a, uh, save your image with background color. So, uh, and, uh, like I said earlier, keep the, uh, extra spacey. Uh, also, uh, make sure to maintain the consistency. Uh, if you’re using transparent background, uh, try to again, like, if you decide to use transparent background, use that entire template. Don’t try to mix, uh, with the, like, both, uh, version, uh, transparent background and the background color. Finally, we must consider about icons. Uh, if you’re going to use black outline icon like c, make sure to fill the icon background in white and save it as a transparent background so transparent image. If you’re planning to add a full black color icons like a or b, you can either add a white outline and save it as a transparent background or save the, uh, icon on a white background. As I mentioned earlier, try to, uh, keep extra spacing if you’re going to, uh, if you’re planning to go with option b. I always prefer a and c because it’s really clean on, uh, dark interfaces, but you can, uh, use b as well. I have a tip for this. You have to you can’t, uh, please don’t use, uh, white pure white, uh, for this because it’s very it’s too bright, uh, for dark mode users. Instead of that, you should use, uh, off white. Here you can, uh, see the third and last set of email client, which only, uh, detect light background and changing to dark, uh, colors. You can see dark colors, uh, and also, uh, they are changing, uh, dark fonts into light fonts, but they are not changing, uh, dark colors. You can see dark color stays the same. Also, they are not, uh, going to change the border colors as well. I’m not sure if you had noticed another thing, uh, in this template. Yes. I added this, uh, I will change the logo. I purposely did that because this email client, they, uh, let us to do the customization. Before jumping to see how we can, uh, customize the template, uh, let’s look at the real example of, uh, this version. This is Outlook email client. We, uh, partially convert the colors. You can see, uh, light, uh, background changing to, uh, black, and areas that previously had dark background with light text have not changed. I haven’t customized this template code. That’s why you can’t see the, uh, logo changes. And, uh, uh, you can see call direction buttons has very dull colors. Uh, next, let’s see, uh, how we can customize those email template. So, basically, we are going to, uh, hack this code. Uh, Some of you are thinking that we don’t know any, uh, hacking knowledge or any anything like that. That’s, uh, because I know this bit technical, but, uh, don’t worry. I’ll try to explain it very clearly. You only have to do this. You, uh, add this preferred color scheme dark into your email. But that process is, uh, four or, uh, five steps. Again, not only not every email client, uh, support this as well. But this is really important for us because Outlook and Apple, uh, mails are in our top three email, uh, list. Also, uh, this customization is very important, uh, if you are adding Veeam online CTA, uh, in your email template. Once you select it, they can open your emails on our web browser. I’ll show you the real example later so you can get a better idea about that. Let’s, uh, get started from here. Don’t try to understand, uh, this method. So you can advise your team members or a person why, uh, person why you’re doing mailers. But if you are familiar with coding, uh, this will be a, uh, an acknowledge to you. First, we have to do is tell the email client that your email work in dark mode. You only have to do this copy this meta tags and include inside your head text. Every email has head text, so you can usually find it without those meta text. And, uh, these are only add adding this light value. Email will assume that your email will or email, uh, only displayed in light logo version. If you are adding dark, uh, you are telling email clients to enable the dark mode. That means you can do full customization and, uh, color changes. Without those meta tags and this dark valley, none of the following techniques will work. So this is very important. Second step is to target those, uh, client that support, uh, customization in dark. So we should add this, uh, prefer color scheme dark as a media query inside the style text. By adding this, uh, check whether the user prefer dark color scheme or not. If, uh, they do, it will trigger all the CSS properties we are adding, uh, we are including here. There are few, uh, styles that we have to consider for the dark mode users, but most most importantly, add this background color and the, uh, logo versions. Uh, follow this order so you won’t miss, uh, anything. You can see, uh, dark color and, uh, light, uh, color sorry, uh, light logo classes. Now you are, uh, the for dark mode users. So you should, uh, hide the dark dark logo on dark, uh, background and give visibility to light logo version. That’s how well, that’s what I’ve done here. Also, I’ve added, uh, colors to p h two text. You might be wondering, uh, dark mode, NDIA going to change those colors and why we, uh, should add, uh, like, manually edit. Uh, it has two reasons. First, uh, some phone colors are not visible on a different contrast. Here you can see the real example of this. So better add those without taking any risk. Second, some companies use big online CTA, uh, on their email template. If the dark mode that sorry. Dark mode, uh, users that, they expect, uh, to see those emails or, uh, dark interface. Therefore, it’s good to fill out those, um, steps. Mostly, those colors depend on, uh, band preferences. Remember earlier, I recommend, uh, you to do some color experiment with your, uh, corporate color. You can do the same thing and apply it to here. Also, try to avoid pure white and pure black because it’s very bright on, uh, dark mode users, and, um, it’s it’s good to, uh, keep in between, not too, uh, light and not too deep. Here you can see I’ve used a PO white for the hover effects because, uh, we can, uh, get, like, grab user attention very easy. Now it’s time to, uh, add preview, uh, preview class, uh, like, previous classes to, uh, email body. First, you should, uh, start with adding, uh, dark mode class. Otherwise, it’s difficult to, uh, see your changes on a preview mode. Uh, I face the same I face the this issue in several times. That’s why I recommend to start, uh, with this. And, uh, don’t worry about these, uh, styles. What I’m going to I’m I want to say is don’t add background color inside this, uh, style tag. Take it out like this and, uh, use it like, uh, like, like here. So, otherwise, you can’t see any, uh, changes, uh, on your preview mode. Finally, we should, uh, work on the logo. What you think about this? It’s look complex, but, actually, it’s not. What you have to do is copy this and, uh, add this to your email logo area. And, uh, you what you have you only have to do is, uh, change those two links. Before that, you have to create one, uh, link for, uh, with one link with, uh, dark, uh, mode, uh, like, dark logo and be another version with a light logo. But make sure to use the same, uh, classes that you have, uh, inside this media call. Okay. Uh, let’s see, uh, how our emails look like after we have done the done those customization. Here you can see our, uh, company newsletter on Outlook, which, uh, support this, uh, customization. You can see, uh, logo change into white logo version in black background. It’s difficult to colors. Yeah. Uh, I, uh, changed those, uh, according to our corporate color team. Uh, k. Let me show you the example. Uh, now you can see, uh, same email on, uh, Gmail Gmail client. I’ve added, uh, like, you know that email Gmail doesn’t email, and I’ve added the online CT on the bottom. So, uh, it redirect to, uh, to the web browser. You can see here you can see light, uh, mode users have that experience, and dark users have a dark mode experience. But you can only see this if you if you have done the, uh, the the pre optimization. If not, you can’t see, uh, you can’t, um, can’t see those changes. Uh, let me put it on the slide. Okay. The, uh, most important thing is you must test your email. I highly recommend to do this because, uh, you can, uh, get a lot of idea, uh, once you test, uh, your emails. I create a email template and, uh, give our team. So they are build it, uh, here and, uh, send me the test email. So I can, uh, I can fix the bugs, uh, and, uh, check our emails on different devices. Also, you must do AB testing. Recently, some research, uh, found that email client do changes in every four days. So you must do those, uh, testing and improve your emails for give better experience, uh, to your user. Also, Pardot have another cool feature. Uh, you can render your emails and check the web on desktop, web, uh, and, uh, mobile email clients. Even you can, uh, see the dark mode version as well. Uh, after send, uh, our emails, you can see campaign report. This is the, like, favorite, uh, part of, uh, mobile. Like, my my personal favorite part because, uh, it’s very useful to, uh, check user behavior or how users click on your emails. I highly recommend to do this because, uh, by using these stats, you can improve your emails and definitely help to, uh, achieve your email marketing goals. I’ve noticed that last October, Huddl have added this, uh, light mode and dark low dark mode, uh, email client break break break break down. Also, uh, they newly added this, uh, Apple Mail privacy. I’ve analyzed, uh, this email client, uh, and, uh, the the email client on, uh, October to December into in last year. Because this year, we have done a lot of a b c testing, so we I can’t, uh, get the proper stats. That’s why I stick with the, uh, last year, uh, email stats. In our Apple email, more than, uh, 23% of, uh, users using dark mode, while you can see 35% of users, uh, read our emails on light mode. And I’ve, uh, done I’ve, uh, done the iPhone, uh, image line breakdown as well. In iPhone, nearly 46% means majority of, uh, users who are using dark mode, while the, uh, 45% are light mode users. You can see it has a very small gap in between those, uh, two versions. That means we can’t neglect this. Uh, like, if we focus on light mode version, then we have to focus on the dark mode users as well. Like I said earlier, uh, in my client, still doing their research to improve usability for, uh, dark mode users. But we can’t, uh, kill, uh, they finish their research and do necessary changes because we will, uh, lose our customers if we depend on them and are waiting for their research. So let’s start work on the dark mode and make it happen. This is a very powerful quotation and one of my favorite. Also, I’m a huge Michael Jordan fan. Uh, if you’re a basketball player or a fan, you will you will know about him. Okay. That concludes my presentation. However, I’d like to quickly, uh, summarize the the main points. Now we all know that, uh, dark mode is a very trending topic, and most of the email client, uh, support that. And, uh, we have talked about what are the motivation factors that we or that, uh, that we should consider about this concept. First, we people love dark mode, and majority of people change their device appearance into, uh, dark mode. If you’re not work on this, our emails look messy, and it affects to our company brand. Most importantly, email client, uh, respond differently. Uh, also, as a email, uh, designers or developers, we only okay. We should, uh, work work on logo, uh, images, icons, and, uh, some color changes as well as, uh, custom code. Once we it may look friendly, uh, for dark mode users. Most importantly, test your emails and analyze user behavior. And, uh, here are the, uh, useful you can use. Uh, again okay. Do we have time for the questions?

Speaker 0: So we are actually out of time today. There are a number of questions in chat, um, but I believe you are going to be able to continue to chat with Ruanthi, and she can answer some of those questions. I do want to note that we will be posting a PDF version of all of that CSS code that Ruwanti had in this deck because I know that is super important to creating dark mode friendly emails, and that will make it much easier for you to grab that CSS styling. Um, so thank you everyone for attending today’s amazing session. We really appreciate it. Um, if you have questions, go ahead and continue to post them in the chat. Ruwanti will be hanging around and answering those. You’re also able to reach out to them directly in the event chat. Um, so thank you for joining, and I want to give a special shout out to our sponsors for their support. Without them, ParDreamin wouldn’t be possible. So make sure to pop into the sponsor booth sometime during your event to show them some love. Thank you all so much, and we hope to see you again.