Rimuovere gli spazi sotto le immagini in Gmail

Chi utilizza Gmail (ma anche Yahoo e Hotmail) si sarà sicuramente accorto che molte volte sotto alle immagini contenute in un’email vengono inseriti degli spazi che non sono previsti nel design dell’email.

Questo comportamento dell’interfaccia web di Gmail puo’ causare diversi grattacapi a chi fa email marketing, soprattutto se vengono utilizzate immagini scomposte in “pannelli” e affiancate per ricreare l’immagine completa.

Come possiamo risolvere questo problema?

E’ molto semplice, basta inserire in ogni immagine per la quale vogliamo eliminare possibili gap un tag style contenente la direttiva display:block.

style=”display:block;”

Con questo semplice trucco il gap di circa tre pixel sotto le nostre immagini non verrà visualizzato.

Attenzione pero’, è sconsigliabile farlo indiscriminatamente su ogni immagine, ma solo dove è realmente necessario.

Nuovi Template

Questa volta abbiamo creato un template pensato per promuovere 4 prodotti.

4Marketing on The Road

Saremo presenti a due importanti eventi del panorama fieristico italiano! Se ancora non ci conosciamo di persona sarà l’occasione adatta per farlo.
Saremo felici di discutere con te sull’email marketing e le evoluzioni del Web Marketing!

Logo Salone del LibroLogo IBF

Siamo media partner dell’International Book Forum (www.ibf.it), l’evento b2b del Salone Internazionale del Libro di Torino che si tiene dal 10 al 12 maggio al Centro Congressi Lingotto Fiere.

Saranno presenti oltre 700 operatori professionali (editori, agenti letterari e scout di case di produzione cinematografica e televisiva) da circa 20 paesi.

 

Logo DEF

Dal 25 maggio al 2 giugno saremo al Digital Experience Festival

www.digitalfestival.net

alle Officine OGR di Torino.

Un’occasione di aggregazione per stimolare il confronto, promuovere il digitale e, perché no, magari incontrarci “de visu”. Vi aspettiamo!!

 

Mobile revolution

Secondo un report di Return Path (il maggior provider mondiale di certificazioni email) l’utilizzo di mobile device ( smartphone, tablet etc ) per la lettura delle email scavalcherà l’utilizzo del computer entro giugno di questo anno. Questo report è focalizzato principalmente sugli Stati Uniti e i paesi anglosassoni, ma sicuramente anche il nostro Paese seguirà questa tendenza. Basti pensare che l’Italia è il paese europeo con il maggior numero di telefonini in circolazione in rapporto alla popolazione.

Leggi l’articolo originale qui.

Questo trend porterà a una vera e propria rivoluzione nel mondo dell’email marketing, dobbiamo quindi essere pronti e cominciare a pensare di modificare le nostre strategie e i layout delle nostre email.

Può sembrare difficile convertirsi al mobile, ma con alcuni semplici trucchi e considerazioni il passaggio sarà meno traumatico di quanto possiamo pensare.

Certo non dobbiamo partire subito focalizzando tutti i nostri sforzi sul mobile: almeno il 50% degli utenti leggerà ancora la mail con i classici client di posta per pc, quindi non possiamo pensare a un design mirato solamente al mobile. Questo, molto probabilmente, renderebbe la nostra email incomprensibile per Outlook. Meglio evitare anche le tecniche css che permettono di modificare il layout in funzione del device che lo legge. Sono ottime per il web, ma i client di posta sono un mondo a parte, soprattutto per la loro compatibilità col css.

Partiamo quindi dalle basi e cerchiamo di analizzare quello che realmente differenzia desktop e mobile e quali siano i punti chiave sui quali agire.

La prima cosa che salta all’occhio è che la differenza fondamentale tra mobile client e desktop client è la dimensione dello schermo e la sua risoluzione  (mediamente 1280×1024 sul deskop e almeno un lato da 480 pixel per gli smartphone). La seconda è il modo in cui si interagisce coi contenuti: un dito nel caso del mobile, il mouse nel caso del desktop.

Certo sono due mondi completamente diversi, ma valutiamo bene cosa vogliamo e possiamo ottenere senza grossi sforzi.

Inanzitutto vogliamo che la nostra email sia leggibile “comodamente”: in entrambi i casi, il lettore non deve sforzarsi per leggerla. Poi, sarebbe anche bello che l‘aspetto della nostra email rimanesse invariato tra i vari client di lettura. Questo è difficile già tra i vari client per desktop, facile immaginare cosa possa succedere aggiungendo la variabile mobile.

Infine, ma non ultimo, vogliamo che il lettore vada dove lo vogliamo portare: il nostro sito, una landing page, una promozione.

Mettiamo assieme tutte le linee guida fondamentali che abbiamo descritto e cerchiamo quindi di risolverle col minor sforzo possibile!

  1. Differenza di risoluzione: semplice, impostiamo la dimensione massima della larghezza dei nostri contenuti a 480 pixel! In questo modo i contenuti si vedranno bene sul 90% dei client mobili, senza costringere il lettore a scorrere a destra e sinistra ogni volta che legge una riga, mentre sui desktop sarà semplicemente una mail una po’ piu’ stretta e lunga del normale.
  2. Design e interazione: aumentiamo la dimensione dei caratteri e usiamo bottoni per i link in modo che sia facile e immediato attivarli con un dito. Inoltre, è bene collocare i bottoni coi collegamenti sulla sinistra, perché è ergonomicamente piu’ facile raggiungerli col pollice. Per la visualizzazione sui desktop questo non comporta nessun problema.
  3. Comodità di lettura: carattere 14 pixel e un layout su colonna singola. Usando un multicolonna l’utente dovrà, per forza di cose, usare lo zoom per leggere tutto. Inoltre, la colonna singola permette di avere più testo per riga a parità di risoluzione orizzontale. Ricordiamoci sempre che sugli smartphone è molto facile scorrere in alto-basso, mentre lo è meno lateralmente. Sul desktop queste modifiche non comportano difetti.
  4. Uniformità sui client: questo è un discorso molto ampio e difficile, ma le linee guida sono sempre le care vecchie regole di sicurezza: usiamo le tabelle per definire il layout, evitiamo il css3, usiamo gli stili inseriti direttamente dentro ogni singolo elemento html e non nella direttiva style in testa. In questo caso il problema è la gestione dei client destkop, quelli per mobile solitamente non danno problemi.
  5. Call to action: usiamo bottoni di buona dimensione per i link che spicchino come contrasto di colori rispetto al resto dell’email. Colori pastello per lo sfondo e vivi per i link in modo da focalizzare l’attenzione, grazie al contrasto cromatico. Se abbiamo tanti link, sacrifichiamone qualcuno inserendo i bottoni solo per quello o quelli su cui puntiamo maggiormente. La pagina di destinazione deve essere di semplice lettura anche su un dispositivo mobile. Inseriamo ben visibile un numero di telefono, se un utente legge la mail su uno smartphone può trovare più pratico chiamarci direttamente.

Come vedete le reali modifiche da effettuare alle nostre attuali campagne non sono molte, ma ci permettono di gestire meglio anche gli utenti che leggono le email su dispositivi mobili.