Crea messaggi perfetti in tutti i client di posta elettronica

Sep 11, 2025

Come si fa

Per qualsiasi campagna di email marketing per funzionare, l'e-mail deve raggiungere la Posta in arrivo e distinguersi da tutti gli altri. Tuttavia, la storia non finisce lì. La tua e-mail deve rendere bene se vuoi che i tuoi abbonati aprissero la tua e-mail, fai clic su Attraverso il CTA e vengono convertiti.

Il rendering è un problema perché ogni client e dispositivo di posta elettronica percepisce il codice in modo diverso. Il codice che funziona bene con un client di posta elettronica può creare un problema di rendering in un altro. Per rendere le cose ancora più impegnative, anche i client di posta elettronica più utilizzati sono dotati di rendering di stranni e problemi. In questo articolo, darò un'occhiata alle sfide e alternative per ciascuno dei principali client di posta elettronica.

prospettiva

Non sarebbe un iperbole per dire che gli sviluppatori e-mail rabbrividiamo al pensiero di Outlook. La ragione ovvia è le numerose sfide del rendering presentate da questo client di posta elettronica. Ciò che è sorprendente è che qualsiasi azienda abbia ancora prospettive come il loro client di posta elettronica standard e una piccola percentuale dei tuoi abbonati sono ancora fedeli ad esso.

Dai un'occhiata ad alcune delle sfide e degli hack per Outlook:

Sfida: Outlook non supporta i margini in & lt; P & GT; e & lt; A & GT;
Hack: Se vuoi fornire margini, usa il & lt; td & gt; etichetta; Le maiuscole devono essere utilizzate al di fuori del tag e in linea minuscole

Sfida: L'imbottitura è supportata solo su determinati attributi HTML (non incluso & lt; div & gt; o & lt; P & GT; Tag)
Hack: Layout basata sulla tabella è la scommessa più sicura per superare questo problema

Sfida: Outlook è l'unico client di posta elettronica che non supporta GIFS
Hack: Poiché alcuni clienti vedranno solo il primo fotogramma della tua animazione, questo dovrebbe includere tutte le informazioni importanti, eseguite solo per alcuni millisecondi e hanno senso come un'immagine standalone

Sfida: Outlook non supporta i font di Google e implementerà i tempi nuovi romani come fallback
Hack: Incorpora il seguente codice ...

 & lt;! - [Se MSO] & GT;
& lt; stile tipo = "testo / css" e gt;
.fallback-text {
Fammon-family: Arial, sans-serif;
}
& lt; / style & gt;
& lt ;! [ENDIF] - & GT;

Outlook.com.

Una nuova versione di Outlook.com è stata introdotta all'inizio del 2016, ma la versione legacy non è ancora in uso. Ecco le sfide e gli hack in particolare per quel cliente:

Sfida: Un gap non necessario di 4-5px viene aggiunto sotto le immagini
Hack: Imposta la proprietà del display come "IMG {display: block;}" Per rimuovere l'imbottitura

Outlook.com introduces unnecessary spacing between your images — Outlook.com introduce la spaziatura non necessaria tra le tue immagini

Sfida: Non supporta i bordi RGB
Hack: Utilizzare i codici esagonali per impostare il colore di sfondo HTML

Sfida: Aggiunta # nel href. collegamenti rompe il tag di ancoraggio e sposta il CSS in un altro posto
Hack: Usa il nome del dominio piuttosto che href #

App nativo per iPhone

L'app di posta elettronica nativa è il client più utilizzato e supporta tutti gli elementi interattivi che in genere troverai in e-mail: gif, menu, fisarmoniche, conto alla rovescia, cursori e così via. Inoltre, consente inoltre al marketing e-mail di utilizzare immagini retina ad alta definizione per un'esperienza utente fantastica.

IOS10 è diventato tutto il più ambito perché gli utenti possono ora regolare il numero di linee di testo in anteprima nelle e-mail e persino optare per l'iscrizione di elenco. Nondimeno, nonostante questi punti forti, iPhone Native App ha anche alcune carenze. Diamo un'occhiata.

iOS10 users can opt for list-unsubscribe — Gli utenti di IOS10 possono optare per l'inservimento elenco

Sfida: Il testo minuscolo viene ridimensionato automaticamente
Hack: La dimensione minima del carattere per le intestazioni dovrebbe essere 22px e per il testo del corpo 14px

Sfida: Il rilascio di nuovi modelli iPhone può causare problemi di rendering
Hack: Layout fluido garantisce che le e-mail vengono visualizzate correttamente su tutti i dispositivi

Sfida: In ios9, quando blocco in linea Gli elementi di livello sono l'uno accanto all'altro nel codice con uno spazio tra le estremità di due elementi, conduce al problema dell'avvolgimento
Hack: Basta rimuovere lo spazio

Sfida: iOS10 non supporta il posizionamento fisso
Hack: Nessuna soluzione corrente ...

Gmail.

Gmail è popolare perché è così conveniente da usare. Tuttavia, ciò non significa che sia senza le sue sfide.

Sfida: Se il tuo file HTML supera i 102 KB, Gmail si azzecca
Hack: Evitare tag e attributi di stile inutili e non copiare il codice da Microsoft Word o altri editor di testo come è (questo aggiungerà tag extra al file HTML)

Sfida: Gmail rimuoverà CSS dal & lt; style & gt; blocco se supera 8142 caratteri o include errori o annidati @Declarations.
Hack: Assicurati che gli stili incorporati siano brevi e privi di errori di battitura

Sfida: Galleggianti, margini, paragrafi e imbottitura non sono supportati
Hack: Utilizzare un layout basato sulla tabella con & lt; td & gt; Per imbottitura e margini

Sfida: Le immagini di sfondo non funzionano per ID non-Gmail configurati in Gmail
Hack: Applicare il colore di sfondo come fallback

Sfida: Il selettore di attributo non funziona
Hack: Uso .classe Selettore invece

Apple Mail

Apple Mail è forse la cosa più vicina a un client di posta elettronica perfetto che abbiamo. Il vantaggio principale della posta di Apple è che è molto perdonato quando si tratta di cattive codifica dell'e-mail. Inoltre, proprio come l'app nativa iPhone supporta l'interattività nelle e-mail, eliminando così la necessità di visualizzare l'e-mail nel browser.

Dovresti tenere a mente due cose durante la codifica delle e-mail per i tuoi abbonati di Apple Mail:

Evitare di usare i caratteri Calibri
Ospitare la tua email e fornisci i collegamenti al server, poiché i collegamenti interni non funzionano in Apple Mail

Yahoo! Mail

Come sono arrivati nuovi e migliori clienti di posta elettronica, Yahoo! La posta è meno frequentemente utilizzata in questi giorni. Alcune delle sue sfide di rendering e gli hack sono discussi di seguito.

Sfida: non supporta il Centro-allinea. Attributo HTML.
Hack: uso alline = "centro"

Sfida: Min-dispositivo-larghezza e Max-Device-Larghezza non sono supportati dalle query dei supporti
Hack: Utilizzare attributo larghezza e amplificatore; / o in stile invece di minima o larghezza massima
Usa il larghezza attributo invece di minuzioso o larghezza massima , o separatamente o incorporato nel & lt; style & gt; etichetta

Sfida: I tag float non funzionano
Hack: Inserisci allinea = "Top" all'immagine in questione

Su tale nota, abbiamo raggiunto la fine della discussione sulla maggior parte delle sfide del rendering tipiche per i clienti di posta elettronica. Guarda Qui per ulteriori sfide e soluzioni alternative. Email marketing, se fatto bene, può aprire nuove vie per la tua strategia di marketing. Tieni presente questi semplici soluzioni alternative in mente e i tuoi abbonati non vedranno mai un layout e-mail rotto nelle tue e-mail di nuovo.

Articoli Correlati:

15 fantastici progetti di newsletter e-mail
10 migliori strumenti di newsletter e-mail
Master HTML Tipografia in e-mail

Crea messaggi perfetti in tutti i client di posta elettronica

prospettiva

Outlook.com.

App nativo per iPhone

Gmail.

Apple Mail

Yahoo! Mail

Come si fa - Articoli più popolari

Come aggiungere font in Photoshop

Costruisci un portale client con WordPress

Costruisci un UI controllato dalla voce

Costruisci terreno a Houdini 17

Affinity Designer: come utilizzare il personaggio di esportazione

Come utilizzare le trame in Photoshop

Come creare siti Web più veloci

Crea grafici interattivi in Ionic 2

Categorie