Skip to main content

6.1.8 Problemi comuni di visualizzazione delle email con Outlook

Nonostante i modelli creati in vtenext siano atti per essere visualizzati correttamente su tutti i client di posta elettronica, alcuni problemi di visualizzazione possono sorgere quando un utente apre un'email HTML in Outlook, in particolare nelle versioni 2007, 2010 o 2013. Questo accade perché queste versioni di Outlook utilizzano Microsoft Word per il rendering delle email, offrendo un supporto limitato per HTML e CSS.

Cerchiamo dunque di analizzare i problemi di visualizzazione più comuni riscontrati dagli utenti di Outlook, insieme ai suggerimenti per risolverli.

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:

immagine

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.

immagine

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.

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.