Dark Mode is an inverted color scheme that turns light-colored elements on a screen to black and vice versa. It is available in most operating systems, apps, and social media sites.
I use dark mode for almost everything, including email and texting. Adoption of dark mode is said to reach 82% on mobile devices.
Dark mode is available in most operating systems, apps, and social sites.
Benefits of dark mode
- Improved reading experience. The dark background reduces blue light and screen glare.
- Better at night. The black background reduces eye strain when reading in low light environments.
- Saves battery power. Dark mode can reduce power consumption by up to 63%.
- Improves email accessibility. While the light mode is suitable for most people, the dark mode helps those with low vision.
- Better for your health. Some people who use dark mode report reduced eye strain, less dry eyes, fewer migraines or tension headaches, and improved sleep.
A downside of dark mode is visibility in bright light conditions. While useful in low-light conditions, dark mode can make it harder to read texts outdoors on a sunny day.
Design tips
Dark mode should be at the center of your email design and development plan.
Surprisingly, an email that doesn’t display well in dark mode can trigger spam filters and lower your sender reputation.
Here are some tips to keep in mind when designing emails for dark mode.
- Use PNG images. JPGs have faster loading times due to their smaller file size. But they may not be as clear and they don’t support transparent backgrounds. PNGs weigh more and have slower loading times. But they are more defined and of better quality. Additionally, PNGs support transparency, which is essential for dark mode.
Using PNG images in dark mode emails helps keep the background clear and transparent.
- Increase image padding. Images that are not transparent should have appropriate padding around the cropped area.
Make sure images that aren’t transparent have enough padding to remain readable.
- Add outlines or drop shadows. Put a white border around your darkest letters to make them easier to see in dark mode.
Make the letters appear in dark mode by adding a white border to the text. Image: Email on Acid.
- Use off-white. Many email clients target true black (#000000) and white (#FFFFFF) to automatically reverse or change rendering. However, off-white (#FEFFFF) might be the right choice to avoid a drastic color shift. This change may not be noticeable to the naked eye, but it is obvious to email service providers.
- Limit the number of colors. The more colors there are, the more variations there are and the more problems you will encounter.
Test
There is a great messaging community on Twitter — #emailgeeks – that help make your dark mode dreams a reality. Here are the dark mode testing resources cited by the community:
- Accessibility Contract Checker by WebAIM,
- Color Inverter and Opposite Color by Inverted Colors,
- Dark Mode Simulator by Proofjump,
- Previews and rendering of the email client by Litmus.
Dark mode on mobile
AppleiOS
- Go to Settings, then tap “Display & Brightness”.
- Select “Dark” to enable dark mode.
android
- Open your device’s Settings app.
- Select “Accessibility”.
- Under ‘Color and motion’, enable the dark theme.
Dark mode isn’t going anywhere, so always design for it. Test often and accept that your designs are subject to change in email rendering. The result is a better experience for recipients and higher opens and clicks for marketers.
#Design #Emails #Dark #Mode