Design Modelli How-to
~ 9 minuti letti
51408 visualizzazioni
valutalo
23 dicembre 2019

Problemi comuni di rendering su Outlook e come Stripo li risolve

Stripo / Blog / Problemi comuni di rendering su Outlook e come Stripo li risolve

Outlook è un client email abbastanza diffuso. Detiene una quota dell’11% del mercato (nel mondo, con un 9% relativo alle app, e 2% alla versione web).

Si dice che sia in grado di soddisfare tutte le esigenze delle imprese e di chi fa business.

Tuttavia, Outlook è noto anche per delle regole di rendering “uniche”. I problemi più comuni che si incontrano nell’apertura o l’invio di email con Outlook sono:

  • pulsanti arrotondati che diventano quadrati o rettangolari;

  • sfondi non visualizzati per singoli contenitori e righe;

  • schede dei menù che perdono lo stile assegnato.

Sul web si parla molto di queste questioni e ciò ci ha spinto a parlarne sul nostro blog.

Per provare a risolvere questi problemi alcuni modificano l’intero codice. Così facendo però, spesso, si risolve un problema e se ne causa un altro.

Ad esempio, cambiando il codice riusciamo a far sì che nei nostri modelli di email la forma dei pulsanti non venga modificata su Outlook, ma i banner non vengono più visualizzati. O ancor peggio, il layout di queste email potrebbe essere visualizzato male su altri client, come Gmail o Yahoo.

È per questo che riteniamo che i problemi di cui sopra debbano essere risolti in modo locale, ossia modificando solo gli elementi coinvolti, e non le email nel complesso.

1. I pulsanti arrotondati diventano quadrati in alcune versioni di Outlook

Numerose ricerche hanno dimostrato che la forma di un pulsante CTA non ha alcun impatto su CTR e CTOR.

La regola principale per rendere efficaci i pulsanti consiste nel far sì che attirino l'attenzione e che abbiano un testo chiaro e interessante.

Nonostante questo, la forma dei pulsanti è comunque importante per noi che ci occupiamo di design, programmazione o email marketing, dato che abbiamo la necessità di restare coerenti con l'identità del nostro brand.

Stripo_Outlook-Rendering-Issues_Buttons1

Quindi cosa succede ai pulsanti su Outlook?

Per prima cosa alcune versioni di questo client rendono tutti gli angoli retti. Inoltre, rimuovono tutti gli spazi bianchi dai pulsanti rendendoli meno belli da vedere, ma comunque ben visibili.

Quali sono le cause di questo bug?

Ci sono tre metodi principali per il layout dei pulsanti nelle email:

  1. Il metodo basato sulle tabelle.

  2. Il metodo Stripo. Chiamiamolo così dato che è stato sviluppato per il nostro builder di modelli di email, dato che secondo noi è il metodo che si adatta meglio alle nostre esigenze).

  3. Il metodo VML.

Il terzo metodo è stato inventato esclusivamente per Outlook. Altri metodi non sono supportati da questo client email ma hanno supporto più diffuso per quanto riguarda gli altri client.

Come usare il metodo basato su VML

Se usi Stripo, per ottimizzare i pulsanti per Outlook non devi fare altro che:

  • aprire "Impostazioni generali" nel pannello laterale;

  • aprire la scheda "Pulsante";

  • attivare il pulsante "Supporto per Outlook".

Support-for-Outlook_Control-(1)

Adesso i tuoi pulsanti resteranno arrotondati su Outlook, mantenendo lo stile e i colori.

Outlook-2016

(Outlook 2011, OSX 10.8)

Vuoi farlo anche tu? 

Usa Stripo

2. Gli sfondi dei contenitori o delle strutture non vengono visualizzati su Outlook

La maggior parte delle domande riguardanti Outlook sul web sono relative a "come impostare un'immagine di sfondo per moduli ed elementi separati".

L'email a destra in questa immagine è abbastanza bella da vedere, ma quella a sinistra ha un aspetto più completo.Stripo_Outlook-Rendering-Issues_Background-Images1

Questo è lo scopo di tutti gli sfondi: far sì che il design di un'email appaia completo.

La cosa più interessante e stupefacente riguardo questo aspetto è che Outlook effettua il rendering degli sfondi quando sono impostati come sfondo dell'email intera, e lo fa per la versione web, per tutte le versioni dell'applicazione desktop e per Office 365.

Quindi come fare se voglio impostare uno sfondo a un elemento specifico dell'email?

Lascia innanzitutto che ti ricordiamo che puoi impostare sfondi per l'intero modello di email dalla scheda “Aspetto” nella sezione “Impostazioni Generali”, e verrà visualizzato correttamente su tutti i client email per desktop.

Come impostare un'immagine di sfondo per una struttura/riga e renderla visibile su Outlook

È molto semplice, basta costruirla come banner. Questo metodo funziona perché tutti gli strati dei banner che costruisci con Stripo diventano un'immagine singola quando esporti il banner ovunque o lo scarichi come file HTML. E come sappiamo, tutte le immagini funzionano bene in tutti i clienti email.

Stripo_Outlook-Rendering-Issues_Background-Image-for-Structure1

Per costruire un banner segui questo procedimento:
  • carica un’immagine banner che faccia da sfondo per la struttura;

  • carica l'immagine “aggiuntiva” che fa da immagine principale del tuo modulo di contenuto, oppure carica l'immagine del pulsante. Ricordati di usare la nostra opzione “Appunti” per posizionare altre immagini a distanza regolare da tutti i lati dell'immagine banner;

  • piazza il testo CTA sulle immagini;

  • aggiungi un hyperlink a questa struttura.

Nota importante:

Questo metodo funziona solo se aggiungi soltanto un elemento/prodotto alla struttura/riga.

Come impostare un'immagine di sfondo per un contenitore/elemento e renderla visibile su Outlook

In alcuni casi potresti dover impostare uno sfondo per un contenitore separato o per una colonna all'interno di una riga.

Il nostro sfondo per contenitori viene visualizzato in maniera corretta su tutte le versioni di Outlook:

Stripo_Outlook-Rendering-Issues_Background-for-Containers-and-Elements1.

Ci sono due modi per farlo:

1° modo. Creando un banner

Puoi seguire lo stesso metodo descritto nella sezione precedente, ma dovrai usare una struttura a due colonne.

Stripo_Outlook-Rendering-Issues_2-Coumn-Structure1

2° modo. Costruendo uno sfondo basato su VML

Devi preparare la struttura e l’elemento ai quali aggiungerai uno sfondo.

Dopodiché, dovrai lavorare sul codice del modello di email.

  • passa con il mouse sull’elemento che ti interessa direttamente nel modello;

  • sull’elemento, trova l’etichetta “contenitore”;

Stripo_Outlook-Rendering-Issues_Container-Label

  • clicca sull’etichetta per attivare le impostazioni del contenitore;

  • ora apri l’editor del codice;

Stripo_Outlook-Rendering-Issues_Opening-Code-Editor1

  • inserisci queste linee di codice appena sopra la linea che inizia con “table width”

<!--[if gte mso 9]> 
 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:327px;height:100%;">  
  <v:fill type="frame" src="https://iiqf.stripocdn.email/content/guids/CABINET_b696bac619e2a6fd60a2c756b8b7c9c5/images/26661559905688877.png" color="#7bceeb" ></v:fill> 
   <v:textbox inset="0,0,0,0">
  <![endif]-->

(Il codice è tratto da backgrounds.cm. L'abbiamo ottimizzato per renderlo più adatto alle necessità del nostro editor);

  • inserisci questo codice al di sotto della stessa linea:

<!--[if gte mso 9]> 
</v:textbox> 
</v:rect>
<![endif]-->
  • sostituisci i link evidenziati nell’immagine con l’URL della tua immagine di sfondo;

Outlook_Rendring-Issues_Inserting-Code-Samples-for-Backgrounds

  • nel codice di incorporamento, modifica la larghezza dell’immagine in base a quella del contenitore. Puoi conoscere la larghezza guardando la prima linea, subito dopo l’etichetta “width”. Nel nostro caso è di 600 px.

Se l’immagine è sui nostri server, puoi ottenere l’URL così:
  • Nel modello di email in HTML, clicca sull'immagine di sfondo che hai scelto;

  • Nel pannello delle impostazioni, clicca sul pulsante “URL”;

  • Copia il link che trovi nel campo chiamato “Percorso dell’immagine”.

Outlook_Rendering-Issues_Copying-URL-links

Nota importante:

Se in precedenza hai aggiunto il pulsante basato su VML al contenitore o a una struttura, lo sfondo a base VML non funzionerà. Outlook riesce a visualizzare solo uno dei due oggetti VML, quello impostato per primo.

Prossimamente:

Siamo felici di annunciare che molto presto aggiungeremo una funzione di controllo delle immagini di sfondo, simile a quella dei pulsanti. Questo significa che non dovrai più avere a che fare con il codice, e dovrai soltanto scegliere se vuoi impostare degli sfondi speciali per gli utenti di Outlook.

3. Gli elementi dei menù perdono gli stili assegnati in alcune versioni di Outlook

Questo problema capita raramente ai nostri utenti, ma l’abbiamo incluso lo stesso nella lista:

I menù e i pulsanti possono perdere lo stile che è stato loro assegnato, ad esempio colore, dimensione del font, ecc.

Nel creare la mia email, ho impostato il carattere Trebuchet a 18 px di dimensione.

In Outlook, però, ho ottenuto questo:

Stripo_Outlook-Rendering-Issues_Menus-Lose-Their-Styles.1

Se guardi attentamente ti accorgerai che il primo elemento nel menù in alto è scritto in Times New Roman, 12px, ed è nero. 

Quali sono le cause di questo bug:

Succede quando dimentichi di aggiungere un hyperlink a un elemento. Quando degli elementi dovrebbero avere un link e non ce l’hanno, perdono il proprio stile.

Soluzione:

Controlla di aver aggiunto link a tutti gli elementi prima di testare o inviare le email ai destinatari.

Nota importante:

Quando costruisci modelli di email, aggiungi link a tutti gli elementi che dovrebbero averli. Se invece di rimuovere un link intenzionalmente, dimentichi semplicemente di rimpiazzare un link predefinito con il tuo, gli elementi del menù non perderanno lo stile, dato che tutti i link sono comunque presenti.

Conclusioni

È vero che Outlook basta a soddisfare le esigenze della gran parte delle imprese. E non dobbiamo temerlo, anzi, dobbiamo imparare a gestirlo. Inoltre, ora Outlook supporta le GIF animate, e dall’estate supporta anche AMP per le email. Non è fantastico?

Grazie al nostro editor di codice HTML, diamo ai nostri utenti la possibilità di incorporare codici speciali che permettono loro di inviare email splendide e sofisticate a tutti i destinatari, inclusi quelli che usano versioni vecchie o recenti di Outlook.

A breve non dovrai affatto occuparti del codice, lo faremo noi al posto tuo.

Non dovrai far altro che attivare le relative opzioni.

Dai un’occhiata a questo post su come creare ed esportare modelli di email per Outlook usando Stripo. 

Ottimizza le mie email per Outlook

nicoletta arena 2 mesi fa

quando scarico l'html sui computer appaiono le immagini caricate, mentre la stessa mail letta sui cellulari non ha le immagini, Perchè?

Lea Simpkins 1 anno fa

The problem I am having when I export email templates to outlook is that they are not mobile friendly. From a laptop or computer the emails look fantastic but on mobile they are WAY TOO SMALL to read. Is there a fix to make them adapt to mobile?

Hanna Kuznietsova ha commentato Lea Simpkins 1 anno fa

Hello, Lea. Sorry for the late reply. Unfortunately, Outlook removes the styles that make email design responsive. Thus, those users who see your emails on mobile devices will see the desktop version of it. Of course, there is no horizontal scroll on mobiles. But all the containers from one row that are normally moved to the second/third row on mobiles, will all remain in the same row. https://stripo-cdn.stripo.email/photos/shares/Blog//Containers-Get-Moved-to-Next-Rows.png -- email sent via an ESP https://stripo-cdn.stripo.email/photos/shares/Blog//Email-Sent-Through-Outlook.png -- email sent via Outlook.

Alaa Abdelrahim 1 anno fa

17620 views meaning so many people is having this problem and sorry to say this , but some of suggested solution is not working :(

Hanna Kuznietsova ha commentato Alaa Abdelrahim 1 anno fa

Alaa Abdelrahim, We're sorry to hear some solutions did not work for you. Could you clarify please which solutions did not work? We will try to find the reason why and provide you with a new way out. Thank you

GERWIN RUSSELL FARROÑAN ALBORNOZ 1 anno fa

Hola, tengo problemas para que la imagen de fondo del contenedor se pueda ver en outlook. Estoy siguiendo las indicaciones de insertar el código (https://stripo.email/photos/shares/Blog//Outlook_Rendring-Issues_Inserting-Code-Samples-for-Backgrounds.png) pero no me resulta. Adjunto el enlace de la plantilla que hice. https://viewstripo.email/f9949d8f-3dd3-4452-ab85-a2f603d0360e1599420348110 Agradecería que me digan que tengo que corregir para que resulte.

Hanna Kuznietsova ha commentato GERWIN RUSSELL FARROÑAN ALBORNOZ 1 anno fa

Hola. Intente utilizar "New Email Copy 3" y este contenedor http://prntscr.com/ucvqve como se muestra en el ejemplo. Así es como se ve el fondo de este contenedor en nuestro Outlook: https://prnt.sc/ucvp5o Si necesita más ayuda, envíenos un correo electrónico a support@stripo.email oa través de nuestro chat que puede encontrar en la esquina inferior derecha de su pantalla en nuestro sitio.

Francis Monier 1 anno fa

Bonjour, Bravo pour votre article. Une remarque cependant car je suis toujours confronté au problème de l'image de fond sur Outlook. Problème récurrent qui me fait perdre énormément de temps. Vous avez dit "Nous sommes heureux d’annoncer que bientôt nous ajouterons un contrôle, similaire au contrôle des boutons, pour les images de fond. Cela signifie que vous n’aurez plus à jouer avec le code — vous n’aurez qu’à choisir si vous voulez un arrière-plan spécial pour les usagers d’Outlook ou non, nous sommes aujourd'hui en 2020 et cette option n'est toujours pas disponible. Où en êtes-vous par rapport à ce sujet là ? Cordialement (Problème mentionné étant "L’arrière-plan des conteneurs ou structures ne s’affiche pas dans Outlook")

Hanna Kuznietsova ha commentato Francis Monier 1 anno fa

Francis, Bonne journée. Merci pour votre question. Malheureusement, la sortie de cette option est reportée au début de 2021. Lorsque la sortie aura lieu, nous en parlerons certainement sur notre site Web. Nous espérons que cette méthode d'ajout d'un arrière-plan vous a été utile et n'a causé aucun inconvénient. Nous vous souhaitons sincèrement des campagnes efficaces

Олег Темпов 2 anni fa

Метод stripo приводит к тому, что колонки в браузерном клиенте Gmail начинают скакать, чего бы не было при табличной вёрстке...

Hanna Kuznietsova ha commentato Олег Темпов 2 anni fa

Олег, Добрый день. Нам очень жаль, что у Вас возникли проблемы с отображением письма в Gmail. Метод верстки у нас табличный, и никакие контроллы, которые мы применяем для адаптации писем под Outlook, его не отменяют. Подскажите, пожалуйста, какое именно действие привело к тому, что колонки начали скакать в Gmail. Напишите, пожалуйста, здесь или на почту support@stripo.email, и мы постараемся помочь устранить данную проблему. Спасибо

Potresti essere interessato a

indietro avanti
banner9
06 giugno · 15 minuti letti
I 10 migliori generatori di modelli di e-mail per il 2022

Tutti i generatori di modelli di e-mail vi sembrano uguali? Siete confusi su quale scegliere per le vostre campagne, vero? Non c'è da stupirsi, visto che ce ne sono così tanti. Faremo un'indagine sui generatori più popolari per trovare le loro caratteristiche distintive e aiutarvi a trovare il miglior creatore di e-mail HTML per le vostre esigenze attuali. Proverò a creare un modello in tutti questi editor con gli stessi file multimediali per vedere se tali realizzatori sono diversi l’uno...

Design Marketing Modelli
24 maggio · 18 minuti letti
I migliori caratteri per e-mail: suggerimenti e trucchetti per l'utilizzo

Una delle preoccupazioni maggiori durante il processo di realizzazione di una email è la scelta del carattere giusto. Dimensione, colore, forma, spaziatura... Conta tutto? Sì, ma una delle cose fondamentali è quella di scegliere un carattere leggibile. In questo post, ti mostreremo come scegliere il carattere più professionale per le tue email. Progettate email eleganti con Stripo in pochissimo tempo grazie ai nostri modelli precostituiti Sfoglia   Caratteri nelle e-mail HTML: regole generali da seguire Ci sono tre regole di...

Design Modelli
Greatest Examples of GIF animations in Emails_Cover Image
27 ottobre 2021 · 10 minuti letti
16 Ottimi Esempi di Animazione GIF nelle Email

Le GIF nelle email sono di grande utilità se si vuole mostrare il proprio prodotto, attirare l'attenzione degli utenti su determinati elementi o semplicemente decorare leggermente il tuo testo. In questo articolo, ti mostriamo alcuni dei migliori esempi di animazione gif nelle email. Esempi di Animazioni GIF nelle email Ecco una raccolta dei migliori esempi con GIF nelle email. Ogni GIF svolge la sua missione. 1. Adidas (Fonte: email da Adidas) Adidas ha utilizzato le animazioni nelle email per mostrare...

Design Marketing
08 aprile 2021 · 17 minuti letti
14 migliori esempi di design di firme e-mail

Una buona firma email ci aiuta a costruire il nostro business e a fare una buona impressione sui clienti. Poiché questo è l'ultimo elemento che le persone vedono nelle e-mail, dovremmo rendere le nostre firme personali creative e memorabili. Esaminiamo i migliori esempi di firma e-mail e il loro uso appropriato nelle e-mail e nei modelli di newsletter per email. Va detto che tutte le tipologie di aziende richiedono firme email professionali con informazioni di contatto dettagliate. Usa questo modello...

Design Marketing Modelli
Rimani sempre informato sulle ultime notizie, alle guide, agli articoli e alle tecniche relativi all'email marketing