hi today i'm going to talk a little bit
about dark mode
what it is and a few quick tips to
resolve any issues that you have
so first what is dark mode dark mode is
something that gives email designers
lots of anxiety
and maybe youtube maybe you are
creating a beautiful campaign you send
yourself a test
and you can't read anything we'll talk
about why that happens
so firstly what are the benefits of dark
mode
and better for low light environments so
at night when you're laying in bed and
scrolling through your phone like i know
we all do it's perfect for that it's
easier on your eyes
and saves your battery reduces screen
glare
and then it just it looks cool overall
so some people use dark mode all the
time during the day and at night
so important stats did you know that
between
80 and 95 of subscribers prefer using
dark mode
i was really surprised by this it's been
coming up a lot lately that
you know clients will send a test
message they can't see their logo
or some other issue comes up so we know
now that it's
super important to really work on this
in your email campaigns it's time you
know to cater
to the rising number of subscribers that
are using dark mode
so this is something that you really
want to take a look at every time you're
creating a campaign
well what happens in dark mode so
you can see here i have an example of
the same email
we're showing here is in light mode and
this is in dark mode
and you can see that this black text
it's converted to white and then your
light background colors so the white
here
and then this blue it's converted to a
dark background
so something here that's really
interesting and hard to manage is like
you can see our logo
it's almost gone you can't see it so
frustrating
so our logo is black and it's
pretty much disappeared here so what can
we do
to fix that we'll talk about it in a
second
here's another example where we can see
these white i mean these white
backgrounds
around our images this is one of our
clients lulalu
this is just a sample but we worked
pretty hard on getting their
emails to display well in dark mode
because so many of their users were
viewing the emails in dark mode but you
can see over here
their logo is black and you almost can't
see it
you can see here on this circular image
there's this white border so i mean it's
not
horrible but it does look a little
disjointed
when you have this circle with a white
box behind it we
we don't want that we want it to look
like this
where you can see you know the round
edges of this image and and here this is
floating on the white background
so a little bit of good news for some
reason
apple has chosen to display html images
in light mode by default which is
amazing so many people use apple
so that means that if you have you know
what we were just talking about here
your email will always show up in light
mode so you don't even have to worry
about this
but there's plenty of other email
clients that people are using
and that will show the dark mode so even
though this is
nice and thanks to apple for making our
lives easier
you still need to work on this for the
other email clients
so how to fix some problems here's just
five quick tips
number one is to use transparent pngs
so the transparent image has no
background you will see these sometimes
this checkerboard pattern
that's how you know this is a png so
wherever i place this logo
the background will fill in if i placed
it on a pink box
the background would be pink so you can
see here how it disappeared on this
black so something you can do with your
logo if the logo is black
you can add a stroke or an outline to
the edges of your logo you can put a
border
around the background sometimes we'll
see
people putting a full width
colored background here so the logo
never disappears so just something
really to keep in mind if your logo is
black
um one note on pngs so
pngs are really not meant for photos
in email we're going to use them
sometimes to manage this dark mode issue
but pngs will be
really big if you don't optimize them so
here i have an example i have this photo
here
it's 984 pixels wide when i save it as a
jpeg at a hundred percent quality
it's 249 kb but when i save the same
thing as a png it doubles the size
so you want to make sure when you are
exporting or saving your png images for
email
make sure you're reducing or optimizing
the image otherwise you're going to have
all these huge pngs the email will take
forever to load and that's just really
not a good idea for deliverability
pngs really are meant for things like
icons or lines
install anything solid so using it for
photos
it's fine and just make sure that you
optimize
and the next thing is for colors
just make sure that you're using poppy
colors but that are not overly saturated
so here's an example
these are really saturated colors on a
dark background
so they really do pop but they are a
little bit harsh
on your eyes so if you're looking for
an accent color or maybe an icon color
choose something that's a little less
saturated
and it just reads better on the black
background like you can see here we have
this like blue color
it pops really well on black and it's
it's a little easier on the eyes than if
we had chosen something like this
so this would apply for your ctas your
icons
um your logo anywhere you're hot you're
using an accent color
and then double check your icons so a
lot of people will use
these you know black social media icons
and you can see here i have black on
white and they completely disappear
here's outlook outlook is a whole other
story
we need to do a separate video on this
it's so inconsistent like you can see
it turned the background gray here you
can't see anything
it kept my blue background here so
outlook is a little bit finicky you got
to work on that if you have a lot of
people
reading an outlook especially if you're
more of a b2c or like a business client
you really want to look at your outlook
test results because
man outlook is a beast but in general
gmail
um yahoo you're going to see this here
you'll see the icons disappear when
they're black on white so you can do
maybe like a poppy color and do a white
icon
you can play around with this but
definitely
double check these in your footer
because they tend to get lost
and then lastly just test your emails as
much as you can
you can use a platform like litmus
which it can be on the pricey side but
it's totally worth it litmus or email on
acid
is another good one so when you create a
campaign
you are then running it through one of
these tools
and you can scan through all of these
samples to see like okay i can see here
my icons aren't showing so what can i do
about that
just really important to test in a tool
that will show you
desktop mobile dark mode
light mode you want to see all of these
different variations to make sure that
you're sending out the best campaigns
for your clients
alrighty that is it if you have any
questions feel free to ask in the
comments
and that's it for now thank you
you