Di questi tempi parlare di tabelle e html insieme potrebbe risultare un oltraggio alle leggi cosmiche che regolano il web.
HTML5, CSS3, effetti 3D e transizioni di ogni genere sono ormai all’ordine del giorno e, seppur questo stia a mio avviso portando all’omicidio degli standard web, non è difficile pensare che presto saranno entrati nelle abitudini di webdesigner e front-end developer di tutto il mondo.
Per qualcuno ancora alle prime armi, però, potrebbe suonar strano sapere che occorrerà per un attimo accantonare anni ed anni di progressi fatti per poter procedere nella realizzazione di una DEM affinchè essa risulti visibile correttamente da tutti i software (online o offline) di gestione della posta elettronica.
#1 Email semplici e leggere
Un’email HTML non è un sito web. E’ bene partire sempre da questo semplice presupposto. Tentare di inserire infatti troppi elementi e diversificati, soprattutto in termini di regole CSS, rischia di far visualizzare infatti risultati molto differenti nei vari client-mail. Quindi meglio prevenire e procedere con template semplici e veloci da caricare.
#2 Non fare abuso di immagini
Un’immagine vale più di mille parole, ma può anche richiedere molto tempo per essere caricata, soprattutto di questi tempi in cui, sempre più facilmente, la posta si visualizza da dispositivi mobili. Questo rischia di far sì che l’utente cestini immediatamente la mail. Inoltre, utilizzare solo immagini, aumenta il rischio che venga considerata spazzatura dai filtri spam. Meglio prevenire…
#3 Lavora con le tabelle
La maggior parte dei client di posta gestiscono i CSS peggio di Internet Explorer 6, quindi vietato utilizzare qualsiasi regola moderna. Occorre fare un salto nel passato decennale ed utilizzare le tabelle. Tra l’altro, è sempre possibile utilizzare software come Dreamweaver (che fa la conversione automatica da div assoluti a celle) o Fireworks (che permette di esportare le “slice” come tabelle) per velocizzare il processo.
#4 Utilizza immagini caricate sul tuo server
Non linkare immagini prese da molte fonti. Rischi infatti di allungare i tempi di caricamento all’inverosimile. Usa invece percorsi assoluti ed immagini, ben organizzate in cartelle, prese dal tuo server:
<img src="https://www.webhouseit.com/images/immagine.jpg" alt="un prodotto" />
#5 Scrivi il CSS inline e usa gli attributi html
Dal momento che il supporto per i CSS è molto scarso nei client di posta elettronica, sarà fondamentale non linkare CSS esterni. Utilizza invece dichiarazioni inline, specifiche per l’elemento del DOM che stai considerando.
<p style="background:#069; color: #fff;">Un background ed un testo</p>
E’ anche possibile utilizzare le vecchie regole di progettazione arrivando ad utilizzare attributi come bgcolor, font, color, direttamente nei tag html. Un orrore? Sì, eppure molto efficace per una newsletter “compatible” al 100%.
<body bgcolor="#069">
#6 Verifica che l’email si veda correttamente nei vari client
Come in fase di realizzazione di un sito web fai un controllo multi-browser, altrettanto occorre fare con i client di posta. Indicativamente non dovrebbe mai mancare il supporto per Gmail, Yahoo mail, Mozilla Thunderbird, Apple Mail e Outlook. Di seguito un link da consultare per vedere quali proprietà sono supportate dai vari client di posta: http://www.campaignmonitor.com/css/
#7 Utilizza Google Analytics per tracciare le conversioni
Inviare una newsletter, magari pubblicitaria, senza assicurarsi di quanti click riceva, potrebbe essere uno spreco di energie. Se non abbiamo grandi esigenze, possiamo tranquillamente utilizzare google analytics aggiungendo all’url dei parametri che ci permetteranno di rilevare le provenienze ad una pagina e le azioni effettuate. Google offre un semplice strumento per generare questi url: http://support.google.com/analytics/bin/answer.py?hl=en&answer=1033867.
#8 Suddividi la complessità
Invece di strutturare tabelle con colonne a misura dichiarata e rowspan o colspan precisi è preferibile annidare ulterori tabelle. E aggiungo: se devi distanziare contenuti non fare colonne vuote con width ma inserisci un gif trasparente della distanza che vuoi creare. Queste nefandezze rendono la strutttura piú solida sui browser di posta e sulle webmail. (ndDZ)
E tu quali accorgimenti utilizzi?
Ispirato a: http://www.catswhocode.com/blog/best-practices-for-coding-html-emails
