Sebbene i nostri modelli siano progettati per essere visualizzati correttamente in tutti i client di posta elettronica, alcuni problemi comuni di visualizzazione delle campagne possono verificarsi quando un iscritto visualizza un'email HTML in Outlook, specialmente nelle versioni 2007, 2010 o 2013. Questo perché queste tre versioni di Outlook utilizzano Microsoft Word per eseguire il rendering di email che offrono un supporto HTML e CSS limitato.
In questo articolo verranno illustrati i problemi di visualizzazione comuni riscontrati dagli utenti con Outlook e i consigli per la risoluzione di tali problemi.
I margini non vengono visualizzati
Tutte le versioni di Outlook (ad eccezione di Outlook.com) e Gmail non supportano i margini. Invece, si consiglia di utilizzare il blocco del contenuto del distanziatore:
Puoi anche provare la spaziatura interna per creare spazio intorno ai blocchi del contenuto.
La spaziatura interna è supportata in tutte le versioni di Outlook e in altri fornitori di servizi email popolari. È possibile aggiungere spaziatura interna a un blocco del contenuto selezionando il contenitore o la struttura nel designer per email e regolando la spaziatura interna nel menu a destra. Tuttavia, la spaziatura interna può far apparire i contenuti stretti quando vengono visualizzati su un dispositivo mobile.
L'altezza della linea non è supportata in modo coerente
Outlook 2007, 2010, 2013 e Office 365 non supportano costantemente l'altezza della linea. Alcune versioni di Outlook supportano il valore percentuale dell'altezza della riga (ad esempio, 140%), mentre altre supportano un numero intero (ad esempio, 4). Ti consigliamo di fornire entrambi i valori se stai creando un'email da zero e stai scrivendo il tuo CSS. Se stai utilizzando il designer per email con trascinamento della selezione, questa opzione viene impostata automaticamente.
Le immagini appaiono distorte
Outlook non ridimensiona le immagini larghe 1000 o più pixel. Invece, l'immagine verrà visualizzata alle sue dimensioni effettive, causando l'espansione e la distorsioni della larghezza del modello. Ti consigliamo di utilizzare immagini di larghezza compresa tra 400 e 650 pixel.
Si noti che nella finestra di progettazione, le immagini vengono automaticamente ridimensionate fino a 1300 pixel di larghezza. Questo è il doppio della larghezza dell'email che è larga 650 pixel.
Ulteriori informazioni sull'aggiunta di immagini alle campagne.
Le GIF vengono visualizzate come immagini piatte
Le GIF animate sono supportate nel client desktop Outlook 365, nelle app Outlook per dispositivi mobili e in Outlook.com.
Outlook 2007, 2010 e 2013 non mostreranno animazioni. Invece, mostreranno solo il primo fotogramma. Se la tua GIF ha un'offerta, un titolo o una call-to-action, assicurati che sia incluso in quella cornice. Per istruzioni su come aggiungere una GIF alla tua email, fai clic qui.
Pulsanti duplicati
I servizi email come Gmail, Apple Mail e Yahoo eseguono lo stile dei pulsanti di rendering utilizzando CSS e HTML standard. Poiché Outlook non lo fa, abbiamo fornito una correzione in modo che Outlook esegua correttamente il rendering del raggio del bordo, della spaziatura interna e dei bordi attorno al pulsante.
Tuttavia, una volta che un'email viene inoltrata da un iscritto che fa clic sul pulsante Inoltra nel proprio fornitore di servizi email o se l'email viene reindirizzata tramite un server Windows o Exchange, questa correzione verrà letta come un elemento HTML valido, risultando in un pulsante duplicato.
Sfortunatamente, non esiste una soluzione per evitare che ciò accada. Per aggirare questo problema, puoi creare un'immagine di un pulsante e caricarla nella tua email come qualsiasi altra immagine. Quindi puoi aggiungere il tuo link in modo che quando i contatti fanno clic su quell'immagine, vengono reindirizzati al tuo URL preferito.
Designer per email: pulsanti in Outlook
In Designer per email (lanciato nel 2022), il pulsante "Supporto di Outlook", consente di migliorare la visualizzazione dei pulsanti in Outlook, inserendo uno speciale elemento di codice VML. Il pulsante "Supporto di Outlook" verrà attivato per impostazione predefinita.
Designer per email e HTML: l'immagine di sfondo non viene visualizzata
Le immagini di sfondo che non vengono visualizzate sono un problema comune con molti fornitori di email diversi. È consigliabile fornire un colore di fallback nel caso in cui l'email venga visualizzata in una versione di Outlook che non supporta le immagini di sfondo.
Questo vale se crei un'email con il tuo HTML e designer per email (lanciato nel 2022). Si noti che quando si utilizza designer per email (lanciato nel 2022), è possibile aggiungere un'immagine di sfondo nella scheda "Impostazioni globali" "Impostazioni generali" oltre a un colore di sfondo di fallback:
La finestra di progettazione classica non supporta le immagini di sfondo.
Classic Designer: allineamento del testo
Outlook non supporta l'allineamento del testo "Giustifica".
Sfortunatamente, non esiste una correzione per forzare Outlook a supportare l'allineamento del testo giustificato.
Si noti che designer per email (lanciato nel 2022) non ha la possibilità di giustificare e quindi non è un problema quando viene inviato a Outlook
Classic Designer: testo interrotto nei pulsanti
I pulsanti con testo interrotto o testo che si interrompe in una seconda riga sono dovuti a un problema di rendering di Outlook. Per evitare questo problema, è possibile aumentare la spaziatura interna per il pulsante in modo che sia superiore alla dimensione del carattere. Se il problema persiste, ti consigliamo di creare un'immagine del pulsante e di utilizzarla (vedi "Pulsanti duplicati" sopra).
Designer classico: i pulsanti visualizzano un carattere non corretto
Outlook potrebbe eseguire il rendering del tipo di carattere non corretto e fallback a Times New Roman. Ciò è causato da uno spazio aggiunto all'inizio e/o alla fine del testo del pulsante. Per evitare questo problema, si consiglia di rimuovere tale spaziatura. Se ciò non funziona, puoi creare un nuovo pulsante o creare un'immagine di un pulsante da utilizzare nella tua campagna.
Classic Designer: i link non sono cliccabili
Per quanto riguarda l'allineamento delle immagini, solo alcune versioni di Outlook eseguiranno il rendering delle immagini allo stesso modo. Se si dispone di un'immagine all'interno di un blocco di testo con collegamenti nella stessa riga dell'immagine, tali collegamenti non saranno selezionabili in Outlook 2007 e 2013.
Si noti che non è possibile aggiungere immagini ai box di testo nel designer per email (lanciato 2022) e quindi notare un problema quando si invia a Outlook.
Ad esempio, il testo del collegamento ipertestuale riportato di seguito non sarà selezionabile per gli iscritti che utilizzano entrambe le versioni di Outlook:
Per evitare ciò, con la finestra di progettazione classica, si consiglia di rimuovere l'immagine dal blocco di testo e utilizzare invece un blocco di immagini per evitare questo.