Stále viac používateľov číta e-maily v tmavom režime. Ak sa dizajn neprispôsobí, texty a obrázky môžu byť ťažko čitateľné alebo dokonca neviditeľné. Optimalizácia pre tmavý režim preto nie je len trend, ale aj spôsob, ako udržať vysokú čitateľnosť a dôveryhodnosť komunikácie.
Odporúča sa používať transparentné PNG obrázky a vyhýbať sa pevne nastaveným farbám pozadia, ktoré sa v tmavom režime môžu prefarbiť. Text by mal mať dostatočný kontrast – ideálne biela alebo svetlá farba na tmavom podklade, prípadne tmavý text na svetlom, podľa nastavenia používateľa. Vhodné je otestovať e-mail vo viacerých klientoch (Gmail, Outlook, Apple Mail), pretože každý z nich spracúva tmavý režim trochu inak.
Pri návrhu dizajnu e-mailu je dobré myslieť aj na jednoduchú štruktúru a čitateľné písmo. Príliš komplikované grafické prvky sa v tmavom režime môžu stratiť. Stabilná kombinácia farieb a správne kontrasty zaručia, že e-mail bude vyzerať profesionálne a čitateľne v každom režime.
My v Consultee optimalizujeme e-mailové kampane pre všetky zariadenia a prostredia. Pomáhame e-shopom aj iným webom, aby ich správy nestrácali účinnosť ani pri zmenách zobrazenia. Vďaka testovaniu a prispôsobeniu dizajnu pre tmavý režim dokážeme zvýšiť zapojenie a spokojnosť odberateľov.
Rýchly checklist: „Ako optimalizovať e-maily pre tmavý režim?“
-
Nastavte farby textu aj pozadia na každom hlavnom kontajneri (nie iba globálne).
-
Používajte kontrast ≥ 4.5:1; vyhnite sa čistej #000 a #fff (voľte radšej #111–#121 a #f5f5f5–#fafafa).
-
Logo v dvoch verziách (svetlé/tmavé) + 1px outline alebo tieň pre čitateľnosť na oboch pozadiach.
-
Transparentné PNG/SVG; neuzamykajte farbu pozadia priamo do obrázka.
-
Tlačidlá: okrem pozadia definujte aj border a text-color, aby ostali viditeľné po invertovaní.
-
Odkazy a ikonky majú mať explicitné farby (a fokus/hover stav), nie „inherit“.
-
Nepíšte dôležitý text do obrázkov; vždy ALT text a dostatočná veľkosť písma (min. 14–16 px).
-
Tabuľky a oddelovače: používajte viditeľné borders (napr. 1px solid rgba(255,255,255,.12) v tmavom).
-
Preferujte systémové farby (neutral/gray škála), znižuje riziko neželaného invertovania.
-
Testujte v klientoch: Apple Mail/iOS (má „prefers-color-scheme“), Gmail (web/app), Outlook (desktop + mobil).
-
Fallback pre obrázky na tmavom pozadí: pridajte svetlý padding alebo filigránový panel pod obrázok.
-
Inline CSS + bezpečné HTML; vyhýbajte sa experimentálnym CSS, ktoré e-mail klienti stripujú.
-
(Voliteľné) Dark-mode cielenie pre podporované klienty:
-
@media (prefers-color-scheme: dark) { ... }(Apple Mail/iOS) -
[data-ogsc] ...pre niektoré Outlook/Android appky
-
Komentáre
Zverejnenie komentára