Site logo
Video

Speaker/s name

Roland Pokornyik

Description

Speaker: Roland Pokornyik, CEO, Co-founder, Chamaileon Are your emails ready for the biggest trend: Dark Mode?  Dark mode has been trending since 2018 and became pretty popular among real geeks, who are clearly not the majority, but still a considerable and large audience that you should take into account when designing emails. Clearly designing and coding dark mode-friendly emails is not an easy quest and might be considered way too challenging for many.  The goal of this presentation is to introduce you to all the nitty-gritty details of dark mode that email marketers and designers need to understand to be able to prepare their emails to be compatible with the “dark side”.

Video URL

https://vimeo.com/661619024

Transcript

Transcript:
Roland Pokornyik 0:00
kind of life, I would want to live. But I'm from Eastern Europe. And I'm less positive than that less so but I'm trying, I really try hard. So thanks for this even bad news. It's, it's a bit harder to follow on these kinds of news. But I love to see these faces. And I think it has been like over two years, since I had the chance to attend an event like this. So I really love people here. This is my TED Lasso persona. But now I'm going to talk about dark mode in email, which is, it's, it's pretty dark. And it's bad for email marketers, but we just have to acknowledge it and prepare for it. So this whole story started back in 2018, I won't spend too much time on the history. And it became so trendy, especially in 2019, when Gmail launched dark mode, and then outlook launched dark mode too. You know, geeks love it. I haven't used dark mode before, I have to admit, I just switched on dark mode because I prepared for this presentation for you. And I spent, I guess over a week testing for dark mode, because it's it's a huge nightmare nightmare. But it's just so cool. So geeks seem to love it. Many people seem to love it. Or at least that's the sentiment. So it should be easy on the eyes, especially in low light conditions. And I have to admit that it's true. If if you read emails before bedtime, then it's good. I think during the day, it's not too beneficial. And it says to enhance legibility and readability. So you should be able to read texts better than light mode. At least that's what they say. And it saves some battery. I guess it only matters for devices with OLED screens,

I'm not sure if it's the way to pronounce it. But with devices with OLED screens, good for you, whatever you can charge your phone or tablet, I think pretty easily. And it does decrease blue light exposure,

it means that you know before you go to bed, if you if you watch, if you check emails before going to bed, it's a bad move anyways. But if you do that, then you won't be as hard to hit by blue light as if you're using light mode. But technically speaking, Some studies say that this is just marketing. So Apple said that okay, dark mode is good for you, you're going to love it. But there is no scientific evidence that it could, it will be any beneficial for at least for from an eyestrain, perfect perception. So if, if you use dark mode, fine, you can use it, it works in in dark conditions, you know, when you don't have enough light coming to your place. But apart from that, there's no evidence that it will be good for you. And actually readability readability aspect is also it, it has nothing to do with dark mode. It it has only one thing to do with color contrast. So if you use high enough contrast, I think the I use it in in one of the slides, it's the WCAG standards is 4.5. To one that you should have a higher contrast than this. I think you can get it later. So it has nothing to do with dark mode. Technically speaking, it depends on the color contrast. And as human beings we are used to reading books with white pages, and dark ink. And the fact that we need to do the opposite doesn't help at all, with understanding test doing things fast. I only prepared this presentation in dark mode because I talk about dark mode, but normally I have light slides. But I think for a presentation like this, it works because you don't want to read too many things. But if I had a bunch of text there, this wouldn't help you to understand what I'm talking about. And in some, in some ways dark mode can also evoke negative emotions. It means that you might feel bad in some countries religions, it's associated associated with that Technically speaking, so, okay, you do that. I didn't become a dark mode fan, but maybe you are. So can you just put your hands up if you use dark mode? Okay, that's a lot of people, you are geeks, I know. But I looked at some studies online. And in some studies done by geeks, the the dark mode was like, they said that it has 80% market share. And I don't know, people who would actually use it, at least from my connections. So I believe more in this email on acid stats, it says that, okay. It's like roughly 11% of people who use dark mode, they tested it throughout Q4 2020. So maybe it became more popular since then. But I think this is pretty realistic. So one in the people who actually use dark mode. And there are some email clients with support it. And I have too many slides. So I will just show this to you. So it's Apple Mail, Outlook, Gmail, Yahoo, whatnot. These are the actual email clients that super Darkmode. But all of them do it differently. That's, that's the long story short, and according to lateness, Apple has the highest market share. But in in Europe, it's pretty different. I looked up some stats, these are actually smartphone sales stats. But if you look at this, you can see that in at least in Europe, Android is in vast majority, I would say 80% uses Android. And it does only matter because of the next slide.

So when I started researching this topic, there were pretty much like three positions, how email clients deal with dark mode. One is the app UI change only. So it means that the actual email is not being changed only the, you know, the interface changes to dark, which is great, we love it. That's what Yahoo Gmail does, at least in the desktop environment, and also Apple Mail. But if you send regular email, then it changes to dark. So for some, these kinds of emails work better than HTML ones, we have a software that helps people create HTML emails, so it's not something that I would advocate for it. But anyways, in in Apple Mail, it's, it's easy. And this was the easy part. And the rest of it took me I don't know, too many days. I, I, I planned for the last days, but then I had to add more slides and do more tests. Just to keep it short. So I created several different email variations to check for dark mode. This was one where I went from vi to I guess I have a point. Okay, so then from vi to dark, I check for the contrast ratio. So this is the ideal state that you should plan for, at least from a vital black perspective. And I also created an ugly one with bright colors that are basic HTML colors. That's it. This was the last variation I created by chance, but I will explain it later. Where I only have brand colors in here. And with the text color that's pretty much high contrast enough opposed to the background. I have background images with text. And I also have colorful background images with text. Maybe I was too nervous to prepare these tests, but I wanted to make it useful for you. Because if you read online, you can read a bunch of things, but some of them are not too. So I will start with Apple Mail because based on the latest studies, it has a high penetration not necessarily in Europe, though. So actually, for a long time, I believed at least based on my test that Apple may have won't do anything with email. So if you take a look at this is the original version. So for the original I always use Gmail lite because it shouldn't be different from from any other variations. have an Apple Mail. If you take a look, it doesn't change a thing. And I was like, okay, maybe I don't need to test it, especially after this example, because I have this bright, crazy colors. Of course, most people won't use it. And it didn't change the thing either. So I was like, Okay, I don't need to test for Apple, Apple. But my head of marketing told me that, okay, just send one test. It was last Friday, I sent the test testing for brand colors. And it turned out that actually Apple Mail does change one bunch of things. But based on at least our tests, if you have something more than a text and the background, if you have an image there, or if you have an additional background, or of some sort, as in my previous examples with these squares, then it won't change anything. But if there is no color or image added, then it will pretty much mess up the email. And actually, it's never a color inversion. So they just choose the color, I would say quite randomly. And if you take a look at it, this is a pretty bad user experience to see this light color with white text. So it's, it's crazy. But if if you move further, if there's a background image, it won't change a thing. And there's no difference between the black and white or the colorful version. So that's what a pyramid does. I guess, Andrew, we'll send the slides later to you. So but if you have questions, just go for it.

So I moved on from Apple Mail, Gmail on iOS, because unfortunately, Gmail works differently on iOS than on Android. For whatever sake. And based on the research I did, initially, they called it full color invert, which is not the case. So this is the original version. And if you take a look at this dark mode version, yes, it seems that it changed the colors completely. Maybe I need to switch back and forth, because this gives a better impression what happens here, so the black change to white. So it seems like color invert in version. But if you take a look at the colorful version, these are not the opposite colors, definitely. So here's the blue, it changes into a light, Violet something. Okay, whatever. With the Gmail light, the these brand colors will also change to dark. And I think the whole challenge with dark mode, you will see it a few sides slides later than it's just it's a mess. So each and every client behaves differently in your client. I mean, what if you have a background image, the results are pretty consistent apart from the fact that in Gmail, Gmail, Yahoo will invert the color, the text color, but it won't do anything with the background image at all. So if you use the background images you need to prepare for via text, or in some cases dark text, because that's what's going to happen. And the same with colorful backgrounds. So there is no difference between the colorful and the the black and white. As I mentioned to you earlier, the Gmail on Android behaves differently. And I think personally that it does a better job of turning emails into dark mode because you know, there's no light in here, I feel that I'm in the dark, sitting in the dark reading my email. So what was white turned to black, but what was sorry, this was white, it turned to black. But what was Black was kept black in this variation. But with the colors. Split is strange because it didn't touch the colors at all that I use. These are basic HTML macros, if you you know, if you type in blue to your HTML, then this would be the standard blue. So these are as basic colors. And here, all of the yellow changes to black. Who knows why, but that's what you have to deal with. But apart from that all the text changes to white, which is pretty crazy, especially with this beggar On color, so it makes your life harder. And with the brand colors, also only yellow changes to dark, black ish. So nothing else. But the text changes to white. So, from a marketers or designers perspective, you have to prepare for have to be prepared for white text, no matter what happens, let it be a background image or background color, you just need to make sure that the design or at least the text itself would be legible for people with white text. And with the background images, we see a similar logic. But if if you can remember, I won't go back through the slides, if you don't mind. But here, everything turned to white again. So here I had a white background image. And you can see anything.

And the same with the colorful version. So everything turned white. But we have the same background images kept. And I'm, I never use Outlook, I pretty much hate outlook. But I have to say that outlook has the best dark mode from user perspective. Because it's actually dark. They have their own logic built, and thanks to Raimi V fund the logic that they use to render the emails in dark mode. And if you take a look at this line, you will see that it's really dark, and it's readable, always. So they make sure that no matter what color, you used the attorney to something else, not the opposite color, definitely not. So here's, for example, here's the server, this changes into a really dark gray. But the text is always readable. So if I, if I was a dark mode fan, I would use Outlook definitely to read my emails. Because, you know, even with this colorful version, that many previous email clients didn't really touch, you see that? Okay, everything turned dark ish, or we have a bunch of, yeah, this, this was supposed to be a violet originally, but it turned into something like dark blue. And still everything is legible on. So if you I hope you guys who use dark mode, you use Outlook, because you should. Unfortunately, I don't like Outlook. But that's that's how it is. And, and the same applies to the brand colors. So everything changed what's what's pretty similar to other email clients is that we have white text all over the place. But it's always high enough contrast compared to the background color. With the background images, we see are pretty much the same as on I think Gmail, Android, correct me if I'm wrong. So we have white text, and nothing else changes apart from that. So even with the background images, as I mentioned earlier, you need to focus on making your text readable if it turns to white. And we have a big enough screen. So I hope you can see it, even from the from the last rows. So this is one slide where I try to try to collect everything together. It's hard to understand, I guess, but as you can see, these outlook version is the darkest. So if I were Darkseid. That's what I go for. Apart from that, Apple Mail doesn't do too much with some of the color variations, but you need to check for parts of the email VG don't include an image or any other background color, because there you will have problems. The core offer version looks pretty much the same in Gmail, Android and iOS. While outlook and Gmail iOS has have pretty similar ways of dealing with colors. But unfortunately, only outlook is documented online. So you can hardly guess what's going to happen with your email, Apple Mail, iOS, it changes a bunch of things. And this made me work another half day on this presentation because I realized it last Friday, as I mentioned to you, so go for it. I think the the biggest takeaway from this is the background images version. If you have a background image than the color won't change you but you You need to prepare for the text color change, no matter what email client, your customers use. And I had this slide. I prepared this slide a few days ago, but severe just told me yesterday that there are hacks to make or full dark mode. But he's the developer, and I'm not. So technically speaking for marketers, I don't see a hack. But there might be something. At least one thing that I spotted based on the test is, if you use a background image, the, the color of background images won't change. So if you prepare for via text, then you're good to go. I'm not a big fan of background images, at least from a design perspective, but it seems to work. It's not too elegant, I would say. So it's not something that I would encourage people to do. Rather,

I would encourage people to test actually, for dark mode, if you care about the 10% of your subscribers who actually use dark mode. I think two years ago, I spoke about email accessibility. And that impact like three to 5% of people. So dark mode is the double of it. So I think it's worth testing for both. And it's, it's, it will be very easier for you if you build your email design system at first. And it's a challenge to maintain it and stick with it. Because, you know, as marketers, we always want something new, we always want something nice that didn't exist before. But if there's at least a person or two or whatever you name it, who actually got the email design system that you built, then testing for dark mode will be pretty easy. Because you don't need to test each and every email, you just need to test your design system and master template or you name it. And these are pretty much the smallest and key takeaways from the presentation. If you use an image, you better use it with transparent backgrounds. Especially for background images, you don't need to stick with the transparent ones, as I showed you in the examples. So if you have colorful backgrounds, or black and white, that will work just fine. And but if you use transparent image with a transparent background background, you need to add some outline to it. This is what I did with this logo. And if you use background patterns, make sure that test, especially your patterns in dark mode. And what I did and how I did these tests, I first used email on acid, we have both email on acid and literals. Because we are also geeks from an HTML perspective. But the test results are very completely different from the real devices. So we ended up testing on my Android phone and one of my colleagues, iPhone, so that you only need two phones, to email clients installed, and you have your own homebrew testing set up. So you don't necessarily need to rely on labels on email, like I said, and we've been using both of them for eight years. So I'm not against any of these providers. I just say that, for this specific use case, own devices work pretty well. And what you need to test for is, if you have the design system, if you have your brand colors defined, you need to make sure that those brand colors actually look okay, in dark mode, they won't be the same. We have some customers who use images for text because they want to see their own font render. So I guess they are the ones who would go mad, seeing a different brand color in the email. But you should just accept it, it will be a different color. Test for it, prepare for it. And that's it. And you always need to make sure that the the original text and the white text in some cases or the inverted text color would work with your background image or background color. And this is a promotion for all the tools that I use. So I use figma for outlining the logos. I highly advise you to do this use this for contrast checking. And here are some other tools and yeah, I use their own or own email system email design system. email content management platform. That's what chameleon stands for. And actually, by the time I prepared this presentation, we came so obsessed with Darkmode. And I was like, Okay, guys, we have an email preview in the software. I want to show people how the email would look like in dark mode. So I did pretty deep research on figuring out the logic behind. And there were some lovely email leaks. Geeks in the Slack channel, Jay and James, they pointed me to Ramis resource, he found the the outlook logic, how it works, it inverts the colors. And we actually build that logic into the tool. And this is supposed to

be a video and you hit play. Can you try to hit play? If you see your play button? Yeah, just click. Let's see. I guess it works. Okay, maybe please hit the food full screen thingy. It almost works. Anyways. So what I show you here is, is pretty much two things that that the the depth in an effort to have customers customize emails at the scale. One is that you can define your brand variables, it means that you can, for example, you can choose your logo, and replace the logo anywhere in the email, if it makes sense. So in this example, I replaced the the logo in the header and footer with a few clicks. And I'm going to turn turn this email to an inbox export email. And unfortunately, this is not the one that Andrew sent to you. But maybe it's my bed. So we had this email pre designed, you know, you know, template collection. And now what I do, I just define colors in the email. So I define color, Vaughn to be primary color, but not. And once I have the color defined, I can easily match it with all the other occurrences in the email, and then replace it with actually this was in box expos dark blue, I think this one and further color, I'm going to use the orange one. And it's this is something that we see helps customers, you know, test for dark mode, because you can easily switch the colors in the whole email. And it also helps those customers who use or, or who have multiple brands. So if you have a brand, I talked with Ricky yesterday, if you have multiple brands, this is awesome, because you create a master template and you can turn it to another brands design quite easily. And this is the thing that we managed to be at then thanks to the email geeks Slack. So we have the dark mode preview. And it's I would say it's 90% 95% match of the actual outlook preview. So just need to click a button and you see the outlook version. Still, unfortunately, we couldn't be helping the other versions I would love to. So if you have any links or documentation to share, just please do it. We would love to see it added to the software. I think you need to click the next slide

anyways, and the there was a quote here, or maybe I'm not sure. Okay, whatever the quote, quote was from one of the email geeks, another one Megan, she's pretty active in the channel. And I quoted that there is no such thing in email as pixel perfection. So just accept it. It applies to dark mode, it applies to everything. Vive Vivian on the design side of things for eight years, but I have to tell you that there's no such thing as pixel perfection. And please forget your brand fonts, colors, don't just use images because you want to make your font appear in the mirror properly. Just make sure to test for your actual customers and make the experience perfect for them. And it's that's pretty much your job for at least from a design perspective. There are of course many parts of email marketing apart from this. So I hope this was useful to you guys. And I didn't bore you to help with this 80 slides. But if I did, then sorry. See you see at lunch time

Our Business Membership Programs are available for 2024