Donkere modus voor e-mailinhoud dark-mode
Donkere wijze staat een ondersteunende e-mailcliënt of app toe om e-mail met donkere achtergronden en lichtere kleuren voor tekst, knopen, en andere visuele elementen te tonen. Dit type beeldscherm kan de oogdruk verminderen, de gebruiksduur van de batterij verminderen en de leesbaarheid in omgevingen met weinig licht verbeteren voor een comfortabeler kijkervaring. Het is nu een belangrijke overweging in het moderne e-mailontwerp om ervoor te zorgen dat de inhoud leesbaar blijft en visueel aantrekkelijk voor alle gebruikers is, omdat dit een groeiende trend is voor grote besturingssystemen en toepassingen.
Aangezien u uw e-mailinhoud in de Journey Optimizer B2B Edition visuele ontwerpruimte creeert, kunt u op de _ Dark mode _mening schakelen. In deze weergave kunt u ook specifieke aangepaste instellingen definiëren voor ondersteuning van e-mailclients wanneer de donkere modus is ingeschakeld.
Overwegingen voor e-mailclient
Er zijn aanzienlijke verschillen in de manier waarop verschillende e-mailclients en apps de donkere modus toepassen. Daarom is het verstandig voorzichtig te zijn met de verwachtingen voor rendering in de donkere modus. Overweeg de volgende gebruiksgevallen van e-mailclients voordat u de donkere modus gebruikt in de ontwerpruimte van de e-mail:
Sommige e-mailclients ondersteunen deze functie helemaal niet, zoals:
- Yahoo! Mail
- AOL
Als u aangepaste instellingen voor de donkere modus definieert in het e-mailontwerp, kunnen deze e-mailclients geen donkere modus weergeven.
Sommige e-mailclients passen systematisch hun eigen donkere standaardmodus toe op alle ontvangen e-mails. Kleuren, achtergronden, afbeeldingen en andere elementen worden automatisch aangepast op basis van de instellingen in de donkere modus en externe instellingen zijn niet mogelijk. Tot deze clients behoren:
- Gmail (desktopwebmail, iOS, Android™, mobiele webmail)
- Outlook Windows
- Outlook Windows Mail
In dit geval overschrijven de instellingen voor de donkere modus van de client de instellingen voor de aangepaste donkere modus die u definieert in Journey Optimizer B2B Edition
Veel van de populairste e-mailclients bieden de optie om de aangepaste donkere modus te renderen met de query @media (prefers-color-scheme: dark) . Dit is de methode die wordt gebruikt in de e-mailstijlen van Journey Optimizer B2B Edition . Deze lijst met clients bevat:
- Apple Mail macOS
- Apple Mail iOS
- Outlook macOS
- Outlook.com
- Outlook iOS
- Outlook Android™
In dit geval worden de specifieke instellingen die u in Journey Optimizer B2B Edition definieert, gerenderd. Sommige beperkingen kunnen echter van toepassing zijn voor elke e-mailclient. Sommige clients (zoals Apple Mail 16 (macOS 13)) genereren bijvoorbeeld geen donkere modus als de e-mailinhoud afbeeldingen bevat.
Voor optimale resultaten test u de inhoud met de e-mailclients waarop u zich richt. Om een simulatie te zien die zo dicht mogelijk bij het definitieve resultaat voor elke cliënt komt, gebruik de Loodse e-mailtest die integratie teruggeeft in de e-mailontwerpruimte teruggeeft.
Ontwerpen voor donkere modus
Als u uw e-mailinhoud opmaakt in de donkere modus van Journey Optimizer B2B Edition , beschikt de visuele ontwerpruimte over twee typen gereedschappen:
-
Gebruik de voorproeffunctie om het gebrek te herzien donkere wijze die voor de meeste steunende e-mailcliënten teruggeeft.
-
Als u de standaardinstellingen voor het ondersteunen van e-mailclients wilt overschrijven, definieert en past u aangepaste instellingen voor de donkere modus toe op uw e-mailinhoud. Meer informatie
Standaardmodus voor donker voorvertonen preview-dark-mode
-
Open de e-mailinhoud in de ontwerpruimte van de e-mail.
Rechtsboven op het canvas ziet u een lichtdonkere kiezer die de weergave van de inhoud schakelt tussen de lichte (standaard) en donkere modus.
-
Verander de selecteur in Donkere wijze (
Het canvas geeft de inhoud weer met behulp van de standaard donkere modus preview.x
Standaard wordt in de voorvertoning in de donkere modus het kleurenschema
full color inverttoegepast op alle elementen behalve afbeeldingen en pictogrammen. Dit kleurenschema detecteert gebieden met lichte en donkere elementen en keert deze om. Lichte achtergronden worden donker en donkere tekst wordt licht, of donkere achtergronden worden licht en lichte tekst wordt donker.
Aangepaste instellingen voor de donkere modus definiëren custom-dark-mode
Na het schakelen naar de donkere modus kunt u specifieke opmaakelementen van uw inhoud bewerken die alleen worden weergegeven wanneer de donkere modus is ingeschakeld in de e-mailclient van de ontvanger (mits deze functie wordt ondersteund).
De douane donkere wijze het stileren in de e-mailontwerpruimte gebruikt @media (prefers-color-scheme: dark) CSS-query, die detecteert of de e-mailclient is ingesteld op de donkere modus en past het donkere ontwerp toe dat is gedefinieerd in uw e-mail.
Aangepaste instellingen voor de donkere modus definiëren :
-
Indien nodig, verplaats de selecteur naar Donkere wijze (
-
Bewerk alle opmaakkleurkenmerken, zoals tekst, achtergronden of knoppen.
-
Voor de afbeeldingen en pictogrammen definieert u specifieke elementen alleen voor de donkere modus.
U kunt de kleuren van afbeeldingen en pictogrammen niet wijzigen, maar u kunt wel alternatieve elementen definiëren voor de donkere modus. U kunt experimenteren met verschillende kleurcombinaties voor uw pictogrammen of u kunt de kleur en verzadiging van fotografische afbeeldingen aanpassen.
Selecteer een willekeurige afbeelding en schakel over naar Dark mode met de daarvoor bestemde schakeloptie in het deelvenster Settings . Selecteer vervolgens een ander afbeeldingselement.
Zie beeldactiva voor meer informatie over het selecteren van een beeldactiva toevoegen.
-
Selecteer Switch to live view om te controleren hoe uw inhoud op verschillende apparaatgrootten kan worden gerenderd.
Van deze mening, verander de selecteur in Donkere wijze (
note caution CAUTION De live weergave is een algemene voorvertoning die is ontworpen om te vergelijken hoe de rendering er tussen verschillende apparaatgrootten uitziet. De uiteindelijke rendering kan afhankelijk zijn van de e-mailclient van de ontvanger. -
Klik op Simulate Content wanneer de wijzigingen in de donkere modus zijn voltooid.
Met de gereedschappen Voorvertoning en Proofing kunt u het e-mailontwerp testen. Zie Voorproef en test uw e-mailinhoud voor meer informatie.
-
Als u een Litmus Enterprise-account hebt, selecteert u Render email om de uiteindelijke rendering in donkere modus weer te geven voor verschillende e-mailclients in de Litmus.
Zie e-mailteruggeven van de Test met Litmus voor meer informatie.
note caution CAUTION Tijdens simulaties wordt de weergave van e-mails in de donkere modus nauwkeurig afgemeten, maar de werkelijke rendering kan afwijken als gevolg van verschillen in de instellingen van e-mailserviceproviders of apparaten.
Best practices best-practices
Aangezien de donkere wijzetoepassing over belangrijke e-mailcliënten stijgt, is het essentieel om te overwegen hoe uw e-mail in zowel lichte als donkere milieu's teruggeeft - of u douane donkere wijze of niet gebruikt.
In de donkere modus kunt u kleuren, achtergronden en afbeeldingen wijzigen. Soms worden ontwerpkeuzen genegeerd. Volg de volgende aanbevolen procedures om de visuele consistentie, toegankelijkheid en brandintegriteit te garanderen:
Checklist:
- Logo's en pictogrammen opslaan als PNG-bestanden met transparante achtergronden om zichtbare witte vakken in de donkere modus te voorkomen.
- Vermijd afbeeldingen met een hardcodeerde witte of lichte achtergrond.
- Als transparantie geen optie is, plaatst u afbeeldingen op een effen achtergrond in uw ontwerp om ongewenste kleurinversies te voorkomen.
Checklist:
- Zorg voor voldoende contrast tussen tekst en achtergrondkleuren voor leesbaarheid in zowel de lichte als de donkere modus.
- Vertrouw niet alleen op achtergrondkleuren voor essentiële inhoud. Sommige clients overschrijven achtergrondkleuren in de donkere modus, zodat de essentiële informatie nog steeds zichtbaar is.
Checklist:
- Gebruik kleurcombinaties die u gemakkelijk kunt herkennen voor mensen met kleurenblindheid.
- Gebruik een palet met middentonen om contrast tegen zowel lichte als donkere achtergronden te waarborgen.
- Gebruik toegankelijke kleurcombinaties met hoog contrast om de leesbaarheid te verbeteren en aan Web Content Accessibility Guidelines (WCAG) -standaarden te voldoen. Gebruik gereedschappen zoals WebAIM Contrast Checker om het kleurcontrast te controleren.
- Vermijd dunne lettertypen omdat dit van invloed is op de leesbaarheid. Als uw merk een dun lettertype nodig heeft, kunt u het vet in de donkere modus drukken.
- Overslaan puur wit op puur zwart, wat oogdruk kan veroorzaken en automatisch kan worden omgekeerd in sommige e-mailclients.
- Maak toegankelijke fallback-stijlen als de donkere modus niet wordt ondersteund.
Checklist:
- Gebruik de donkere wijzevoorproef in de e-mailontwerpruimte, die omgekeerde kleurenschema's aan vlekkwesties vroeg gebruikt.
- Gebruik een Litmus Enterprise-account met de optie Render email om uw ontwerpen te simuleren voor verschillende grote e-mailclients (zoals Apple Mail, Gmail en Outlook) en om te zien hoe kleuren en afbeeldingen zich gedragen in de donkere modus.