Inhoud in de donkere modus beheren dark-mode
Wanneer het ontwerpen van uw e-mails, Journey Optimizer E-mail Designerstaat u toe om aan de Dark mode mening over te schakelen.
In deze donkere wijzemening, kunt u specifieke douanemontages ook bepalen die door de ondersteunende e-mailcliënten zullen worden getoond wanneer hun donkere wijze is.
Wat is de donkere modus? what-is-dark-mode
De manier waarop donkere modus wordt weergegeven in de verschillende e-mailclients is complex. Laten we eerst de donkere modus definiëren.
In de donkere modus kunnen de ondersteunde e-mailclients en apps e-mails weergeven met donkere achtergronden en lichtere kleuren voor tekst, knoppen en andere UI-elementen. Hierdoor kan de belasting van het oog worden verminderd, de levensduur van de batterij worden bespaard en de leesbaarheid in omgevingen met weinig licht worden verbeterd voor een comfortabeler kijkervaring.
Aangezien een groeiende trend over belangrijke werkende systemen en apps , is het een belangrijke overweging in modern e-mailontwerp geworden om ervoor te zorgen dat de inhoud leesbaar blijft en visueel aantrekkelijk voor alle gebruikers.
Guardrails guardrails
De verwachtingen ten aanzien van donkere wijze het teruggeven moeten met voorzichtigheid worden overwogen aangezien de manier het door de verschillende e-mailcliënten wordt toegepast zeer kan variëren.
Voordat u de donkere modus gebruikt in de Journey Optimizer e-mailtoepassing van de Designer, is het van cruciaal belang dat u begrijpt hoe de hoofd-e-mailclient dit verwerkt. Er zijn drie zaken om te onderscheiden:
Clients die de donkere modus niet ondersteunen not-supporting
Sommige e-mailclients ondersteunen deze functie helemaal niet, zoals:
- Yahoo!Mail
- AOL
Ongeacht of u aangepaste instellingen voor de donkere modus definieert in de e-mailclient of niet, deze e-mailclients geven nooit een donkere modus weer.
Clients die hun eigen donkere modus toepassen default-support
Sommige e-mailclients passen stelselmatig hun eigen donkere standaardmodus toe op alle ontvangen e-mailberichten. Kleuren, achtergronden, afbeeldingen, enz. automatisch worden aangepast met de instellingen voor de donkere modus die specifiek zijn voor de e-mailclient. Dit betekent dat er geen externe wijziging mogelijk is.
Deze clients zijn bijvoorbeeld:
- Gmail (desktopwebmail, iOS, Android, mobiele webmail)
- Outlook Windows
- Outlook Windows Mail
Als u in dit geval aangepaste instellingen voor de donkere modus definieert in de Designer-e-mail, worden deze instellingen overschreven door de instellingen van de e-mailclient.
Het is belangrijk om te begrijpen dat deze e-mailcliënten donkere wijze behandelen, maar uw specifiek donkere wijzeontwerp zal niet worden teruggegeven.
Clients die aangepaste donkere modus ondersteunen custom-support
Andere 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 door de Journey Optimizer Email Designer.
Hier volgt een lijst met de belangrijkste clients die deze optie afhandelen:
- Apple Mail macOS
- Apple Mail iOS
- Outloook macOS
- Outlook.com
- Outloook iOS
- Outloook Android
In dit geval moeten de specifieke instellingen die u in de e-mailtoepassing van de Designer definieert, worden weergegeven.
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 er afbeeldingen aanwezig zijn in de e-mailinhoud.
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 E-mail teruggevendeoptie in E-mail Designer.
Donkere modus in de Designer-e-mail dark-mode-email-designer
Wat de donkere modus in de e-mailtoepassing Designer betreft, moet u rekening houden met twee aspecten:
-
U kunt een voorvertoning weergeven van hoe de standaard donkere modus wordt weergegeven in de meeste ondersteunde e-mailclients. Meer informatie
-
Als u de standaardinstellingen voor het ondersteunen van e-mailclients wilt overschrijven, kunt u aangepaste instellingen voor de donkere modus definiëren die van toepassing zijn op de e-mail die u bewerkt. Meer informatie
Standaardmodus voor donker voorvertonen preview-dark-mode
Volg onderstaande stappen om de donkere modus te openen in de E-mail-Designer en een voorbeeld te bekijken van de standaard donkere modusinstellingen.
-
Selecteer de optie Design from scratch op de homepage van Designer via e-mail. Meer informatie
-
Voeg structurenen inhoudcomponentenaan uw inhoud toe.
-
Rechtsboven op het centrale canvas schakelt u de schakeloptie over naar Dark mode .
-
De standaardvoorvertoning in de donkere modus wordt weergegeven.
Standaard wordt in de voorvertoning van de donkere modus van e-mail Designer het kleurschema 'full color invert' toegepast op alle elementen behalve afbeeldingen en pictogrammen.
Het betekent dat gebieden met lichte en donkere elementen worden gedetecteerd en omgekeerd, zodat de lichte achtergronden donker worden en donkere tekst licht, terwijl donkere achtergronden licht worden en lichte tekst donker wordt.
Aangepaste donkere modus definiëren define-custom-dark-mode
Nadat u naar Dark mode hebt overgeschakeld, 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 - op voorwaarde dat deze functie wordt ondersteund.
Als u de aangepaste stijl voor de donkere modus van Designer via e-mail wilt gebruiken, gebruikt Journey Optimizer de @media (prefers-color-scheme: dark) CSS-query, die detecteert of de e-mailclient van de gebruiker is ingesteld op de donkere modus en past het donkere ontwerp toe dat in de e-mail is gedefinieerd.
Volg onderstaande stappen om aangepaste instellingen voor de donkere modus te definiëren.
-
Zorg ervoor dat u overschakelt naar de voorvertoning van Dark mode in de e-mailtoepassing Designer. leer hoe
-
Bewerk alle opmaakkleurkenmerken, zoals tekst, achtergronden, knoppen, enz.
-
U kunt de kleuren van afbeeldingen en pictogrammen niet wijzigen, maar u kunt wel specifieke elementen alleen voor de donkere modus definiëren. Selecteer een afbeelding om dit te doen. Schakel over naar Dark mode met de specifieke schakeloptie in het deelvenster Settings en selecteer een ander element.
-
U kunt op elk gewenst moment Switch to live view gebruiken om te controleren hoe uw inhoud op verschillende apparaatgrootten wordt gerenderd. Selecteer in deze weergave de optie Donkere modus boven op het scherm om een voorvertoning weer te geven van de donkere modusversie van de inhoud op de verschillende apparaten.
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 variëren afhankelijk van de e-mailclient van de ontvanger. -
Als u tevreden bent met de wijzigingen in de donkere modus, klikt u op Simulate Content .
-
Selecteer Render email en verbind met uw rekening van de NLS. U ziet de uiteindelijke donkere modus voor verschillende e-mailclients. Leer meer op E-mail teruggevend.
note warning WARNING Hoewel de simulatie nauwkeurig benadert hoe e-mails worden weergegeven in de donkere modus, kan de werkelijke rendering afwijken als gevolg van verschillen in e-mailserviceproviders of instellingen op apparaatniveau.
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 wijzeof niet gebruikt.
In de donkere modus kunt u kleuren, achtergronden en afbeeldingen wijzigen. Soms worden ontwerpkeuzen genegeerd. Volg de onderstaande aanbevolen procedures om de visuele consistentie, toegankelijkheid en brandintegriteit te garanderen.
optimaliseer uw beelden en logo's
-
Sla logo's en pictogrammen op als PNG's 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.
bekijk uw achtergronden
-
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 belangrijkste gegevens nog steeds zichtbaar zijn.
Ontwerp toegankelijke inhoud op donkere wijze
-
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 te voldoen aan de WCAG-standaarden (Web Content Accessibility Guidelines). Gebruik gereedschappen zoals de Contrast Checker van WebAIM 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, omdat dit oogbelasting kan veroorzaken en door sommige e-mailclients automatisch kan worden omgekeerd.
-
Maak toegankelijke fallback-stijlen als de donkere modus niet wordt ondersteund.
Test uw e-mails op donkere wijzemilieu
-
Gebruik de e-mail Designer donkere wijzevoorproefdie omgekeerde kleurenschema's aan vlekkwesties vroeg gebruikt.
-
Gebruik de E-mail dieoptie teruggeeft die hefboomwerkingen Litmus om uw ontwerpen over belangrijke e-mailcliënten (de Post van Apple, Gmail, Vooruitzichten) te simuleren en te zien hoe de kleuren en de beelden zich op donkere wijze gedragen.