26 Mar 2009

Testo bianco su sfondo nero: attenzione alle webmail!

Poco più di un mese fa portavo qualche esempio in cui il nero su bianco poteva creare qualche grattacapo nella creazione di una newsletter. Questa volta, complici due famose case automobilistiche, vi presento il problema opposto.

Comincio con Mazda, che fortunatamente ha rinunciato all'utilizzo dello scorrimento orizzontale per un più tradizionale layout, ma, nell'utilizzare testo chiaro su sfondo nero non ha considerato 2 delle webmail più utilizzate in italia: quella di Alice e la webmail classica di Libero.

A lato potete vedere in alto come la newsletter viene vista dalla maggior parte dei client mentre sotto come viene invece visualizzata da queste due webmail.

Il problema sta nel fatto che il colore di sfondo è stato assegnato a nero tramite l'attributo BGCOLOR, supportato da quasi tutti i client e le webmail note, ma il colore del testo è stato impostato utilizzando la proprietà CSS "color" inserita inline tramite l'attributo STYLE.

L'attributo STYLE, come si può evincere da questa preziosa tabella, viene eliminato dalle due webmail citate (oltre che dalla poco utilizzata vecchia versione di PosteMail).

Per ovviare a questo problema possiamo procedere in due modi:

1) Impostare anche il colore di sfondo tramite STYLE="background-color: black;" così che venga ignorato anche questo da Libero e Alice fornendo quindi una versione nero su bianco ma comunque leggibile.

2) Impostare il colore del testo anche tramite l'obsoleto tag "FONT": <FONT COLOR="white"> che viene correttamente interpretato da tutti i client da me testati.

Ho recentemente riportato una mia statistica secondo la quale le webmail di libero e alice sono utilizzate rispettivamente dal 15% e dal 8% degli utenti consumer italiani. Dal precedente report non possiamo sapere esattamente quanti utilizzino le versioni nuove e quanti utilizzino le versioni precedenti delle webmail in questione ma a memoria la versione "classica" di libero viene usata da metà dei suoi utenti. E' ipotizzabile quindi che un 10% del totale degli italiani abbia visto il testo nero su nero.

Per pura casualità lo stesso giorno ho ricevuto anche una DEM di Mercedes Benz che utilizza il bianco su nero come la concorrente giapponese.

In questo caso l'errore è molto più subdolo e assolutamente perdonabile, ma ci tengo ad evidenziarlo per fare capire quanto le webmail possano "remare contro" a chi si cimenti nella creazione di newsletter.

La seconda immagine riporta come venga visualizzata l'email da un utente della webmail di interfree. Non ho dati aggiornati sulla sua diffusione ma penso non si avvicini nemmeno all'1%.

Come potete notare in questo caso il testo è effettivamente bianco ma ironicamente è lo sfondo questa volta a non essere venuto nero, rendendo di fatto trasparente il testo.

In questo caso il testo è stato dichiarato bianco tramite il <FONT COLOR="white", come suggerivo poche righe sopra, e quindi Alice e Libero visualizzano correttamente il colore, ma interfree, purtroppo, aggiunge uno stile che dichiara tutte le celle delle tabelle bianche. La newsletter di Mercedes include un'unica tabella con sfondo nero (metodo consigliato per impostare uno sfondo colorato ad una newsletter).

Per evitare che il foglio di stile di interfree interferisca con la newsletter si deve inserire l'attributo BGCOLOR anche in tutte le celle (<TD>) della tabella e non solo nel tag principale (<TABLE>).

Aggiungi un commento

Filtered HTML

  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.

Plain text

  • Nessun tag HTML consentito.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Linee e paragrafi vanno a capo automaticamente.