![\"With](\"https:\/\/www.southampton.ac.uk\/blog\/wp-content\/uploads\/sites\/27\/2022\/03\/Dark-Mode-Hero-300x183.jpg\")
<\/p>\n<\/p>\n
With the introduction of dark mode (night mode, dark theme), users can adopt a dark system-wide appearance. The dark mode inverts the device\u2019s display to a light-coloured typography and UX elements on a dark background.<\/p>\n
There are good reasons why users choose to set their devices to dark mode:<\/p>\n
Gen Z, our target audience, are the first digital natives, constantly connected online and spending over 5 hours a day on their phones*. With so much time spent online, they use dark mode to relieve eye strain. It\u2019s not just this age group adopting this setting, 82% of all mobile users now have the setting activated**.<\/p>\n The dark mode setting is available on mobile, tablet, and PC. All users can activate the setting system-wide or through an application. This includes:<\/p>\n With such high adoption of this setting, we need to ensure our email communications are readable, on-brand and error-free. Basically, we need to ensure we\u2019re meeting user needs in their own context, in the right place, at the right time. So, we decided to look into it.<\/p>\n There are a few key challenges in implementing dark mode. These are:<\/p>\n To combat it, the best way to test and check emails, is through an email optimisation tool, like Litmus<\/a>. This resource performs tests on over 70 email clients, including dark mode simulations.<\/p>\n An email may look great with the dark mode setting turned off, but tests using Litmus indicate that elements of the University email template are affected in dark mode.<\/p>\n The image above details two screens with the dark mode off and on. The screen on the left displays the email with the dark mode setting turned off. The screen on the right depicts the same email in dark mode. Here key brand colours are inverted, causing the email to be displayed incorrectly.<\/p>\n Our university is not alone, brands are affected too. Logos, text and call-to-action buttons seem to disappear. This isn\u2019t the outcome any brands wish for when the purpose of an email is to engage with our customers, community and so on.<\/p>\n Before any work is undertaken, we developed a process improvement plan to:<\/p>\n First, we need to recognise the main issues, understand their impact, and identify who could be affected.<\/p>\n Our standard email template is at the heart of our digital communications. We use the template to build engaging emails to prospective students, to communicate with enrolled students and staff as well as other groups such as our alumni community. Each audience interacts with emails differently.<\/p>\n It is important to understand which email client, and platform our target audience uses. Otherwise, we could focus on the wrong technology.<\/p>\n When analysing our target audience, we identified three email clients (Apple Mail, Gmail, and Outlook). Whilst younger recipients prefer mobile devices, staff and alumni prefer a mixture of mobile and desktop.<\/p>\n To determine the source of the problem, we carried out extensive testing using Litmus to identify the problem.<\/p>\n Inconsistencies between email clients and operating systems provide different results in dark mode. Most notably colours render differently. Whilst most images are unaffected, Gmail inverts smaller images such as small social media logos.<\/p>\n The diagram below details which operating system and email client combinations experience problems.<\/p>\n The dark mode function inverts colours. All colours coded in the email can be affected. Colours of banners, call-to-action buttons, and hyperlinks, shift in colour.<\/p>\n Like all brands, the University provides a range of colours to create a visual impact and to distinguish the brand. But would these colours be affected by the dark mode colour shift?<\/p>\n The answer is yes. The chart below depicts what happens to our brand colours in dark mode and across several email clients. The result looks like a piece of modern art.<\/p>\n Where the brand colour Marine 1 is utilised in our campaign emails, the colour will become lighter in dark mode. Whilst the lighter Marine 2 will become darker. This colour shift will affect the effectiveness of any button or hyperlink.<\/p>\n The challenge is to choose colours less affected by the colour shift for each part of our email template. With the help of Steve Wise, another member of the Digital User Experience team, we reviewed the test results to identify how to resolve the issues.<\/p>\n Our testing identified that simpler email template designs are the best for replication in dark mode. The areas of improvement included:<\/p>\n The coding has been a challenge. Not all email clients work the same way. Each element needs specific code for each email client and operating system.<\/p>\n Using the Litmus system, each piece of code was tested. Some worked, most did not. We conducted a total of 3,000 email simulations before we created a stable working template.<\/p>\n We developed separate code to create the email style, CSS, to target specific operating systems and email clients:<\/p>\n @media (prefers-color-scheme:dark)<\/span> controls elements for Apple Mail and iOS.<\/p>\n [data-ogsc]<\/span> controls elements for Android and Outlook.<\/p>\n Specific code targeting Microsoft Outlook, ensures text inverts correctly and is readable on a dark background. Without this inclusion, Outlook may not invert text correctly.<\/p>\n The key with any development is to ensure that the email looks and renders the same through all email clients.<\/p>\n Hyperlinks provide a link to external content and are identifiable by underlined text. This underline can cause readability issues as it cuts through any text with a dropped tail (g, j, p, q, and y).<\/p>\n Through code, we can remove the underline and replace it with a padded borderline below the text.<\/p>\n During testing, we found that Outlook removes this border and would need more code to insert the underline to hyperlink text. More code is not better.<\/p>\n The decision here is to retain the standard underline to hyperlinks. It works through all email clients and is a simple solution.<\/p>\n The email template will be used in a broad range of CRM applications (Microsoft Dynamics, Connect, Mailchimp), each requiring separate templates. Depending upon the system, we will implement new code to allow the template to function correctly in the CRM system.<\/p>\n We are pleased with the progress to redevelop our template, to better address the challenges of dark mode compatibility.<\/p>\n We\u2019re looking forward to seeing how our users will respond to the new template as we start to integrate it into our upcoming campaigns and wider communication.<\/p>\n Many thanks to all my contributors: Doug, Steve, Ayala and Jonny.<\/strong><\/p>\n What is dark mode? With the introduction of dark mode (night mode, dark theme), users can adopt a dark system-wide appearance. The dark mode inverts the device\u2019s display to a light-coloured typography and UX elements on a dark background. There are good reasons why users choose to set their devices to dark mode: it\u2019s easier […]<\/p>\n","protected":false},"author":256,"featured_media":1207,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"footnotes":""},"categories":[23,17,10],"tags":[32,34,33],"class_list":["post-1202","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibility","category-design","category-show-and-tell","tag-dark-mode","tag-design","tag-email"],"jetpack_featured_media_url":"https:\/\/www.southampton.ac.uk\/blog\/wp-content\/uploads\/sites\/27\/2022\/03\/Dark-Mode-Hero.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paLsBb-jo","_links":{"self":[{"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/posts\/1202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/users\/256"}],"replies":[{"embeddable":true,"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/comments?post=1202"}],"version-history":[{"count":23,"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/posts\/1202\/revisions"}],"predecessor-version":[{"id":1235,"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/posts\/1202\/revisions\/1235"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/media\/1207"}],"wp:attachment":[{"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/media?parent=1202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/categories?post=1202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.southampton.ac.uk\/blog\/digitalteam\/wp-json\/wp\/v2\/tags?post=1202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Gen](\"https:\/\/www.southampton.ac.uk\/blog\/wp-content\/uploads\/sites\/27\/2022\/03\/Dark-mode-Usage-Stats.jpg\")
\nCaption: Gen Z use dark mode to combat eye strain<\/span><\/p>\n\n
What are the challenges in fixing dark mode setting?<\/strong><\/h4>\n
\n
![\"When](\"https:\/\/www.southampton.ac.uk\/blog\/wp-content\/uploads\/sites\/27\/2022\/03\/Dark-Mode-On-Off-Example-1.jpg\")
\nCaption: The difference between dark mode on and off, colours invert<\/span><\/p>\nSo, what do we do? Develop a plan for success<\/strong><\/h4>\n
![\"A](\"https:\/\/www.southampton.ac.uk\/blog\/wp-content\/uploads\/sites\/27\/2022\/03\/Dark-Mode-Process-Improvement-Plan.jpg\")
\nCaption: A process improvement plan setting direction of work<\/span><\/p>\n\n
Who is our audience and what mail platforms and devices do they use?<\/strong><\/h4>\n
![\"Target](\"https:\/\/www.southampton.ac.uk\/blog\/wp-content\/uploads\/sites\/27\/2022\/03\/Dark-Mode-Target-Audience.jpg\")
\nCaption: The University\u2019s main target audiences and how they interact with emails<\/span><\/p>\nPinpoint the crucial issues<\/strong><\/h4>\n
![\"Three](\"https:\/\/www.southampton.ac.uk\/blog\/wp-content\/uploads\/sites\/27\/2022\/03\/Dark-Mode-Client-Test-Results.jpg\")
\nCaption: The results from extensive testing to identify which email clients and operating systems experience a problem in dark mode<\/span><\/p>\nWhat is the biggest problem?<\/strong><\/h4>\n
![\"A](\"https:\/\/www.southampton.ac.uk\/blog\/wp-content\/uploads\/sites\/27\/2022\/03\/Dark-Mode-Brand-Colour-Test.jpg\")
\nCaption: This may look like modern art, but is the colour shift of our brand colours in dark mode<\/span><\/p>\nRedesign of the email template<\/strong><\/h4>\n
\n
Creating the code to target dark mode<\/strong><\/h4>\n
![\"The](\"https:\/\/www.southampton.ac.uk\/blog\/wp-content\/uploads\/sites\/27\/2022\/03\/Dark-Mode-Email-New-Template-1.jpg\")
\nCaption: The new University email template renders correctly in dark mode, thanks to some extra code<\/span><\/p>\nHyperlinks and accessibility<\/strong><\/h4>\n
Implementation<\/strong><\/h4>\n
In Summary<\/strong><\/h4>\n
Links to articles and further resources:<\/h4>\n
\n