24 Mar 2009

Adnkronos: due passi avanti e due indietro.

Adnkronos logoTra il 16 e il 17 marzo Adnkronos ha modificato il layout della propria newsletter.

A prima vista ho apprezzato l'eliminazione di moltissimi elementi grafici, la scelta di semplice testo con stile per l'intestazione e il menu "compatto" ma ben visibile.

Sempre da una prima occhiata si nota però l'allargamento della newsletter che passa dai 590 pixel precedenti ai 750 della nuova versione. Non è questione di preferenze, se la newsletter è più larga di 550 pixel (e quindi era già troppo larga la precedente) per molti sarà tagliata e dovrà essere utilizzata la barra di scorrimento orizzontale, che sappiamo essere uno degli strumenti d'interfaccia meno usato dagli utenti. Se non altro, il nuovo layout è composto di due colonne e quella principale ne occupa 500.

Questo è un esempio di come un utente alice vedeva la vecchia newsletter:

Email preview Alice

Questa, invece, l'anteprima della nuova newsletter su outlook 2007:

Outlook 2007 email preview

La scelta di eliminare molti degli elementi grafici "allegati" ha ridotto la pesantezza totale di 4 volte: da 100kb a 25kb. Purtroppo, delle due immagini rimanenti, è stato comunque scelto di mantenere l'immagine dell'articolo principale come allegato, scelta che non condivido e che approfondirò in un articolo successivo.

L'inserimento dell'allegato "inline", inoltre, è stato fatto in maniera errata. Un "banale" errore per il quale l'immagine allegata è stata inserta con un Content-Disposition: Attachment al posto di Content-Disposition: Inline fa si che l'immagine non venga mostrata effettivamente "al suo posto" con parecchie piattaforme. Per citarne alcune la webmail di Alice, quella di Libero e Thunderbird (che insieme rappresentano almeno il 30% di ciò che viene utilizzato dagli utenti consumer italiani) visualizzano un bel rettangolo bianco. Ecco, ad esempio, come la vede Thunderbird dopo aver scelto di vedere le immagini:

anteprima Thunderbird

Come si può notare, il fatto che non sia stato correttamente specificato l'"inline" fa si che l'immagine venga vista come allegato e che il riquadro degli allegati riduca ulteriormente lo spazio disponibile all'anteprima della mail: ricordiamoci che ciò che l'utente vede nell'anteprima è la nostra seconda arma (dopo al subject) per spingerlo a fruire della nostra email.

Tornando ai miglioramenti, invece, questa è l'anteprima su Hotmail di entrambe le versioni, prima che venga scelto di mostrare le immagini:

Email Hotmail

e la nuova:

Adnkronos nuovo layout su hotmail

Il minor numero di allegati e la scelta dell'uso del testo al posto del logo grafico rendono decisamente più "presentabile" e "riconoscibile" l'intestazione. Da notare come la presenza di 1 allegato vada a togliere comunque spazio prezioso all'anteprima.

Il mancato test del nuovo stile con le webmail più utilizzate lascia irrisolto un problema a mio parere non trascurabile: link bianchi che diventano blu e di conseguenza scarsamente leggibili. Ecco come viene visto il menu principale sulle webmail di Gmail, Alice e Libero:

Anteprima menu blu su Gmail

Libero:

Anteprima menu blu su Libero

ed Alice:

Anteprima menu blu su Alice

Il suggerimento in questo caso, per ottenere un risultato migliore, è quello di utilizzare, per lo sfondo scuro del menu, una tecnica che venga applicata solo da quei client che supportano correttamente anche lo stile del link. In questo caso è stato usato un attributo HTML (BGCOLOR) per il colore di sfondo, supportatissimo da tutti i client, mentre per il colore del link è stata usato una classe CSS, molto meno supportata, con la "prevedibile" conseguenza (a patto che si fosse letto Webmail Marketing, questione di stile, con particolare attenzione alla colonna <style>).

Non dico che si debba testare il risultato su decine o centinaia di piattaforme, ma le webmail di Alice e Libero non si possono trascurare se si ha un pubblico italiano.

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.