Co je dark mode
Dark mode (česky tmavý režim) je zobrazovací nastavení, při kterém zařízení nebo aplikace používá tmavé pozadí a světlý text místo obvyklé světlé kombinace. Populární je zejména na mobilních zařízeních. Uživatelé ho zapínají kvůli šetření baterie, pohodlí očí nebo estetické preferenci.
V kontextu e-mailingu nastává problém ve chvíli, kdy e-mailový klient dark mode aplikuje na příchozí zprávy. Výsledek závisí na konkrétním klientu a chování se liší u Gmailu, Apple Mailu, Outlooku nebo Samsung Mailu. Někteří klienti barvy pouze invertují, jiní mění jen část e-mailu, další nezasahují vůbec.
Jak dark mode ovlivňuje e-maily
Každý e-mailový klient se k dark mode staví jinak.
Obecně lze rozlišit tři přístupy:
- Žádná změna – klient dark mode na e-maily neaplikuje a zobrazí je přesně tak, jak byly navrženy.
- Částečná změna – klient změní barvu pozadí, ale zachová barvy textu a obrázků.
- Plná inverze – klient invertuje všechny barvy, včetně textu, tlačítek a grafiky.
Právě plná nebo částečná inverze může způsobit nečitelný text (například světlý text na světlém pozadí), znehodnocenou grafiku nebo neviditelné logo.
Proč na dark mode myslet při tvorbě šablon
Podíl uživatelů, kteří používají dark mode, dlouhodobě roste. Podle dostupných dat ho aktivně využívá přes třetinu uživatelů mobilních zařízení. Ignorovat ho při návrhu e-mailových šablon znamená riskovat, že značná část příjemců dostane vizuálně rozbitý e-mail. Přitom základní opatření nejsou složitá a výrazně snižují riziko problémů.
Jak navrhovat šablony s ohledem na dark mode
Několik osvědčených zásad, které snižují riziko problémů:
- Loga a ikony s průhledným pozadím PNG soubory s průhledným pozadím se při inverzi zobrazí s tmavým obrysem nebo zmizí úplně, pokud jsou světlé barvy na světlém pozadí. Řešením je přidat loga na barevný nebo tmavý podkladový blok, nebo připravit variantu loga vhodnou pro tmavé pozadí.
- Explicitní definice barev textu Pokud barva textu není v HTML šabloně explicitně definována, e-mailový klient ji může změnit podle vlastního uvážení. Vždy nastavujte barvu textu přímo v kódu šablony.
- Tlačítka s pevnými barvami Tlačítka s průhledným pozadím nebo barvou definovanou pouze přes CSS třídu jsou náchylná na inverzi. Používejte inline styly s explicitní barvou pozadí i textu.
- Testování před odesláním Dark mode se chová různě v různých klientech. To, co funguje v Gmailu, nemusí fungovat v Outlooku. Testování v reálných prostředích nebo nástrojích pro preview e-mailů je nezbytné.
Dark mode a e-mailové šablony v Leadhubu
V Leadhubu vytváříte e-mailové šablony v editoru, kde můžete pracovat s barvami, bloky a styly přímo. Pro maximální kompatibilitu s dark mode doporučujeme vždy definovat barvy textu a pozadí explicitně a loga umísťovat na barevný blok.
