Mail

Chi offre nel proprio sito una newsletter sa bene che spesso il semplice formato testuale non basta, e si rende quindi necessario creare dei template in HTML.
Ma non è tutto oro quel che luccica: se sviluppando per il web ci siamo ormai abituati a impaginare e a realizzare effetti grafici sfruttando le proprietà del CSS, per le e-mail la situazione è un po’ diversa. Il supporto dei client di posta e anche di molte webmail agli standard W3C è spesso lacunoso.

Vediamo dunque alcuni utili consigli per far sì che la nostra newsletter possa essere letta da tutti.

1. HTML “vecchia scuola”
Da bravi web designer, abbiamo ormai imparato a realizzare le nostre pagine facendo a meno delle vecchie tabelle. Nel realizzare un template per una newsletter, sarà bene invece fare qualche passo indietro. Molti client di posta hanno infatti problemi nel gestire il posizionamento dei DIV tramite CSS, quindi è consigliabile andare sul sicuro e utilizzare, se strettamente necessario, le care vecchie tabelle per posizionare gli elementi nella pagina.

2. Usare gli stili in linea
Diversi client di posta tendono ad ignorare il codice contenuto all’interno dei tag <head></head>, compreso quindi il richiamo al vostro foglio di stile. Per ovviare a questo inconveniente potete fare uso degli stili in linea, ovvero inserire il codice del vostro CSS all’interno del template stesso, racchiudendolo tra i tag:

<style type=”text/css”>

[vostro codice]

</style>

Per dei consigli sulle proprietà dei CSS da utilizzare all’interno delle vostre mail potete consultare questo documento.

3. Evitare l’uso di immagini di sfondo
L’uso di immagini di sfondo è sconsigliabile, in quanto molti mail reader hanno problemi nella loro visualizzazione. Consigliabile utilizzare il classico tag “img”.

4. Ricordate che le immagini vengono spesso bloccate dai client di posta
I client di posta, per motivi di sicurezza, tendono in genere a bloccare le immagini. E’ buona norma quindi non abusarne e limitare l’uso delle immagini al vostro logo o a qualche piccolo elemento decorativo; inoltre, visto che il blocco immagini del client non è sempre aggirabile, è consigliabile fare delle prove per verificare la corretta leggibilità della nostra newsletter anche con le immagini disattivate.

5. Usare l’attributo ALT
Questa è una pratica che dovreste aver già fatto vostra nel web, ma diventa ancora più indispensabile nella realizzazione di una newsletter, alla luce di quanto detto nel punto precedente: l’utente che non possa (o non voglia) visualizzare le immagini deve comunque poter leggere un testo sostitutivo.

6. Usare i percorsi assoluti
Raccomandazione forse ovvia, ma nel richiamare immagini dal server è fondamentale ricordarsi di inserire il percorso assoluto del file (es. http://www.cssmagazine.it/immagini/immagine01.jpg) anziché quello relativo (immagini/immagine01.jpg).

7. Considerare le dimensioni
Quando si includono immagini o allegati nelle proprie e-mail, è facile lasciarsi prendere la mano e produrre messaggi di dimensioni eccessive. Gli svantaggi sono diversi: lentezza nello scaricamento per chi non ha a disposizione una connessione veloce, mancata ricezione in caso di casella email con poco spazio disponibile (eventualità rara, viste le dimensioni delle attuali mailbox, ma sempre possibile), possibile riconoscimento come spam da parte del client.
Facciamo delle prove con i diversi formati di compressione (JPG, GIF, PNG) per vedere quali forniscono il migliore rapporto peso/qualità, e utilizziamo quando possibile il contenuto testuale.

8. Evitare componenti Flash e form
Se nel design di un sito questi componenti possono rivelarsi utili per migliorare l’esperienza di navigazione dell’utente, il loro utilizzo all’interno di una e-mail è sconsigliato. E’ sempre meglio inserire un link ad una pagina di registrazione sul server, piuttosto che tentare di inserire la form all’interno dell’email.

9. Utilizzare layout di dimensioni ridotte
Nel web siamo ormai abituati a considerare 1024×768 come risoluzione minima per la quale ottimizzare il nostro layout.
Per le e-mail la situazione è un po’ diversa; sia i client che le webmail tendono a visualizzare, a fianco del messaggio, altri elementi dell’interfaccia (ad esempio l’elenco delle cartelle o dei messaggi in arrivo). Di conseguenza lo spazio per la visualizzazione dell’email sarà abbastanza ridotto. Per questo motivo è consigliabile non superare i 750/800px in larghezza.

Libera traduzione da: Vdot Media



Altri articoli che potrebbero interessarti