Dark Mode Preview content blocker
We have added a new "Dark Mode Preview" to the Intilery platform. This allows users to simulate the experience of rendering designs on devices with dark mode enabled.
Dark mode is a device or application-specific setting. When enabled, it causes text and transparent image content to display with a coloured scheme on a coloured background. While it creates a pleasant experience for end-users, it poses design challenges since rendered colour schemes may vary considerably between device types and operating system versions.
We've assessed the commonalities between the various dark modes to develop this feature. This investigation has enabled us to approximate the dark mode user experience.
Please keep a few things in mind while using this feature:
- Our goal here is to assist users in detecting design elements that may not render well in dark mode. This feature is intended to provide a general approximation of the dark mode experience. For this reason, we still recommend additional email client rendering tests.
- We've thoroughly tested our standard content blocks with this feature, but Custom HTML and other custom content blocks may render differently.
Reason for Change
Dark mode compatibility represents a complex challenge for email creators. Because every client renders dark mode differently, it is often simply ignored until it becomes an issue. Sooner or later, though, creators usually find they must account for it. Therefore, they must leverage as many tools as possible to produce designs that render well across multiple platforms.
In our efforts to create a reliable dark mode preview, we've identified three main scenarios that may occur when an email client has dark mode active.
Nothing Changes
This generally applies to Yahoo mail and Gmail webmail. In these cases, email rendering doesn't change in dark mode. Instead, the email client UI's colour scheme is shifted.
Partial Colour Inversion
This generally applies to outlook.com. In this case, the email client detects coloured sections and inverts them into darker colours.
Colour Inversion
This generally applies to the Gmail mobile app and iOS 13 platforms. This is the most destructive dark mode scenario that creators most often need help with. In this case, light colours become dark and dark colours become light. For this reason, the dark mode preview feature is primarily designed to simulate this experience.
To access the dark mode please follow the steps below.
- Click on the campaign draft that you wish to view in dark mode.
- Next click on Actions and you will be presented with a drop down, chose preview.
- This will then display preview mode, this is where you will see the toggle to switch to Dark Mode Preview. You can also view the campaign dark mode in Mobile or Desktop.
