Nástroje & Platformy

Optimalizace pro tmavý režim

Úprava designu e-mailu tak, aby dobře vypadal i v tmavém režimu klienta nebo mobilní aplikace

(Dark Mode Optimization)

Co je Optimalizace pro tmavý režim

Optimalizace pro tmavý režim je úprava e-mailu (a stejně tak webu) tak, aby zůstal čitelný ve chvíli, kdy má příjemce zapnuté tmavé zobrazení. Háček je v tom, že jednotné pravidlo neexistuje. Někde se přebarví jen pozadí, jinde i text, a část poštovních klientů sáhne dokonce na obrázky.

Co se rozbije nejčastěji

Logo uložené jako PNG s bílým pozadím. Na světlé šabloně ho od zbytku zprávy nerozeznáte, na tmavé z něj bude svítící obdélník uprostřed e-mailu. Druhá klasika je tmavě šedý text, který grafik zvolil místo černé: pozadí ztmavne, písmo zůstane, a příjemce kouká na prázdné místo. Pozor si dejte i na tlačítka. Bílý popisek na barevné ploše projde skoro vždycky, obrácená kombinace ne.

Zkušební zpráva na Gmail a iCloud

Netestuju to v editoru, ale na telefonu. Odešlu si zkušební zprávu na Gmail a na iCloud, u obou přepnu systém do tmavého režimu a projedu šablonu očima. Trvá to pár minut a odhalí to víc než jakýkoli náhled v rozesílacím nástroji. Když stavím šablonu od začátku, řeším logo hned na začátku: průhledné pozadí a varianta, která drží na světlém i tmavém podkladu. Ušetří to pozdější dohady o tom, čí je to vlastně chyba.

Časté otázky

Dá se tmavý režim v e-mailu vypnout?

Spolehlivě ne. Existují meta značky a vlastnosti v CSS, kterými dáte klientovi najevo, že šablonu máte ošetřenou, jenže část klientů si barvy převrátí stejně. Bezpečnější je navrhnout e-mail tak, aby snesl obě varianty.

Proč mi v tmavém režimu zmizel text?

Nejspíš byl v tmavé barvě, kterou poštovní klient nepřebarvil, zatímco pozadí ztmavil. Zkontrolujte odstíny šedé v patičce a v drobných poznámkách pod tlačítky, tam se to stává nejčastěji.

Stačí použít průhledné PNG?

U loga to pomůže, ale samo o sobě nestačí. Pokud je logo tmavé, na tmavém pozadí splyne. Průhlednost proto kombinujte se světlou variantou loga nebo s jemným obrysem.