Perché le mie e-mail hanno un aspetto negativo con il client Outlook?

Affrontiamo la verità. Creare e-mail è un compito abbastanza facile. Ma formattare quelle e-mail per essere compatibili con Outlook è un bel compito. In effetti, più difficile di quanto pensi.

Outlook è il client di posta elettronica più utilizzato, ma antico, che tu abbia mai trovato. Tuttavia, non supporta diversi progressi che trovi in ​​altri client di posta elettronica come Gmail.

Prova questo:

Se hai utilizzato un'immagine PNG con trasparenza dello sfondo, Outlook andrà fuori di testa! Non sa come rendere tali immagini. Allo stesso modo, potresti chiederti perché i tuoi pulsanti arrotondati (creati utilizzando la proprietà CSS del raggio di confine) sembrano quadrati nel client Outlook. Perché Outlook non supporta il raggio di confine e molte altre proprietà CSS.

Ecco i motivi per cui le tue e-mail di Outlook sembrano terribili e cosa potresti fare per migliorare il design della tua e-mail.

Perché le mie e-mail hanno un brutto aspetto con Outlook?

La sfida più grande per gli e-mail marketing ora è creare un modello di posta elettronica per Outlook. Questo perché, da Outlook 2007, Microsoft ha smesso di utilizzare Internet Explorer per il rendering di e-mail e ha iniziato a utilizzare Microsoft Word come motore di rendering. Questo passaggio si adattava meglio agli utenti di Microsoft Office perché consentiva loro di copiare o incollare semplicemente il contenuto da Word o Excel nelle e-mail di Outlook. Ma, ha reso lo scenario difficile per il costruttore di e-mail basato su HTML. Poiché l'e-mail HTML ha una prospettiva diversa, per superare alcune sfide segui i passaggi seguenti per migliorare le campagne e-mail.

Sfide nel rendering della posta elettronica con Outlook

Un e-mail marketer deve prendere molto in considerazione prima di progettare una campagna e-mail. Ha bisogno di conoscere il suo abbonamento cliente che utilizza Outlook. La versione desktop, la versione mobile e la versione web di Outlook differiscono completamente l'una dall'altra nel rendering di un'e-mail. Quando si tratta di rendering di posta elettronica con Outlook, le seguenti sono le cose da considerare.

Perché l'immagine viene ritagliata e si carica lentamente

Quando si tratta di inclusione di immagini nelle e-mail, Outlook ha alcune limitazioni sulla dimensione dell'immagine.

Le newsletter via email svolgono un ruolo importante nelle campagne di email marketing. Sono resi dinamici aggiungendo immagini al suo interno. A volte, quando un'immagine lunga viene aggiunta al modello della campagna, viene ritagliata o ridimensionata all'estremità ricevente. Ciò è dovuto al fatto che Outlook ritaglia la parte superiore dell'immagine che supera l'altezza di 1728 px. Quindi, in questo caso, dobbiamo ridimensionare l'immagine sotto 1728px per farla apparire senza ritaglio.

In situazioni in cui l'immagine non può essere ridimensionata, l'alternativa migliore è ritagliare l'immagine in due immagini separate e quindi utilizzarla nella campagna.

L'immagine non viene ridimensionata

Outlook non funziona bene con le immagini vincolate con HTML. Cioè, se il modello di posta elettronica viene aggiunto con un'immagine ridimensionata utilizzando HTML, Outlook visualizzerà l'immagine solo nella dimensione originale anziché nel valore ridimensionato. Quindi, dobbiamo assicurarci che l'immagine venga ridimensionata bene prima che venga utilizzata in qualsiasi automazione della posta elettronica.

Immagini di sfondo

La migliore strategia per "stupire" un cliente è creare un'e-mail con un'immagine di sfondo con il marchio. Possiamo rendere le immagini di sfondo più mirate sovrapponendo i testi live all'immagine. Il testo live ci aiuterà anche a trasmettere lo scopo dell'e-mail anche nei momenti in cui il cliente non viene visualizzato con l'immagine.

Tuttavia, Outlook non supporta le immagini di sfondo con HTML. Abbiamo bisogno di utilizzare VML (Vector Markup Language) per le immagini di sfondo che devono essere visualizzate dall'abbonato.

Inserisci il codice seguente nel tag <body> del tuo HTML affinché l'immagine di sfondo copra l'intera finestra dell'e-mail

 <div> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="/IMAGE.png" color="#000000"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="IMAGE.png">

Il codice sopra ha funzionato perfettamente nella visualizzazione dell'immagine di sfondo con le e-mail aperte in Outlook 2007, 2010 e 2013. Ma Windows Mail 10 necessitava di alcune modifiche al codice per aggiungere l'immagine con la sua fonte che consentisse l'immagine di sfondo.

Il codice seguente consentirà al livello superiore dell'immagine di essere trasparente e aiuterà a correggere l'immagine di sfondo.

 <td valign="top" height="700" background="Image Live URL Here" bgcolor="#f7901e"> <!--[if gte mso 9]> <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" src="/Image Live URL Here" /> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"> <v:fill opacity="0%" color="#f7901e" /> <v:textbox inset="0,0,0,0"> <![endif]--> <div> <!-- HTML Content Here --> </div> <!--[if gte mso 9]> </v:textbox> </v:fill> </v:rect> </v:image> <![endif]--> </td>

Le GIF animate non si adattano

Il video parla più delle parole.

Ma, tecnicamente parlando, un modello di email richiede una codifica complessa per supportare i video. Pensando alle alternative, come e-mail marketer, vedo GIF come un'opzione dinamica. Le GIF sono immagini animate per trasmettere un messaggio nella forma più semplice. Outlook non supporta GIF.

L'immagine GIF viene caricata ma al cliente viene visualizzato solo il primo frame della GIF.

Se hai abbonati a Outlook nell'elenco di posta elettronica, assicurati che il primo fotogramma dell'immagine condivida il contesto principale della GIF.

Considera l'utilizzo della parte di animazione come un ulteriore vantaggio per gli abbonati con altri client di posta elettronica.

Proprietà raggio di confine

Parlando di e-mail marketing, il pulsante Call to action è una funzionalità che consente all'e-mail di generare un lead. Quante volte abbiamo fatto clic sul pulsante CTA con la punta tonda?

La proprietà del raggio del bordo è una proprietà CSS comune ma non funziona bene con Outlook. Con Outlook, agli abbonati vengono forniti pulsanti CTA con bordi quadrati.

Spazi vuoti aggiuntivi

A volte gli spazi vuoti sopra l'immagine come vedevamo nell'opzione di anteprima di stampa dopo il rendering dell'e-mail con Outlook.

Come detto in precedenza nel blog, ciò è dovuto al fatto che Outlook 2007 utilizza Microsoft Word per eseguire il rendering di e-mail HTML.

Quindi l'e-mail sembra leggermente diversa dal design reale.

Problema con il carattere principale

Se nel dispositivo dell'abbonato manca lo stile del carattere principale, Outlook visualizzerà l'intera posta elettronica in Times New Roman, ignorando il carattere di fallback menzionato nel codice.

 <!--[if mso]> <style> h1 { font-family: Primary font, Fallback font; } </style> <![endif]-->

Il modello di email dovrebbe essere perfetto

Gestisci una campagna e-mail per un negozio di eCommerce. Il modello che progetti dovrebbe aiutare a inviare e-mail efficaci perché questo non è il vecchio marketing tradizionale sul campo in cui i clienti possono incontrarti di persona.

Gli sguardi della persona di marketing definiscono la credibilità del marchio. Quindi, cosa stiamo inviando ora per rappresentare il nostro marchio?

E-mail. Il modello di design della tua e-mail offre al cliente la prima impressione del tuo marchio. Migliore è l'aspetto di un'e-mail con il contenuto, migliore è il marchio

Tuttavia, non abbiamo la libertà di utilizzare opzioni di formato avanzate per rendere la nostra e-mail attraente. Potremmo vedere che l'e-mail sembra perfetta in Outlook, ma questo non sarà lo scenario quando verrà visualizzato da altri destinatari di e-mail.

Dovresti attenerti all'utilizzo delle tabelle nella tua email html. Non tentare di utilizzare elementi div con posizione e float poiché Outlook non lo supporta. Sfortunatamente non ci sono soluzioni alternative per questo al momento.

L'opzione di annullamento dell'iscrizione è d'obbligo

Gestendo un negozio eCommerce, vogliamo sempre mantenere i nostri clienti coinvolti con il nostro marchio.

Come farlo?

Newsletter. Fornisci ai potenziali clienti informazioni sulla tendenza e sugli aggiornamenti nella tua nicchia di business.

Ma alla fine è il cliente che decide di seguire o meno il tuo marchio. Una volta che un cliente si è abbonato con noi, dovrebbe essere fornita la possibilità di annullare l'iscrizione dall'elenco di abbonamenti in qualsiasi momento.

Il pulsante Annulla iscrizione è un must in ogni newsletter che abbiamo inviato ai nostri clienti e se i nostri clienti non riescono a vedere questo pulsante,
Aspettati cosa?
Potremmo ricevere spam!

L'invio di e-mail da Outlook porta il nostro marchio a questo rischio perché non offre questa opzione standard.

I collegamenti vengono modificati in testo di colore blu/viola sottolineato

In qualità di e-mail marketing, dobbiamo sfruttare appieno l'e-mail che inviamo ai clienti.

Possiamo includere collegamenti di abbonamento, collegamenti ai nostri blog di tendenza, collegamenti di reindirizzamento al nostro sito Web per ottenere il coinvolgimento dei clienti.

Quando un'e-mail HTML viene inviata da Outlook, tali collegamenti vengono visualizzati con un testo blu/viola sottolineato quando viene visualizzato su diversi client di posta elettronica.

Per evitare questo problema, usa il tag <font> e avvolgi il testo con un tag <span> e un attributo di stile.

Prova a usare il seguente codice-

 <a> <span> <font color="#E3A216"> Click me </font> </span> </a>

Outlook potrebbe andare bene per riempire la tua casella di posta personale.

Ma, parlando di affari, guarda fuori dagli schemi.