{"id":67202,"date":"2021-07-08T14:49:00","date_gmt":"2021-07-08T12:49:00","guid":{"rendered":"https:\/\/spotler.com\/blog\/wat-doet-dark-mode-met-emails"},"modified":"2024-12-10T12:48:38","modified_gmt":"2024-12-10T11:48:38","slug":"wat-doet-dark-mode-met-emails","status":"publish","type":"blog","link":"https:\/\/spotler.com\/nl-nl\/blog\/wat-doet-dark-mode-met-emails","title":{"rendered":"Wat doet Dark Mode met e-mails?"},"content":{"rendered":"

Het laatste woord is er nog niet over gezegd, maar zeker is dat Dark Mode zijn offici\u00eble intrede heeft gedaan in de wereld van Customer Experience. Halverwege het vorige decennium werd er al mee ge\u00ebxperimenteerd, maar steeds meer software-ontwikkelaars omarmen het verduisteren van hun weergave. Dat heeft ook effect op e-mail. Mobiele telefoons (zoals de iPhone) en inbox providers (zoals Gmail) hebben al een optie om Dark Mode in te schakelen. In dit artikel analyseren we het effect van Dark Mode voor jouw transactionele e-mails.<\/strong><\/p>\n

Wat is\u00a0Dark Mode?<\/h2>\n

Dark Mode is een toegankelijkheidsinstelling op devices of in applicaties die er voor zorgt dat de standaard heldere vormgeving veranderd wordt in een donker, vaak beter leesbaar kleurenpalet. In de basis draait Dark Mode zwart en wit om, vermindert het blauw licht en verlaagt het het contrast van een interface.<\/p>\n

Deze instelling zorgt er echter ook voor dat e-mail rendering een nieuwe uitdaging leert kennen.<\/p>\n

Stijgende populariteit<\/h3>\n

Ondanks dat de meningen over het nut van Dark Mode verdeeld zijn, wordt de toepassing wel steeds meer omarmd door grote aanbieders. Dark Mode gaat al een aantal jaar mee, maar ‘pas’ in 2019 ging bijvoorbeeld de donkere modus van Outlook live. Hiermee gaan de grootste spelers op de inbox-markt al mee met de trend: Apple Mail, Gmail en Outlook hebben Dark Mode geadopteerd.<\/p>\n

Voor- en nadelen aan Dark Mode<\/h3>\n

Terwijl je dit artikel leest, stel je jezelf misschien de vraag in hoeverre jouw organisatie rekening moet houden met de invloed van Dark Mode. Al je e-mails aanpassen voor de donkere modus kan namelijk een flinke, tijdrovende klus worden. Om te kunnen bepalen of het voor jouw ontvangers zin heeft om voor Dark Mode te optimaliseren, zetten we hieronder voor- en nadelen aan het gebruik van dark mode op een rijtje:<\/p>\n

Voordelen<\/h4>\n
    \n
  1. Dark Mode bespaart energie op een aantal apparaten met OLED display (Apple\u2019s iPhone XS, XS Max en X, plus een aantal Samsung Galaxy en Google Pixel telefoons en een aantal laptops<\/a>).<\/li>\n
  2. Het contrast bij Dark Mode is voor sommige mensen prettiger dan het normale zwart-op-wit: vooral voor slechtzienden en mensen die gevoelig zijn voor licht (fotofobie<\/a>).<\/li>\n<\/ol>\n

    Nadelen<\/h4>\n
      \n
    1. Donkere modus zou negatieve invloed hebben op performance<\/a> van de gebruiker (vooral in werksituaties een belangrijke graadmeter).<\/li>\n
    2. De weergave in donkere modus zorgt ervoor dat verschillende elementen van een e-mail niet makkelijk te onderscheiden zijn<\/a> van de achtergrond (vooral lastig, wanneer een e-mail belangrijke informatie bevat).<\/li>\n<\/ol>\n

      Per branche kan het effect van Dark Mode dus verschillen. Bestaat je klantenbestand voornamelijk uit B2B-adressen? Dan is de kans dat Dark Mode breed geaccepteerd is kleiner dan wanneer veel B2C ontvangers hun e\u2011mail openen op mobiel.<\/p>\n

      <\/div>\n

      Hoe Dark Mode jouw e-mails be\u00efnvloedt<\/h2>\n

      E-mail rendering is van veel factoren afhankelijk, waaronder Dark Mode. Het aan- of uitschakelen van de donkere modus bepaalt hoe je ontvanger je e-mail leest. Wat het precieze effect van de donkere modus is, is afhankelijk van de ontvangende partij. Zo zit er bijvoorbeeld verschil tussen de donkere modus op web-based client en app-based clients, maar verschillen die ook weer onderling.<\/p>\n

      Wit > Zwart > Wit<\/h3>\n
      \n
      \"\"
      In de web-based client van Gmail is de inbox wel in Dark Mode<\/strong>, maar de e-mail zelf niet<\/em><\/figcaption><\/figure>\n<\/div>\n

      Vrijwel alle ontvangende partijen wisselen automatisch wit en zwart om, afhankelijk van Dark of Light Mode. In Dark Mode is de achtergrond zo donker mogelijk en contrasteert het met witte letters, terwijl het ‘normaal’ in Light Mode andersom is.<\/p>\n

      Een paar partijen hebben echter wel een donkere User Interface <\/strong>(UI), maar hebben geen zwart-wit inversie voor de e-mails zelf, zoals het voorbeeld van de Gmail webmail hiernaast, AOL en Yahoo!-mail. Normaliter, bij de meeste partijen dus, betekent het inschakelen van Dark Mode voor de applicatie of de hele device echter gewoon dat ook het contrast van de e-mail veranderd wordt.<\/p>\n

      Alle blokken in je e-mail die niet voorzien zijn van een kleur (en dus zwart \u00f3f wit zijn) worden daarmee automatisch omgedraaid. Dat betekent dus dat ook alle witruimte tussen de blokken meeveranderd. Dat heeft het volgende effect:<\/p>\n

      \n
      \"\"
      Witruimte in de header en tussen de blokken wordt veranderd in Dark Mode<\/strong><\/em><\/figcaption><\/figure>\n<\/div>\n

      Uit bovenstaand voorbeeld blijkt ook al dat Dark Mode niet alleen effect heeft op zwart en wit in je e-mail. Er wordt verschillend omgegaan met kleuren, maar vaak worden ze donkerder gemaakt. Ook kleurinversie<\/strong> varieert weer per inbox.<\/p>\n

      Kleurenversie<\/h3>\n

      Zoals eerder aangekaart, heeft Dark Mode effect op de kleuren van de interface. Door het reduceren van blauwtonen in buttons, achtergrondkleuren en dergelijke HEX waarden, is het resultaat bij Dark Mode kleurinversie een doffere button of kleur in je e-mail. In bovenstaand voorbeeld is duidelijk dat de blauwe achtergrond donkerder is geworden dan in het origineel, maar dit geldt ook voor andere kleuren in je e-mail.<\/p>\n

      \n

      Omdat een HEX-waarde (bijvoorbeeld ons eigen #41bac3<\/em>) altijd is opgebouwd uit rood-, groen- en blauwtinten, heeft Dark Mode soms ook effect op je oranje button, je groene H1-tekst en je bruine footer.<\/p>\n<\/blockquote>\n

      \n
      \"\"
      Origineel blok uit onze onboardings e-mail in Light Mode<\/strong><\/em><\/figcaption><\/figure>\n<\/div>\n
      \n
      \"\"
      Hetzelfde blok, maar dan in Dark Mode<\/strong><\/em><\/figcaption><\/figure>\n<\/div>\n

      Bovenstaand voorbeeld illustreert de werking van Dark Mode voor zwart versus wit en voor blauwtinten. De roze button daarentegen is niet of nauwelijks veranderd. Dat heeft er mee te maken dat de kleur button ook in donkere modus een rustige uitstraling heeft en dus balanceert op het randje tussen Dark en Light Mode. Daarnaast kan dit ook per e-mail client en operating system veranderen. De ene client verandert w\u00e9l zoveel mogelijk kleuren, terwijl de andere client slechts een gedeelte aanpakt. Hieronder zie je hoe dat verdeeld is:<\/p>\n

      Inversie bij Dark Mode, per grote e-mail client<\/h4>\n
      \n
      \"\"<\/figure>\n<\/div>\n
      <\/div>\n

      Omgaan met Dark Mode als verzender<\/h2>\n

      Als e-mailverzender kan Dark Mode dus best een uitdaging vormen, met drie uitkomsten: Je laat het voor wat het is, je probeert met CSS de donkere modus-code te kraken, of je past je content aan voor Dark Mode gebruikers. Voor de tweede optie is echter geen straight-forward oplossing; CSS aanpassen om de Dark Mode te ‘hacken’<\/a> kent slechts verdeeld succes: Alleen Apple Mail en varianten van Outlook ondersteunen dit. Waar je echter wel rekening mee kunt houden als e-mailverzender, zijn een aantal tips die helpen je e-mails te optimaliseren voor Dark Mode, zonder dat dit effect heeft op je standaard e-mails.<\/p>\n

      Content beter uitlijnen<\/h3>\n

      Door de content in je e-mails iets meer ruimte te geven aan de zijkant, cre\u00eber je in alle gevallen een (beter) leesbare e-mail. Voor kleinere schermen scheelt het dat tekst dan niet tegen de zijkant van het scherm aangeplakt zit, maar in sommige inboxes met Dark Mode is de tekst dan leesbaarder. Dat komt doordat zwarte tekst in normale modus veel witruimte aan de zijkant heeft, maar een groot deel hiervan wordt in donkere modus opgeheven. Hierdoor zit de zwarte tekst snel dicht tegen de donkere achtergrond aan. Met een beetje extra ademruimte vermijd je dat probleem.<\/p>\n

      \n
      \"\"
      In sommige inboxes zorgt Dark Mode voor dit effect, waardoor tekst tegen de rand aan zit<\/em><\/figcaption><\/figure>\n<\/div>\n

      Afbeeldingen zoveel mogelijk .png-formaat<\/h3>\n

      Door zoveel mogelijk afbeeldingen in je e-mail te vervangen door een .png-bestand, verhoog je ook de leesbaarheid van je e-mail. Het is namelijk gek, wanneer je een e-mail opent en je een volledig donkere e-mail ziet met her en der witte vlakken. Met png-afbeeldingen (zonder achtergrond, dus) heb je dat probleem niet. Voor png geldt bovendien dat het zich uitstekend leent voor kleine afbeeldingen, zoals een logo, tekstafbeelding of een thumbnail van een whitepaper (zie voorbeeld).<\/p>\n

      \n
      \"\"
      Het verschil tussen PNG en JPEG, die in Light Mode allebei een witte achtergrond hebben, maar in Dark Mode verschillen<\/em><\/figcaption><\/figure>\n<\/div>\n

      Donkere afbeeldingen subtiel omlijnen<\/h3>\n

      Een andere tip om ervoor te zorgen dat je e-mail nog leesbaar blijft voor je ontvanger, is om donkere afbeeldingen (vaak tekst) dun te omlijnen. Hoewel dit niet de meest favoriete tip is van designers en huisstijlgoeroes, werkt het dun omlijnen wel goed voor je ontvanger. Die kan dan makkelijker onderscheid maken tussen de donkere afbeelding en de donkere achtergrond. Je kunt er natuurlijk in sommige omstandigheden ook voor kiezen om je donkere afbeelding sowieso iets lichter te maken, waardoor die zowel in Dark als Light Mode zichtbaar is.<\/p>\n

      \n
      \"\"<\/figure>\n<\/div>\n

      Geavanceerd: In de e-mail switchen tussen light en dark modus<\/h3>\n

      De vierde manier om je e-mails Dark Mode-proof te krijgen, is wat ingewikkelder. Je kunt namelijk in de e-mail zelf een toggle bouwen (aan\/uit-knop) voor verschillende modi. Zo cre\u00eber je je eigen Dark Mode e-mail. Het voordeel daarvan is dat je volledig zelf in de hand hebt hoe een e-mail vertoond wordt in Dark Mode, omdat de ontvanger de mogelijkheid heeft om jouw design in donkere modus te bekijken. In tegenstelling tot de eerder genoemde designtips, geeft dit dus veel meer vrijheid.<\/p>\n

      Het nadeel aan deze manier van werken, is dat het nog niet helemaal bekend is hoe dit moet. Er bestaat al een dergelijke oplossing voor het in-mail wijzigen van de content voor bijv. slechtzienden (Accessibility Switcher\u2122<\/a>), maar er is nog niet veel mee ge\u00ebxperimenteerd voor Dark Mode, laat staan voor transactionele e-mails. Daarom vergt deze manier van werken meer kennis en kunde van e-mail dan voorgaande tips.<\/p>\n

      Ga je met deze tips aan de slag, dan blijft het altijd belangrijk om te testen.<\/p>\n

      <\/div>\n

      Testen<\/h2>\n

      Wanneer je aan de slag gaat met het optimaliseren van je e-mails voor Dark Mode, wil je er zeker van zijn dat je veranderingen het gewenste effect hebben op Dark Mode en g\u00e9\u00e9n effect hebben op de normale variant. Daarom is het belangrijk om te blijven testen. Dat kun je op twee manieren doen; ofwel door voor jezelf een aantal e\u2011mailadressen aan te maken waarop je test. Aan de hand van dit artikel kun je bepalen welke e-mail clients voor jou relevant zijn.<\/p>\n

      Een andere manier om je e-mails te testen op Dark Mode compatibiliteit is door je e-mails naar een e-mail test tool te sturen, die ze analyseert voor alle bekende e-mail clients. Zo heb je overzicht in alle varianten die van je e\u2011mail gemaakt kunnen worden. Het nadeel dat hier aan kleeft is dat niet alle test tools voldoende functionaliteit hebben om te testen op Dark Mode.<\/p>\n

      <\/div>\n","protected":false},"excerpt":{"rendered":"

      Dark mode heeft een grote impact op de weergave van je e-mails zoals nieuwsbrieven en transactionele berichten.<\/p>\n","protected":false},"author":65,"featured_media":70597,"template":"","cat_industry":[],"cat_topic":[1000],"class_list":["post-67202","blog","type-blog","status-publish","has-post-thumbnail","hentry","cat_topic-email-marketing-nl-nl"],"acf":[],"_links":{"self":[{"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/blog\/67202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/users\/65"}],"version-history":[{"count":2,"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/blog\/67202\/revisions"}],"predecessor-version":[{"id":73188,"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/blog\/67202\/revisions\/73188"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/media\/70597"}],"wp:attachment":[{"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/media?parent=67202"}],"wp:term":[{"taxonomy":"cat_industry","embeddable":true,"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/cat_industry?post=67202"},{"taxonomy":"cat_topic","embeddable":true,"href":"https:\/\/spotler.com\/nl-nl\/wp-json\/wp\/v2\/cat_topic?post=67202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}