20-Minute Webinar: Dark Mode and Email

let's get started a quick introduction of myself I am Chris Scrooge I'm the lead technical marketer here at where-where and for the past five years I've really specialized in behavior based marketing automation and personalizing the customer journey and optimizing their user experience and currently I head up where-where's client marketing production team where we're executing all things email marketing automation which also includes the development of fully responsive emails for those of you that don't know we're aware is an award-winning digital agency located in the Washington DC metro region and the past 20 years we've specialized in a variety of digital services from marketing automation website design and development digital strategy business analytics and digital advertising as you can see here we've worked with a variety of different customers over the year and all of our customers are spanning b2b e-commerce b2c e-commerce and service companies so let's jump into it what is dark mode so littmus defines dark mode as the reversed color scheme utilizing light covered typography user interface elements and iconography on dark backgrounds so in other words we're showing a dark style rather than the light style when the user has set their preference to dark mode and let me show you what I mean in this Instagram post you can see on the left side when the user prefers to use dark mode Instagram is actually restyling their application to show the same content on a darker color scheme but the key is that the user is setting that preference for dark mode so once it's enabled Instagram will actually change and restyle that entire application and if it's not enabled Instagram is just going to show the normal light version of the application and you can see those differences here on the screen and it certainly picked up a lot of buzz very recently so you can see in this Google Trends screenshot there's there was virtually no talks of dark mode up until about some time in 2019 when devices and applications started adopting this feature and as more adopt it will continue to kind of see spikes like this but you can see it's very recent change and it's certainly picked up a lot of buzz very recently and very fast too I can get my video play here but but why are users choosing dark mode well I think the facial expression expressions in this short clip are gonna explain it best so when you're in a dark environment like at home and the evening and the lights are all turned off the bright light can be very jarring and it can be very straining on the eyes but with dark mode enabled the darker colors create a much better user experience because it's not emitting that bright white light that is essential for us in the daytime and I think this guy's face kind of expresses it the best where he's it's very jarring using a very dark environments and we want to be able to show our content in a more optimized way so what are the advantages of actually using dark mode as a consumer well as the consumer you actually have less blue light which will reduce reduce eyestrain the darker Stella Styles use less processing power on your device which ultimately conserves battery life we're seeing more users actually requesting those darker themes it gives the user more control on how they actually view the content with brightness and contrast levels and the darker styles will actually improve content legibility and different lighting environments and many applications are actually catching on so as you can see Google and Gmail have adopted it and even Facebook is now running a dark mode beta beta even though Facebook has been much slower to adopt this versus other companies but but if you're looking at the Gmail example on the right while the Gmail app may show a dark style when dark mode is enabled your marketing emails may still be showing the light version if you're not optimizing for it so think of it this way and some of you may have already kind of experienced this already but if you enable dark mode on your device and the evening when you're in a dark room and you open an email that blinds you with that bright white background you you're probably gonna make a face like we saw in the clip earlier like this people were kind of reacting so it can be blinding for some especially when they're not expecting it after enabling dark mode on their device and they've already set that preference so we really need to make sure we're improving the user experience and serving content to our readers in a way that they actually prefer it to be seen so how can we adopt dark mode for email well if any of you have spent any time building an email you know the many differences in how email clients can render your email well there's no exceptions for dark mode with the clients that do support it we need to make sure that we're showing the best version of your content when dark mode is act wasn't is enabled but I don't want to kind of create any sort of confusion so dark mode doesn't mean just a dark design so dark mode before it even existed or anybody was talking about it anyone could design and build a dark email and send it no problem so some brands actually already have a darker color palette and that's totally fine everyone whether dark mode is enabled or not would see that dark email and dark mode doesn't mean you have to recreate a separate version of your email it's actually much simpler and much faster than that and I'll show you what I mean here dark mode allows you to have one email optimized for two separate environments so same thing like we saw with Instagram when dark mode is enabled your email will show the darker color scheme which you as the email marketer have previously set in the code so in this example here when testing we started by simply changing the background color from white to dark and even that small change made a huge improvement when dark mode was enabled but you have to remember this is still email and there's gonna be some this is still experimental because while some email clients are adopting it they aren't all adopting it in the same way which causes us to do things a little bit differently for some of those clients so some clients don't render the dark mode dark mode styles the same and here you can see Outlook doesn't fully support it and it shows their own version of your email things like buttons and the links under the images and icons are changed in a way that they feel best represents a dark version of your email but other clients like Apple Mail actually give us full control and allows us as email marketers to show the content how we want to display it and as more clients adopt it it's going to require a little bit more testing because of these rendering differences so we want to make sure that we're staying on top of it and as we saw between Outlook and Apple Mail there's certainly no Universal adoption at this time some fully support it some support a partial version of it and others flat-out don't support it so I hope in the future we see more email clients adopting it and that they begin to adopt it all in the same way to give us marketers that full control that we need but unfortunately that may not happen for some time now so what's next what do we need to do understanding dark mode how do we apply it as an email marketer well first you need that they strategically about the design so if you have a master template that you use as a starting point for every email you'll want to break that down and figure out how each section or each element should display when dark mode is enabled and if you don't have that master template try looking at some recent designs that you know elements that you're going to typically be reusing and try to think of what those would look like when dark mode is enabled but when you're doing this keep everything in mind because dark mode should apply to all elements where it makes sense so you obviously need to think about your colors you need to think about your surfaces and background colors you need to think about all the content that's in there the text and all of the images that you're also uploading as well so it may not be smart to just jump right into it and I'll take some time it will take some time to get that right design but you want to try to think of a couple of these tips as I go through them we found that matching your brand colors to an exact dark mode equivalent can be very helpful so this image here does a really good job of showing the standard brand colors on the left hand side and what those colors should be when dark mode is enabled so we're matching it one to one and it's a quick and easy guide to put together and can be used to help anyone involved in the design and development phase because it's very clearly laid out this is the standard brain color this is what it's supposed to be on dark mode and we also recommend avoiding some of those pure whites and pure blacks as they can be too strong so try using shades of gray as they tend to be a little bit softer and easier on the eyes you also need to keep in mind your images so you should try to use transparent pngs where you can but make sure that the image is still going to be visible when dark mode is enabled so the social icons are a good example of what I mean here the first Facebook icon is a JPEG with a white box and it doesn't look very great with those white corners well there's actually Twitter icon right after that Facebook icon and it's a dark logo on a dark background so it's not coming through like the way we would expect it so also considering with things like that if you're using a transparent PNG may be utilizing something like a border color around that icon like you can see in the Instagram as well as the other couple icons after that because it allows you to still see that icon in full and that white border around the image actually doesn't appear when the light version of your email is showing because it's a white border on a white background color so this is really only visible in dark mode is enabled you should also make sure if your images do have white backgrounds that the images are all the same dimensions so when dark mode is enabled you can see the varying image dimensions around those camera products images they're inconsistent it can make the design look a little bit off and maybe not as intended and and that's true it does look a little bit off so consider things like this especially when it comes to product images that you're using all of the same dimensions so you can have those clean crisp lines and it's a very consistent design throughout and lastly similar to the borders that I showed in those social icons if your logo or icon doesn't look great with a full border try considering like a white backdrop behind any text or icon so this is in a similar approach to the borders that this white drop shadow won't appear when the light version of your email is showing because it's a white drop shadow on a white background but when dark mode is enabled and that background color changes from light to dark that's when this is going to display this this allows you to have one single logo that can be used on both light and dark and it doesn't make you switch up the logo or anything it's just a much more optimized experience and if you have a design team and they're able to create a separate design for dark mode it really helps the developers when they go to update the code and what we found is that Adobe XD does a fantastic job of this because it allows you to set dark mode States on individual components and this short clip here kind of does a really good job of explaining it by simply changing the background color we're able to choose an individual components and then we're able to trigger the dark mode State for that particular component so you can see if we're looking at the design very quickly a couple clicks we can see the dark mode variation just by changing that background color and enabling that dark mode State so it's been very helpful for the design team as well as the development team to understand what's changing and how it's going to be changing well after the design phase how do you actually update your code so code updates are actually super easy and two of the three steps you only need to do once and what we found is that a lot of the time spent with dark mode is in that strategic design phase so fortunately the code updates are actually going to be relatively simple I'll be using a client example for this demonstration so American Federation of Teachers is a client that we helped with a number of things so during the email strategy audit we identified that they would benefit from a complete redesign of their emails and that we could create a master template which they can use as a starting point for any email build moving forward well in this redesign we identified an opportunity to optimize their template when dark mode is enabled and I'll show you the couple steps that we did to to make those changes so the first step is that you need to add these two meta tags so they affect the whole template and it basically communicates to the browser or email client that we've set a preference for how to display this content both for light version and for dark version and for this step it's as easy as just copying and pasting these two meta tags and adding them to the head of the document so it's very simple and in step two we need to support those meta tags and just add this code to a style tag into the head of the document so copying and pasting this code in the style and you're good to go and this essentially is just supporting those meta tags and repeating that to the email client or to the browser that yes we do have a light and dark version of this email and like I mentioned earlier the first two steps you do once and you don't need to do again so you can bake that into your emails or your templates and those will be there as assuming that you use that moving forward well step three is actually where all the magic happens and so in this step we're creating a media query that tells the browser or email client that these are the styles that we want the template to inherit when a user has dark mode enabled so in here you're actually targeting individual areas that you want to change so let's say for example you want to change your white background to a darker color well you add a clasp to the container that is either dictating or holding the background color and you specify the new color that you want to use in this class so you'll need to add that and then add the important declaration to ensure that the background color and haratz its color and nothing else gets injected especially if it's in mind or anything like that we also have the ability to hide in show elements when dark mode is enabled so let's say for example you do want to serve up a different image or a different logo on dark mode you simply just hide the light versions of those logos or icons and show the dark mode versions of the Conn's so you'll kind of continue to target elements and add the appropriate styles in this media query where it makes sense but you want to be strategic as you're going through this because you want to ensure that you have clean code that's easy to read and understand if you come back to it later or maybe for example somebody else behind you has to go in and make changes so try to group elements that are changing together into the same rule so that they all get changed together at one time so you can see in this code snippet on the Left we're grouping elements that all change to the same color so our H ones are h2s H threes body texts our links those are all changing using the same colors and we're changing them all once so that if we ever needed to come back and make a change let's say we didn't want the the text to be pure white and we wanted to do a slightly lighter gray color you would update it once and then all of those classes will inherit that color change and now you can see on the right hand side switching back and forth between light and dark dark mode is actually complete after this so all of my light backgrounds are turning dark my dark text is now light and we've made a couple of small enhancement to different areas where it makes sense like for example the social share icons under the image and the buttons changing those from blue to white to ensure that those logos are easy to see on that dark background and just like that you've joined the dark side so you now have an email that's optimized for dark mode and it's really an it's a really important step because we want to be catering to our audience so if you have if the user has a preference we should listen to that preference and we should give them the most optimized and the best experience that we possibly can and just these couple of steps can very easily do that so who showed today is that just adding those couple of code snippets and then doing that design review like I said you can bake that into your template and that's there forever you can reuse those elements as long as those classes are still there and those will automatically be inherited any time that you save a copy of that email modify it for your for your new content and send it out and that's it so yeah thank you all for watching I hope you found this information helpful like I said this was a 20-minute webinar so we may have gone through things a little bit fast so we're here to help so please reach out to us if you need assistance with implementing dark mode or if you need help with anything else navigating the ever-changing digital landscape and now that we have a few minutes left I want to read through some of the comments and try to answer the best I can so feel free to submit more questions and if I can't answer them now like I said either myself or my team will follow up after the webinar to answer them directly and again we will follow up with a recording of this presentation either later today or tomorrow and we're also going to be posting it to our blog so if you missed anything and need to see those slides again you'll have that in your inbox soon so let me bring up a couple of questions that some of you may have sent in already okay the first and what is the most difficult part about implementing dark mode for email well I think it really depends and it depends because of the team that you have so from our experience we've seen may not be the most difficult but the longest the most amount of time was put into the design phase because we were really thinking strategically about how everything should look when dark but is enabled so we wanted to go through each individual element you could start as simple like we did in our testing changing a light background to dark and then once that background is a dark color what else needs to change on top of that so it really depends so if you have that ability to think about the design phase that's going to really set you up for success and it also depends on your level of I guess code savviness so and the three steps that we lay it out like it said the first two you literally copy and paste and keep it there forever and then the last step we're actually targeting individual elements and changing colors where it makes sense based on the design so it like I said it really depends the most difficult part could be the design phase because you may not have that team structure to think strategically about the design or if you don't have a team or you're not quite code savvy the second part of updating the code may be the most difficult part but if you're following along with some of the tips that I explained here and just following the steps it really shouldn't take too terribly long to get that set up the next one here what do you recommend as first steps for a company that doesn't have dark mode email theme setup well obviously we want to have my personal recommendation is think of the design strategically so it may be something very difficult to just kind of jump into the code and make those changes because that's where we can kind of see some of the errors and it may take longer because code changes are going to take much longer than design changes ultimately so I would say I think about the design phase think about every single element that's gonna change obviously you want to make sure that you're staying on brand for every color choice every decision that you're gonna make and really think about everything from top to bottom and once you get that approval that design changed that design doesn't change so that you can make those changes directly in the code and that's it so see I would definitely start out with the design phase thinking of the strategic elements of what's gonna change because that's definitely going to be setting you up for success in the future a couple other questions here what marketing automation platforms offer the ability to create dark mode templates I think from my understanding there's not really any specific marketing automation platforms that can offer this ability but I may be wrong we work with a number of automation platforms and acoustic is kind of our main one that we work in and similar to that like something like Salesforce marking cloud as well it would really depend on your team to make sure that those code updates are there but that you may see a lot of automation platforms that have like a drag and drop or wizzy we get or that drag and drop that are there to put elements in without really having to touch the code they may actually allow that toggle to say here's what I prefer to show when dark mode is enabled then I think we may see that soon especially as more clients are going to be more adopting of it another question how do you go about converting your color palette to dark mode is there a specific rule or process or is it purely preference I don't think there's any really specific rules I would say it's preferences on the brand element so like I showed in the color palette image where the brand colors were on the left hand side and the dark mode equivalents were on the right hand side at that point yes it can be strictly preference but you want to make sure that they are complementary to your figure original brand colors so you don't want to go throw off something completely different and it's solely off-brand and people can't really recognize it so you want to think strategically eet's try to use some of those secondary colors if you have that brand guide because those will definitely help along the way but taking some of the darker variations of your brand and moving those over to dark mode and just making them more prevalent I think really at that point is the best way to approach it all right I know we're getting to to 11:30 Eastern Time so I'll answer one more question let me find is there a site where you can see how the dark mode would render in different email clients so I know that litmus is a really good email testing tool and they have the ability to show those dark mode variations and that's this is a tool that we use at where we're when building and testing email so I know for sure that they have that ability to see those different email clients and they are constantly updating it so as new devices and new browsers and your email clients are adopting it they're trying to adapt and adding those new screenshots for you but it's outside of litmus I would have to take a look I think email insights may or email on asset email on acid may have it and if they don't I would imagine that they're going to be releasing it relatively soon so

Channel: Whereoware

Views: 2,057

Keywords:

Id: Is9R8njSQI4

Length: 27min 31sec (1651 seconds)

Published: Thu Mar 26 2020