{"id":31838,"date":"2021-09-30T15:07:31","date_gmt":"2021-09-30T13:07:31","guid":{"rendered":"https:\/\/www.artegic.com\/?p=31838"},"modified":"2022-02-15T14:50:38","modified_gmt":"2022-02-15T13:50:38","slug":"dark-mode-in-email-marketing-this-should-be-considered","status":"publish","type":"post","link":"https:\/\/www.elaine.io\/en\/blog\/dark-mode-in-email-marketing-this-should-be-considered\/","title":{"rendered":"Dark Mode in email marketing: this should be considered"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>The Dark Mode is already established in the digital world. Browser, apps, operating systems, messenger \u2013 most of these applications now offer the display adjustment, where light elements, like texts, graphs, icons, ui elements etc. are presented on a dark background. Many email clients offer the Dark Mode, too. This is why email marketers should have a look on the effects, that the Dark Mode has on email design. In this post, we show you what you need to consider.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Most of us probably already use one or more apps on our smartphones in the Dark Mode. In contrast to the light mode, colors in the dark mode appear inverted. This means, that the Dark Mode flips colors over: black turns into white, red into green, blue into orange and so on. Because the background in the Dark Mode is dark, all other elements should ideally be bright, so that there is enough contrast to display them clearly visible. The dark look on the display is more pleasant and user friendlier. It is supposed to be easier on the eye, especially in a dark environment. The Dark Mode should also increase the readability and reduce the battery drain. It is not surprising that email clients want to be able to meet their customers preferences and display emails in the Dark Mode in some way.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How do the clients apply the dark mode in your emails?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Many email clients offer the Dark Mode, for example Google Mail App or Outlook App. Also web clients like outlook.com. But the remarkable thing is: the way that email clients apply the Dark Mode in your emails differs!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Email clients render unequally and so there are three different schemes, how the clients deal with emails in the Dark Mode.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>No color changes: <\/strong>the client itself can be displayed in the Dark Mode, but this has no effect on the emails. This means, that the interface of the client is presented in the Dark Mode but the outlook of the email does not change (if it is not explicitly prescribed in the source code). This applies to iOS and Apple Mail, for example.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"904\" src=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Bsp_DHL_Keine_Invertierung-1024x904.png\" alt=\"\" class=\"wp-image-32252\" srcset=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Bsp_DHL_Keine_Invertierung-1024x904.png 1024w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Bsp_DHL_Keine_Invertierung-300x265.png 300w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Bsp_DHL_Keine_Invertierung-768x678.png 768w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Bsp_DHL_Keine_Invertierung.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Full color invert:<\/strong> Everything is inverted, black turns into white, red into green. This also means, that a dark background is now presented white. If your email design is already tuned to a darker look, a full color invert will turn it into a light look.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"904\" src=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Bsp_DHL_Invertierung-1024x904.png\" alt=\"\" class=\"wp-image-32254\" srcset=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Bsp_DHL_Invertierung-1024x904.png 1024w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Bsp_DHL_Invertierung-300x265.png 300w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Bsp_DHL_Invertierung-768x678.png 768w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Bsp_DHL_Invertierung.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Partial color invert: <\/strong>The client does not flip every colored element in the email over. It only detects segments with a light colored background and inverts them \u2013 dark backgrounds are being neglected.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Not all users prefer the Dark Mode in their emails. So the same email is getting displayed both ways, in the Light Mode and the Dark Mode, depending on the individual configuration. And because of the unequal handling of the Dark Mode by the email clients it can occur, that a beautifully design newsletter is presented defective and completely unreadable to some users! How can you optimize your emails and newsletters for the Dark Mode?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Email design and Dark Mode<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you are sending emails, that contain only text, you don\u2019t have to worry. If you want to optimize your HTML-emails for the Dark Mode, you should absolutely pay attention to graphs and images. Here are four tips:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Important basis: the background-color. Take care of plain colors in the background. White, a light grey or a dark grey work very well in the Dark Mode.<\/li><li>Equally important: adjust your graphs and preserve them with a thin, light frame or a light shadow. If you don\u2019t, logos might disappear in the Dark Mode.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"792\" height=\"240\" src=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Helle_kontur-Schatten_fuer_Dark-Mode.jpg\" alt=\"\" class=\"wp-image-32256\" srcset=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Helle_kontur-Schatten_fuer_Dark-Mode.jpg 792w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Helle_kontur-Schatten_fuer_Dark-Mode-300x91.jpg 300w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Helle_kontur-Schatten_fuer_Dark-Mode-768x233.jpg 768w\" sizes=\"auto, (max-width: 792px) 100vw, 792px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Use the file format .gif or -png instead of .jpg for images: Why? These file formats allow a transparent background and you can avoid strange looking white frames around your images.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"210\" src=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Dark-Mode_GIF-PNGjpg-1024x210.jpg\" alt=\"\" class=\"wp-image-32258\" srcset=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Dark-Mode_GIF-PNGjpg-1024x210.jpg 1024w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Dark-Mode_GIF-PNGjpg-300x62.jpg 300w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Dark-Mode_GIF-PNGjpg-768x158.jpg 768w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Dark-Mode_GIF-PNGjpg-1536x315.jpg 1536w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Dark-Mode_GIF-PNGjpg.jpg 1584w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>You should be careful with texts, that overlay images. When the text-color is inverted, it might be hard to read on the image. The color of the text and the image can incorporate and the missing contrast may lead to the text being unreadable.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">If you follow these four tips, you have a good chance of your emails and newsletters being displayed user-friendly and mostly error-free in the different color schemes by the email clients.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The example of our customer DHL illustrates, how a newsletter, that was optimized for the Dark Mode, still looks very upscale, even after a full color invert.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"565\" height=\"1024\" src=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Dark_Mode_Vgl_DHL-565x1024.jpg\" alt=\"\" class=\"wp-image-32260\" srcset=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Dark_Mode_Vgl_DHL-565x1024.jpg 565w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Dark_Mode_Vgl_DHL-165x300.jpg 165w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Dark_Mode_Vgl_DHL-768x1392.jpg 768w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Dark_Mode_Vgl_DHL-847x1536.jpg 847w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Dark_Mode_Vgl_DHL-1130x2048.jpg 1130w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Dark_Mode_Vgl_DHL-scaled.jpg 1412w\" sizes=\"auto, (max-width: 565px) 100vw, 565px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Even more control over the Dark Mode<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you are not fully satisfied by only putting the above-mentioned tips into practice, you can have even more control over the Dark Mode. Precondition: you are willing to work with HTML and CSS. In alternative you can also work with the person in your company, that is responsible for templating or email design. You can send emails and newsletter in your own Dark Mode style, which differs from the color schemes of the email clients.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This means, that you are predefining a color scheme for your email by the help of CSS. You determine, how the email is presented to users, that have activated the Dark Mode in their app. In order to do that, you have to apply the CSS block @media (prefers-color-scheme: dark). This block has an impact on the display of user interfaces, that use the Dark Mode. It works almost as if you would apply styles in a media query block for a Mobile Responsive view of an email. In this block you exactly define, which colors will be output for the different elements of your email, like background, text, buttons, icons, etc.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By using the prefixes [data-ogsc] and\/or [data-ogsb] you can copy or augment the styles, that you already applied for the media query @media (prefers-color-scheme: dark) to the beginng of each CSS-command.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unfortunately, these two methods are not being consistently supported. In the following chart, you can see which clients support the methods:<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td><strong>E-Mail Client<\/strong><\/td><td><strong>@media<\/strong><\/td><td><strong>[data-ogsc] und\/oder [data-ogsb]<\/strong><\/td><\/tr><tr><td>Google Mail App (Android)<\/td><td>No<\/td><td>No<\/td><\/tr><tr><td>Google Mail App (iOS)<\/td><td>No <\/td><td>Yes<\/td><\/tr><tr><td>Outlook (Android)<\/td><td>Yes<\/td><td>No<\/td><\/tr><tr><td>Outlook (iOS)<\/td><td>Yes<\/td><td>No<\/td><\/tr><tr><td>iOS Mail<\/td><td>Yes<\/td><td>No<\/td><\/tr><tr><td>Apple Mail<\/td><td>Yes<\/td><td>No<\/td><\/tr><tr><td>Outlook 2019 (MacOS)<\/td><td>Yes<\/td><td>No<\/td><\/tr><tr><td>Outlook 2019 (Windows)<\/td><td>No<\/td><td>No<\/td><\/tr><tr><td>Outlook.com<\/td><td>Yes<\/td><td>Partially<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">When using these methods, you should keep the following in mind:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1 . <strong>Activation of the Dark Mode in the email clients<\/strong><br>You should include this metadata into your tags, so that recipients with an activated Dark Mode, receive the email in that mode:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"473\" height=\"31\" src=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/CSS_1.png\" alt=\"\" class=\"wp-image-32262\" srcset=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/CSS_1.png 473w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/CSS_1-300x20.png 300w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Then integrate it into the CSS:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"304\" height=\"102\" src=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/CSS_2.png\" alt=\"\" class=\"wp-image-32264\" srcset=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/CSS_2.png 304w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/CSS_2-300x101.png 300w\" sizes=\"auto, (max-width: 304px) 100vw, 304px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">2 . <strong>Insert media queries<\/strong><br>Insert these media queries into the section for the user-friendly Dark Mode style for the clients, that support @media.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"850\" height=\"330\" src=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/CSS_3.png\" alt=\"\" class=\"wp-image-32266\" srcset=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/CSS_3.png 850w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/CSS_3-300x116.png 300w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/CSS_3-768x298.png 768w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">3 . <strong>Dublicate: Dark Mode with [data-ogsc] and\/or [data-ogsb]<\/strong><br>If you want to address the Outlook app, please also add this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1274\" height=\"382\" src=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/CSS_5.png\" alt=\"\" class=\"wp-image-32270\" srcset=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/CSS_5.png 1274w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/CSS_5-300x90.png 300w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/CSS_5-1024x307.png 1024w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/CSS_5-768x230.png 768w\" sizes=\"auto, (max-width: 1274px) 100vw, 1274px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">4 . <strong>Dark Mode style within the body HTML<\/strong><br>Add the corresponding Dark Mode classes to your HTML tags. This is an example for the classes .dark-img and .light-img and how they are presented in the Light Mode and the Dark Mode:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1007\" height=\"268\" src=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/CSS_4-1.png\" alt=\"\" class=\"wp-image-32272\" srcset=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/CSS_4-1.png 1007w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/CSS_4-1-300x80.png 300w, https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/CSS_4-1-768x204.png 768w\" sizes=\"auto, (max-width: 1007px) 100vw, 1007px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Email clients do not apply the Dark Mode homogenously, which makes it harder for email marketing. But you should not simply ignore the Dark Mode and accept, that your emails and newsletters are presented defective and unreadable to some of your users. It can already help to put the tips of the four elements (background-color, icons, texts etc.) into action, so that your mailings are displayed error-free in the Dark Mode. Test your emails and newsletters in the different modi and clients. The user, that activated the Dark Mode did do this for a reason and you should respect the preferences of your users.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Checklist interactive emails<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Do you know our checklist checklist: 11 best practices demonstrating interactive emails? We present you 11 best practices, how you can integrate interactive elements, like a micro-shop, coupons or a survey with full navigation, in your emails.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Just click on the cover and fill in the form to receive the checklist.<\/p>\n\n\n <div class=\"artegic-form\"> <form class=\"elaine-form\" method=\"post\" id=\"elaine-form-27084\"> <!-- Meta General --> <input name=\"form_id\" value=\"27084\" type=\"hidden\" \/> <input name=\"e_daw_identifier\" value=\"formaction\" type=\"hidden\" \/> <input name=\"e_daw_content[meta][ip]\" value=\"216.73.216.20\" type=\"hidden\" \/> <input name=\"e_daw_content[meta][referrer]\" value=\"https:\/\/www.elaine.io\/en\/blog\/dark-mode-in-email-marketing-this-should-be-considered\/\" type=\"hidden\" \/> <input name=\"e_request_url\" value=\"https:\/\/www.elaine.io\/en\/wp-json\/wp\/v2\/posts\/31838\" type=\"hidden\" \/> <input name=\"e_daw_content[meta][language]\" value=\"de\" type=\"hidden\" \/> <input name=\"e_daw_content[meta][language_page]\" value=\"en\" type=\"hidden\" \/> <input name=\"e_daw_content[meta][date]\" value=\"2026-08-14 22:14:34\" type=\"hidden\" \/> <input name=\"e_daw_content[meta][e_datasource]\" value=\"8\" type=\"hidden\" \/> <input name=\"e_daw_content[meta][e_automation_id]\" value=\"298\" type=\"hidden\" \/> <input name=\"e_daw_content[meta][e_entry_id]\" value=\"1\" type=\"hidden\" \/> <fieldset> <div class=\"custom-efhe\"> <input id=\"country_032778\" name=\"m_country\" type=\"text\" placeholder=\"Land\" class=\"form-control input-md\" value=\"\"> <\/div> <!--<div class=\"title\"> <h3 class=\"title-element\">Bitte Tragen Sie Ihre Kontakt-Daten ein<\/h3> <\/div>--> <div class=\"form-group download \"> <div class=\"download-inner-wrap\"> <div class=\"col-md-4\"> <figure><img decoding=\"async\" src=\"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/artegic_checklist_11_best_practices_interactive_emails_EN_Cover.jpg\" alt=\"Thumb 11 best practices demonstrating interactive emails\"><\/figure> <div class=\"title\"> <span class=\"cattitle\"> Checklist <\/span><\/br> <span> 11 best practices demonstrating interactive emails <\/span> <\/div> <span class=\"error\">Please fill out this field.<\/span> <\/div> <\/div> <div class=\"download-inner-wrap-lower\"> <div class=\"checkbox\"> <input type=\"checkbox\" value=\"1\" id=\"download-0_27084\" name=\"e_daw_content[type][download][0]\" > <label for=\"download-0_27084\"> Select <\/label> <\/div> <\/div> <\/div> <div class=\"form-group markup\"> <h3>Please enter your data<\/h3><\/div> <div class=\"form-group gender\"> <label class=\"col-md-12 control-label\">Salutation<\/label> <div class=\"gender-selection\"> <div class=\"left\"> <div class=\"radio\"> <input name=\"c_gender\" id=\"c_gender_27084-0\" value=\"m\" type=\"radio\" \/> <label for=\"c_gender_27084-0\"> Mr. <\/label> <\/div> <\/div> <div class=\"right\"> <div class=\"radio\"> <input name=\"c_gender\" id=\"c_gender_27084-1\" value=\"w\" type=\"radio\" \/> <label for=\"c_gender_27084-1\"> Mrs. <\/label> <\/div> <\/div> <span class=\"error\">Please fill out this field.<\/span> <\/div> <\/div> <div class=\"form-group custom-text\" > <label class=\"col-md-4 control-label\" for=\"c_prename_27084\">Prename *<\/label> <div class=\"col-md-5\"> <input id=\"c_prename_27084\" name=\"c_prename\" type=\"text\" placeholder=\"Prename\" class=\"form-control input-md\" required value=\"\" > <span class=\"help-block\"><\/span> <span class=\"error\">Please fill out this field.<\/span> <span class=\"warning\"><\/span> <\/div> <\/div><div class=\"form-group custom-text\" > <label class=\"col-md-4 control-label\" for=\"c_name_27084\">Name *<\/label> <div class=\"col-md-5\"> <input id=\"c_name_27084\" name=\"c_name\" type=\"text\" placeholder=\"Name\" class=\"form-control input-md\" required value=\"\" > <span class=\"help-block\"><\/span> <span class=\"error\">Please fill out this field.<\/span> <span class=\"warning\"><\/span> <\/div> <\/div><div class=\"form-group custom-text\" > <label class=\"col-md-4 control-label\" for=\"c_email_27084\">Business email address *<\/label> <div class=\"col-md-5\"> <input id=\"c_email_27084\" name=\"c_email\" type=\"text\" placeholder=\"Business email address\" class=\"form-control input-md\" required value=\"\" > <span class=\"help-block\"><\/span> <span class=\"error\">Please fill out this field.<\/span> <span class=\"warning\">Little note: This looks like a private email-adress. Would you like to state your business email-adress?<\/span> <\/div> <\/div><div class=\"form-group custom-text\" > <label class=\"col-md-4 control-label\" for=\"c_telefon_27084\">Phone *<\/label> <div class=\"col-md-5\"> <input id=\"c_telefon_27084\" name=\"c_telefon\" type=\"text\" placeholder=\"Phone\" class=\"form-control input-md\" required value=\"\" > <span class=\"help-block\"><\/span> <span class=\"error\">Please fill out this field.<\/span> <span class=\"warning\">Little note: Are you sure that this is your correct telephone number?<\/span> <\/div> <\/div><div class=\"form-group download-confirm requiredgroup-1\"> <div class=\"col-md-4\"> <div class=\"checkbox\"> <input type=\"checkbox\" value=\"1\" name=\"e_download\" id=\"e_download_27084\" \/> <label for=\"e_download_27084\"> <b>Yes, I want to receive the selected document per email according to the <a href=\" https:\/\/www.elaine.io\/en\/download-conditions\" target=\"blank\"> download conditions<\/a> and agree to be informed by artegic about similar materials. *<\/b> <\/label> <span class=\"help-block\"><\/span> <\/div> <span class=\"error\">Please fill out this field.<\/span> <\/div> <\/div> <div class=\"form-group custom-checkbox requiredgroup-1\"> <div class=\"col-xs-12\"> <div class=\"checkbox slidercheck\"> <input type=\"checkbox\" value=\"1\" name=\"e_newsletter_abonnent\" id=\"e_newsletter_abonnent_27084\" \/> <label for=\"e_newsletter_abonnent_27084\"> I want to receive the Marketing Engineering newsletter from artegic AG regularly via email, with tips, trends and best practice about digital marketing as well as information on artegic. By registering I confirm, that <a href=\"https:\/\/www.elaine.io\/privacy\/#anker1\" target=\"blank\"> personalised user profiles<\/a> are created for promotion and market research. <\/label> <span class=\"help-block\"><\/span> <\/div> <span class=\"error\">Please select at least one field.<\/span> <\/div> <\/div> <div class=\"form-group markup\"> <sub> Your data will not be transferred to third parties. You can revoke your agreement with a click in every email. If you don't want to be contacted electronically, you can also request the chosen documents<a href=\"https:\/\/www.elaine.io\/privacy\" target=\"blank\"> via mail<\/a>.<\/sub>\n <br>\n <br>\n <sub>* Required fields<\/sub><\/div> <input name=\"e_daw_content[meta][message]\" class=\"form-control dmfg-1\" value=\"\" placeholder=\"Message\" type=\"text\" \/> <input name=\"message\" class=\"form-control dmfg-2\" value=\"\" placeholder=\"Website\" type=\"text\" \/> <input name=\"e_daw_content[meta][website]\" class=\"form-control dmfg-3\" value=\"\" placeholder=\"Website\" type=\"text\" \/> <input name=\"website\" class=\"form-control dmfg-4\" value=\"\" placeholder=\"Website\" type=\"text\" \/> <!-- Send Button --> <div class=\"form-group submit\"> <div class=\"col-xs-12\"> <button type=\"submit\" class=\"btn btn-success\" id=\"form-submit\">DOWNLOAD<\/button> <\/div> <\/div> <\/fieldset> <\/form> <script> (function($) { $(\"input[name='c_email']\").focusout(function() { var warn = false; var inputval = $(this).val(); var hasWarningClass = $(this).parent().hasClass('warn'); var freemailers = ['gmx.de', 'gmx.at', 'web.de', 'gmail.de', 'gmail.com', 'gmail.net', 'yandex.ru', 'hotmail.de', 'hotmail.com', 'hotmail.net', 'hotmail.at', 'hotmail.ch', 'freenet.de', 't-online.de', 'yahoo.de', 'yahoo.com', 'yahoo.net', 'yahoo.at', 'yahoo.ch', 'aol.de', 'aol.ch', 'aol.at']; if (freemailers.some(v => inputval.includes(v))) { warn = true } if (!inputval.match(\/^([a-zA-Z0-9_.+-])+\\@(([a-zA-Z0-9-])+\\.)+([a-zA-Z0-9]{2,4})+$\/)) { warn = true } if (warn && !hasWarningClass) { $(this).parent().addClass('warn'); } else if (!warn) { $(this).parent().removeClass('warn'); } }); $(\"input[name='c_telefon']\").focusout(function() { var warn = true; var inputval = $(this).val(); var hasWarningClass = $(this).parent().hasClass('warn'); if (inputval.match(\/^[\\+\\-\\(\\)\\.\\sxX0-9]*$\/)) { warn = false; } if (warn && !hasWarningClass) { $(this).parent().addClass('warn'); } else if (!warn) { $(this).parent().removeClass('warn'); } }); })(jQuery); <\/script> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Dark Mode is already established in the digital world. Browser, apps, operating systems, messenger \u2013 most of these applications now offer the display adjustment, where light elements, like texts, graphs, icons, ui elements etc. are presented on a dark background. Many email clients offer the Dark Mode, too. This is why email marketers should&hellip;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Dark Mode in email marketing: this should be considered","_seopress_titles_desc":"Email marketers should have a look on the effects, that the Dark Mode has on email design. In this post, we show you what you need to consider.","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"About the effects, that the Dark Mode has on email design","_seopress_social_fb_desc":"What email marketers should consider","_seopress_social_fb_img":"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Blog_Dark-Mode-im-E-Mail-Marketing_EN.jpg","_seopress_social_fb_img_attachment_id":32327,"_seopress_social_fb_img_width":1640,"_seopress_social_fb_img_height":856,"_seopress_social_twitter_title":"About the effects, that the Dark Mode has on email design","_seopress_social_twitter_desc":"What email marketers should consider","_seopress_social_twitter_img":"https:\/\/www.elaine.io\/wp-content\/uploads\/2021\/09\/Blog_Dark-Mode-im-E-Mail-Marketing_EN.jpg","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","inline_featured_image":false,"footnotes":""},"categories":[508,509],"tags":[],"class_list":["post-31838","post","type-post","status-publish","format-standard","hentry","category-kommunikation-2","category-praxistipps-2","category-508","category-509","description-off"],"_links":{"self":[{"href":"https:\/\/www.elaine.io\/en\/wp-json\/wp\/v2\/posts\/31838","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elaine.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.elaine.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.elaine.io\/en\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elaine.io\/en\/wp-json\/wp\/v2\/comments?post=31838"}],"version-history":[{"count":0,"href":"https:\/\/www.elaine.io\/en\/wp-json\/wp\/v2\/posts\/31838\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.elaine.io\/en\/wp-json\/wp\/v2\/media?parent=31838"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.elaine.io\/en\/wp-json\/wp\/v2\/categories?post=31838"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.elaine.io\/en\/wp-json\/wp\/v2\/tags?post=31838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}