Tryb ciemny dla poczty e-mail zyskuje na popularności… Oto, jak go wspierać
Tryb ciemny zmniejsza zużycie energii ekranu i zwiększa ostrość. Niektórzy użytkownicy twierdzą również, że odczuwają mniejsze zmęczenie oczu, ale to prawda został przesłuchany.
Popularność trybu ciemnego stale rośnie. Tryb ciemny jest teraz dostępny w systemach macOS, iOS, Android i wielu aplikacjach, w tym Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail i Reddit. Jednak nie zawsze istnieje pełne wsparcie dla każdego z nich. Nieczęsto zdarza się postęp w technologii poczty elektronicznej, miło więc widzieć przyjęcie obsługi trybu ciemnego również w poczcie elektronicznej.
W sierpniu 28 r. zaobserwowaliśmy, że 2021% użytkowników korzystało z trybu ciemnego. Do sierpnia 2022 r. liczba ta wzrosła do prawie 34%.
Lakmus
Zrozumienie najlepszych praktyk, kodu do wdrożenia i obsługi klienta ma kluczowe znaczenie dla powodzenia wdrożenia trybu ciemnego. Z tego powodu zespół Uplers opublikował ten przewodnik po trybie ciemnym wsparcie emailowe.
Ostatnio, DK New Media opracował szablon Salesforce Marketing Cloud dla klienta, który zawierał tryb ciemny, radykalnie kontrastujący z sekcjami wiadomości e-mail wyświetlanych w kliencie poczty e-mail. Jest to wysiłek, który może zwiększyć zaangażowanie i współczynnik klikalności Twoich subskrybentów.
Kod e-mail trybu ciemnego
Krok 1: Dołącz metadane, aby włączyć tryb ciemny w klientach poczty e-mail – Pierwszym krokiem jest włączenie trybu ciemnego w e-mailu dla subskrybentów z włączonymi ustawieniami trybu ciemnego. Możesz dołączyć te metadane do pliku etykietka.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Krok 2: Uwzględnij style trybu ciemnego dla @media (preferuje schemat kolorów: ciemny) - Napisz zapytanie o media w swoim pliku embedded tags to customize the dark mode styles in Apple Mail, iOS, Outlook.
com, Outlook 2019 (macOS) i aplikacja Outlook (iOS). Jeśli nie chcesz, aby w Twojej wiadomości e-mail znajdowało się logo z zarysem, możesz użyć .dark-img
i .light-img
klas, jak pokazano poniżej.
@media (prefers-color-scheme: dark ) {
.dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
.light-mode-image { display:none; display:none !important; }
}
Krok 3: Użyj przedrostka [data-ogsc], aby powielić style trybu ciemnego - Dołącz te kody, aby wiadomość e-mail była zgodna z trybem ciemnym w aplikacji Outlook dla systemu Android.
[data-ogsc] .light-mode-image { display:none; display:none !important; }
[data-ogsc] .dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
Krok 3: Dołącz tylko style trybu ciemnego do kodu HTML treści - Twoje tagi HTML muszą mieć prawidłowe klasy trybu ciemnego.
<!-- Logo Section -->
<a href="http://email-uplers.com/" target="_blank" style="text-decoration: none;"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-black.png" width="170" alt="Uplers" style="color: #333333; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" class="light-mode-image"/>
<!-- This is the hidden Logo for dark mode with MSO conditional/Ghost Code --> <!--[if !mso]><! --><div class="dark-mode-image" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="center"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-white.png" width="170" alt="Uplers" style="color: #f1f1f1; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" />
</div><!--<![endif]-->
</a>
<!-- //Logo Section -->
E-mail Wskazówki dotyczące trybu ciemnego i dodatkowe zasoby
Pracowałem nad Martech Zone codzienne i cotygodniowe biuletyny obsługujące tryb ciemny… pamiętaj subskrybuj tutaj. Podobnie jak w przypadku większości kodowania wiadomości e-mail, nie jest to proste ze względu na różnych klientów poczty e-mail i ich zastrzeżone metodologie kodowania. Jednym z problemów, na który natknąłem się, były wyjątki… na przykład chcesz mieć biały tekst na przycisku niezależnie od trybu ciemnego. Ilość kodu jest trochę absurdalna… Musiałem zrobić następujące wyjątki:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; }
Dodatkowe zasoby:
- Lakmus - ostateczny przewodnik po trybie ciemnym dla sprzedawców poczty e-mail.
- CampaignMonitor – przewodnik programisty po trybie ciemnym dla poczty elektronicznej.
Jeśli chcesz, aby Twoje szablony e-maili zostały przekonwertowane do obsługi trybu ciemnego, nie wahaj się z nami skontaktować DK New Media.