394 - Your Emails Might Look Broken to a Third of Your Subscribers (And You'd Never Know)

Speaker A: Right now, somewhere around a third of your subscribers are opening your emails in Dark mode. And depending on how that email was built, that could mean your logo and other elements in your email are basically invisible or your text just isn't readable. I want to walk you through what's actually happening and how to fix it. I'm Larissa Wurstieck and for a decade with my agency Joy Joya, I've been helping women focus product based e commerce brands grow with more intention, creativity and clarity. We ditch the marketing formulas that don't feel like you and build strategies that actually connect what is Dark Mode? In case you're not totally sure, it's that setting on your smartphone where instead of white backgrounds with black or dark text, everything flips so it's a dark background with light text. People turn on this setting because it tends to be easier on the eyes, especially if you're looking at your phone at night and some people use it without even realizing it's on. Maybe they turned it on once and now they just think that's the normal setting on their phone and they prefer viewing their screen that way. And the people using Dark Mode isn't a small slice of your subscriber list anymore. Roughly a third of email opens happen in Dark mode at this point, and that number is just climbing. It was closer to a quarter just a year or two ago. For some lists, it might even be closer to 40% of your subscribers are opening in Dark mode. On Android specifically, the vast majority of users have it turned on. IPhone's a bit more mixed, but still a meaningful chunk of users. However you're looking at the data, I would say Dark mode isn't an edge case, it's just how a big part of your email audience is looking at your emails. And if you're not totally sure what I'm talking about with how emails look in Dark mode. Because maybe you've never used Dark mode yourself, or maybe you have it on but you never really paid attention to your email specifically. Pause this episode or do this while I'm talking right now. Go to your phone settings, turn on Dark Mode, open your email app, whether you use Gmail or Apple Mail or whatever else, and with Dark mode on, just scroll through what's there in the inbox. Mostly try looking at marketing and promotional emails, but honestly, any email will do. After a few minutes you'll really start to notice how crazy and broken some emails look in Dark mode. You will definitely find Dark mode offenders in your own inbox after just looking for a Few minutes and then you'll understand more about what I mean. So where does dark mode actually break things? Well, when someone opens your email with the dark mode setting on their email app, depending which 1m they're using, can do one of, uh, three things. It'll leave it alone and show the email as intended. It will partially flip the colors or it will fully invert everything in the email and you as the sender, as the e commerce brand. You don't get to choose which one of those things happen. The email app. Like I said, Gmail or Apple Mail. The they decide that, not you. So let's say your logo on your email is just dark text on a transparent background to you when you're testing it, or even when you're looking in your email builder, it might look totally normal. You can send yourself tests in light mode. You can look in your Gmail on desktop and you won't see that anything's wrong. But if you test it in dark mode with an email client that inverts colors, then that background of your dark logo can turn dark too. And now suddenly you've got your dark logo on a dark background. Guess what happens there? You literally can't see the logo anymore. When someone is using dark mode, it's the same thing with any image that was designed. Assuming it's going to sit on a white or light color. It's not just logos, it can also be text in your email. Text contrast can easily fall apart like light gray. Text that may have looked subtle on white is going to become nearly impossible to read once it's sitting on a dark background. This is not a, um, minor annoyance. When someone opens an email like this in dark mode, which is going to be, as I said, a huge chunk of opens, something like 4 in 10 of your opens, they're going to last two seconds or less because people aren't going to sit there trying to struggle through an email that looks like you sent it broken. Because many people don't realize the reason that email isn't loading correctly is because of dark mode. The person is just going to leave and delete. But before I get into more about dark mode, quick break. To tell you if you've been enjoying content like this, I actually put together a free study that's very much in the same spirit. I did something kind of unhinged and subscribed to more than 360 real E commerce brands to see what actually happens after someone hands over their email. And nearly half of those brands didn't send a welcome email. At all. It's kind of the same idea as dark mode, honestly. It's just stuff that's broken but nobody's noticing, nobody's checking. And there are things that are fairly easy to fix. I turn my findings into a full breakdown plus a step by step audit checklist you can run on your own store this week. Again, it's free. Grab it@joyjoya.com frontdoor link in the show notes as well so I do have some good news about dark mode. You can design around almost all of this stuff. It's just that it's not automatic. So you do have to be thoughtful about how your email renders in dark mode. That means testing, seeing what's actually breaking in dark mode and then solving for those things in in your design very specifically. This is also why you have to be really flexible when it comes to email design. I've said this in a lot of episodes before, but you can't treat email like it's a piece of art. You may have a vision for exactly how you want something to look when it comes to your email, and when you design a mockup or you test it in light mode on a desktop, it could be pixel perfect and exactly how you want it to be. But that same exact design just isn't going to function once dark mode gets a hold of it, or even once a mobile device gets a hold of it. So when you're designing for email, again, it's not a masterpiece. You're designing for function first. You're designing to render across as many devices, inboxes, settings as possible. And sometimes that means making a compromise on the design vision for the sake of the email actually doing its one job loading correctly for the person who opens it. What I see with some of the worst offenders of dark mode usually happen when part of the email is an image slice or uh, uploaded image, and that's alternating with live text or dynamic content in the email. So think about your abandoned cart email. Maybe you have some kind of hero image or some kind of live text, and then there's a block that's dynamically showing the product that was left in cart. Those are the ones that you especially have to test because the image sections that go edge to edge on the email, they generally won't get inverted in dark mode because they're a solid image. But live text and dynamic content areas are at the most risk of looking totally different in dark mode and genuinely chaotic once dark mode flips the them again, especially when they're like stacked side by side with image slices, so you really have to pay attention to those type of emails. But really, any emails need to be tested in dark mode. Here are a few things that really make the biggest difference. I would say in general, especially if you're not doing full image sliced emails, skip pure white and pure black in your designs. Use an off white or a uh, near black instead because those tend to hold up better across different clients. Dark mode logic for your logo don't leave the background transparent and put an actual background color behind it so that it's not at the mercy of whatever color the email client decides to show through the logo. And always keep your text contrast solid. You m want something like a 4 to 5 4.5 to 1 contrast ratio at minimum dark or light so that nothing goes from readable when you're looking at it in your email builder to oh my God, I can't make out what this text says on a smartphone. And one thing worth knowing, Gmail doesn't play by the same rules as everyone else. It kind of has its own dark mode logic no matter how you've coded things. Which is exactly why the testing step that I'm about to talk about matter so much. General best practices can get you most of the way there when it comes to dark mode. But again, you have to test. Gmail tends to have its own needs that need to be checked every time. If you're deep diving into dark mode on your own and looking for workarounds and fixes, you might even find on the Internet that there's like a bit of HTML code that you can insert into your email to help prevent it from inverting colors. You can certainly try something like that, but again, I will caution you that it may not work across all devices and all email clients. And why testing matters so much for so many reasons. Let's talk about testing. Because more than any other aspect of email marketing, this part of checking that emails show up correctly in dark mode is a huge reason to test and to test thoroughly. Looking at dark mode rendering, it's not like a typo that you can eyeball and catch and fix. Dark mode rendering kind of is invisible until you're specifically looking for it and doing thorough testing across Gmail, Outlook, and Apple Mail. An email can really look perfect in one voila. Perfect. We love it. And then you test it in another on another device with another email client and it genuinely looks broken, like you made the ugliest email in the world. So you can't just build an email set and forget it. Test it once on a desktop or even within the email builder and assume it's fine, you actually have to open it in dark mode if you can on a few different apps before you hit send. There are also preview and testing tools out there if your email platform supports it. Or just send your test to some friends and family, have them check on their phone in dark mode, in light mode, in whatever inbox provider that they use. I would even go so far as to test your transactional emails in dark mode. I mean things like order confirmations and shipping confirmations. Those are the ones that get sent automatically from Shopify, for example. I've seen some pretty bad offenders of dark mode coming from transactional emails, especially if you've taken the time to customize those so that they look more branded and not just Shopify's default plain template. So my take, if you haven't gotten it already, is testing for dark mode isn't optional. If most of your list is seeing your emails in dark mode by default and you've never once checked what that actually looks like, you may be sending broken looking emails to the majority of your subscribers every single time and just never knowing it. And that's it for today's episode. If you enjoyed this, please subscribe and leave a review. It helps others find the show. And remember, if you want to grow your e commerce brand with email and SMS that actually drives sales, visit joyjoy.com to see how we can help.