App GMail mobile: 12 cose da sapere per l’email marketing

gmail app mobile

Chi non si è trovato, nel mondo dell’email marketing, a dover affrontare i vari bug con l’App di Gmail su Mobile (android e apple)?
Ecco una guida su come far fronte a questi problemi per avere un layout perfetto della dem per la tua campagna di email marketing.

1. L’App di Gmail non supporta "display: none" ma supporta "display: none !important".

Ciò fa pensare che nulla possa essere nascosto in GMail, ad esempio il codice seguente sarà ignorato:
style=“display:none;”

Altri valori, come ad esempio il codice seguente, sono supportati:
style=“display:none !important;”

Con questo css puoi nascondere gli elementi in Gmail, basta aggiungere l’!important

 

2. Gmail non supporta i CSS incorporati.

Per arginare questo problema bisogna utlizzare i CSS in linea.

Potreste avere anche problemi con font, colore, carattere, e corpo: questo perché Gmail converte i tag del Body in DIV. Tutto ciò, però, può essere un vantaggio perché usando CSS in linea controllerai meglio il tuo layout, inoltre i DIV non supportano alcuni tag come il bgcolor.


<head>
<
style type=“text/css”>
/*Questo codice è per tutti i clients tranne Gmail che ha la stessa dichiarazione nel body */
tabletrtdpspan {
font
-family:ArialHelveticasans-serif;
color:#333; font-size:11px;
}
</style>
</
head>
<
body style=“margin:0; padding:0; font-family:Arial,
Helvetica, sans-serif; color:#333; font-size:11px;”
>
Content
</body

 

3. Gmail converte i link nello stile di default, ovvero blu e sottolineato.

Il colore di default dei link di Gmail è #1155CC. Puoi sovrascrivere questo stile con dei CSS in linea. Attenzione però, Gmail ignora il nero 100%, come #000 o #000000. Come arginare questo problema? Semplice! Basta utilizzare un colore molto vicino al nero ma che non sia nero 100%; l’occhio umano non si accorgerà della differenza, ma GMail sì e non trasformerà il link nel blu di default.

 

4. Gmail App converte la proprietà height in min-height.

Gmail converte questo codice:
<td style=“height: 20px;”></td>

In:
<td style=“min-height: 20px;”></td>

La proprietà min-height non ha lo stesso effetto dell’height nel TD. Questo ha un effetto universale in tutti i browser. Con l’aggiunta di uno spazio o del <br /> all’interno della cella vuota, il problema è risolto.
<td style=“min-height: 20px;”> </td>

 

5. Gmail ignora le proprietà dei margin e dei padding se hanno un valore negativo.


margin:-40px 10px 0 0
margin:40px -10px 0 0
margin-top: -40px
margin-right: -40px
padding-right: -40px
padding-top: -40px

Anche Yahoo! non supporta queste proprietà

 

6. Gmail non consente di avere un sfondo di background.

Se includi nel background una URL, l’intera dichiarazione verrà ignorata, come nel resto dei vari client di posta nell’email marketing.

Ad esempio:
background: #000; /* questa dichiarazione sarà accettata */

background: #000 url(http://www.dominio.com/immagine-di-sfondo.jpg); /* questa dichiarazione sarà ignorata */
Detto questo, se mai si desiderasse avere un’immagine di sfondo con un colore, bisogna farlo all’interno di una diversa dichiarazione di CSS in linea.

Ad esempio:
<td style=” background: #000;  background: #000
url(http://www.dominio.com/immagine-di-sfondo.jpg);”>

Un’altra opzione è quella di utilizzare l’attributo “background” all’interno del TD.
<td background=“http://www.dominio.com/immagine-di-sfondo.jpg” bgcolor=”#eeeeee”>

 

7. Il DOCTYPE di Gmail Mobile può influenzare il line-height.

Si potrebbero avere alcune righe di testo (in particolare nello small) con più line-height del previsto a causa del DOCTYPE Gmail. Prova a mettere il font all’interno del tag P invece di utilizzare uno span. Un altro modo per aggirare questo inconveniente è quello di definire un line-height e/o un font-size nel TD.

 

8. Gmail App trasforma in link i numeri telefonici.

Sia nella versione Desktop che in quella Mobile, Gmail crea di default un link con i numeri di telefono. Nella versione desktop in particolare, il collegamento apre nuova chat di Google che viene visualizzata nella colonna di destra dell’interfaccia di Gmail.
Per evitare di avere un collegamento, bisogna utilizzare un’entità HTML nel numero di telefono che Gmail non riconosce, come “&#173;”

&#173;212&#173;-389&#173;-3934

 

9. Gmail converte automaticamente le URL e gli indirizzi email in link.

Se hai una URL o un indirizzo e-mail, Gmail lo convertirà in un link. Per risolvere questo automatismo ci sono diverse strade:

1.) Inserisci un’entità HTML che Gmail non riconosce, ad esempio:
&#173;­ 
L’indirizzo nome@mail.com verrà modificato in:
nome@mail&#173;.com

Puoi modificare una URL in:
www.dominio­&#173;.com

Puoi modificare un link come http://www.dominio.com in:
http:&#173;­//www.dominio&#173;.com

2.) Puoi inserire un’ancora nella URL o nell’indirizzo mail.  Ad esempio:
<a href=’#’ style=“color:#000; text-decoration:none”> nome@mail.com</a> 

 

10. Gmail aggiunge un visualizza tutto per le mail che eccedono i 102K.

Se il messaggio email super i 102Kb, Gmail mostrerà i primi 102k e troncherà la mail inserendo un visualizza tutto. Cliccando l’e-mail verrà visualizzata in una nuova finestra. Se siete vicino ai 102K, converrebbe risparmiare qualche byte eliminando, ad esempio, eventuali spazi inutili, ritorni o commenti. Si consiglia di evitare immagini e documenti incorporati per l’invio di e-mail in versione HTML.

 

11. Gmail non supporta gli spazi vuoti all’interno del percorso delle immagini.

Gmail non supporta gli spazi vuoti all’interno del percorso delle immagini, è quindi necessario utilizzare l’underscore o il trattino. Il percorso delle immagini deve essere sempre assoluto, ad esempio <img src="“http://www.dominio.com/nome-img.jpg”" alt="" />
Gmail spesso ha problemi con l’https, nel caso, prova ad utilizzare il protocollo HTTP semplice.

 

12. Il DOCTYPE di Gmail può creare ulteriori spazi tra le immagini.

Analogamente al punto 7, lo spazio tra le immagini può essere causato anche dal DOCTYPE. Ecco alcune soluzioni (funzionano anche in Hotmail e Yahoo! Beta):

1.) Aggiungi un display:block nello style delle immagini
<img style="display: block;" src="http://www.dominio.com/nome-img-jpg" alt="" />

2.) Aggiungi un align absbottom nel tag img
<img src="http://www.dominio.com/nome-img-jpg" alt="" align="absbottom" />

3.) Aggiungi un align texttop nel tag img
<img src="http://www.dominio.com/nome-img-jpg" alt="" align="" />

4.) Aggiungi un line-height 10px (o anche un valore inferiore) nel TD

5.) Aggiungi un font-size 6px (o anche un valore inferiore) nel TD

servizi contattaci

Lascia un Commento