Dark mode, així es veuen els teus emails

• Què és el “mode fosc”
• Per què els usuaris utilitzen el “mode fosc”
• Lectors de correu que suporten aquesta opció
• Com apliquen els lectors el “dark mode” als meus emails
  • Sense canvis en colors
  • Inversió parcial de colors
  • Inversió total de colors
  • Suport de mode fosc per lector de correu
• Consells per a optimitzar els teus emails per a dark mode
  • Testar el disseny en mode fosc i mode clar
  • Utilitza imatges amb fons transparent
  • Afegeix un contorn blanc a icones i textes de color negre

Què és el “mode fosc”

El dark mode, night mode o mode fosc, és un esquema de color que s'aplica als lectors de correu i que consisteix a utilitzar colors clars per a icones, elements de la interfície d'usuari i tipografies, sobre fons de colors foscos. És una opció d'accessibilitat disponible tant en gestors de correu com en sistemes operatius i aplicacions.

Per què els usuaris utilitzen el “mode fosc”

El mode fosc o dark mode, és una tendència en auge per múltiples raons:

• Redueix la fatiga visual: Els textos en colors clars sobre fons fosc, sobretot en entorns amb poca llum, fan que l'usuari experimenti menys fatiga visual.
• Estalvi d'energia: En reduir la lluentor de la pantalla, la vida útil de la bateria és major.
• Llegibilitat: Els textos són més fàcils de llegir per a molts usuaris.
• Preferències: Molts usuaris simplement prefereixen utilitzar interfícies amb colors foscos.

Lectors de correu que suporten aquesta opció

Els usuaris poden triar utilitzar el mode fosc en els següents lectors de correu:

• Aplicacions mòbils
  • Apple Mail
  • Gmail app (Android 10, iOs 13)
  • Outlook app (Android, iOs)
  • Yahoo app (Android, iOs)
• Aplicacions d’escriptori
  • Apple mail (mac OS)
  • Outlook 2019 (mac OS, windows)
  • Windows 10 Mail
  • Mozilla Thunderbird
• Webmail
  • Gmail
  • Outlook.com
  • Yahoo! Mail
  • Zoho Mail
  • AOL

Com apliquen els lectors el “dark mode” als meus emails

No tots els lectors apliquen el mode fosc de la mateixa manera: uns només canvien la interfície d'usuari però no modifiquen els colors dels nostres emails, alguns inverteixen parcialment els colors i altres, els modifiquen per complet.

Sense canvis en colors

Alguns lectors com Gmail, Yahoo mail i Apple mail només canvien els colors de la seva interfície en aplicar el mode fosc. Això significa que el dark mode no afecta a com es renderitza el nostre email i es visualitzarà exactament com és.

Aquí teniu un exemple amb Gmail: El disseny del nostre email es conserva, sigui com sigui la manera que s'utilitzi:

Inversió parcial de colors

En alguns navegadors el mode fosc només detecta les àrees del teu email que utilitzen fons clars i inverteix els colors de fons a fosc i els textos a colors clars. Les àrees que utilitzen fons foscos no es canvien. La resta d'elements, tampoc.

Aquest és el cas per exemple d'Outlook.com. Si us fixeu, veureu que la vora del botó de color negre l'ha mantingut i no ha fet cap canvi en els fons foscos:

Inversió total de colors

Altres lectors de correu, com Gmail per a iOS o Zoho mail, inverteixen tots els colors. És a dir, no sols canvien els fons clars a fosc, sinó els foscos a clars. Aquest esquema de color és el que aplica canvis més radicals al disseny del nostre email.

Suport de mode fosc per lector de correu

A continuació, us mostrem una taula de com actua cada lector de correu en aplicar el mode fosc. Aquesta taula pot anar canviant en el temps, ja que molts lectors com Gmail, utilitzen el feedback dels usuaris per a aplicar millores al seu tema dark mode.

Consells per a optimitzar els teus emails per a dark mode

No tots els lectors utilitzen el mateix esquema de color quan l'usuari treballa amb el dark mode actiu. És a dir, els colors que utilitza cada lector per a substituir els originals difereixen l'un dels altres. Per a evitar que això succeeixi, podem especificar en l'html com volem que els nostres emails siguin renderitzats en mode fosc, però no tots els lectors permeten indicar-ho (per exemple, Gmail no ho accepta).

Si tenim coneixements d'html, podem utilitzar aquests dos mètodes per a indicar al lector com ha de mostrar el nostre email:

@mitjana (prefers-color-*scheme: dark)

[data-ogsc] i/o [data-ogsb] , per a Outlook app (Android)

No obstant això, hi ha una sèrie de tècniques que podem aplicar als nostres emails perquè es visualitzin correctament en mode fosc sense necessitat de modificar l'html.

Testar el disseny en mode fosc i mode clar

Testa la teva campanya per a assegurar-te que el teu disseny i la llegibilitat del contingut no es veu afectada en cas que l'usuari tingui el mode fosc activa. Com hem comentat, cada lector aplica el seu propi esquema de color, per la qual cosa és recomanable testar el nostre email en els lectors més populars per a veure el resultat en cadascun d'ells.

Utilitza imatges amb fons transparent

Si utilitzes imatges amb fons transparent, en invertir-se els colors amb la manera dark mode, el disseny del teu butlletí es veurà més uniforme i no tindrà una afectació tan visible.

En la següent imatge pots veure la diferència entre usar el logotip amb i sense fons:

Afegeix un contorn blanc a icones i textos de color negre

Si utilitzem icones o textos en imatge de color negre, aquests no es veuran en el mode fosc. Per a evitar-ho, afegeix una vora de color blanc. En mode “normal” no s'apreciarà i en mode fosc es visualitzaran correctament.

Els clients de correu estan constantment canviant, sobretot en el que al dark mode es refereix, aplicant millores i modificacions en els seus esquemes de color per a millorar l'experiència de l'usuari que utilitza aquesta manera de visualització dels seus correus electrònics. Per aquesta raó, és imperatiu testar els nostres emails per a assegurar-nos que es renderitzessin correctament en aquesta manera en els lectors més populars.