Come creare bellissimi pulsanti e-mail a prova di proiettile che funzionano assolutamente

Per versioni più complesse di questo pulsante, creeresti effettivamente due versioni del pulsante, una in VML e una per tutti gli altri.

Pro e contro di un pulsante basato su VML

Professionisti:

• C'è un ottimo supporto nella maggior parte dei client di posta elettronica (vedi tabella sotto).
• L'intero pulsante stesso è cliccabile.
• Gli angoli arrotondati vengono mantenuti in Outlook.

Contro:

• Si basa sull'uso di un linguaggio sconosciuto, VML, proprietario della suite Microsoft Office, il che rende la creazione di nuovi pulsanti a prova di proiettile e l'aggiornamento di quelli esistenti dispendiosi in termini di tempo e frustranti.
• La larghezza e l'altezza del pulsante antiproiettile devono essere dichiarate, quindi qualsiasi modifica alla copia del CTA richiederebbe modifiche alle dimensioni del pulsante.
• Versioni più complesse del pulsante VML richiedono due URL che devono essere modificati. E alcuni ESP non tengono traccia dell'URL nella sezione VML.
• VML richiede un'altezza e una larghezza fisse, quindi questo pulsante non funziona molto bene per i modelli in cui la lunghezza della copia nel CTA può variare.

Se non vuoi imparare i dettagli di VML (e onestamente, chi lo fa?), Campaign Monitor ha uno strumento online gratuito per creare pulsanti a prova di proiettile tradizionali. Buttons.cm semplifica la creazione di nuovi pulsanti CTA che avranno un bell'aspetto e funzioneranno bene con la maggior parte dei client di posta elettronica.

Questo era il mio stile preferito per la codifica dei pulsanti quando lavoravo alle e-mail farmaceutiche. Il più grande vantaggio è la sua capacità di mantenere gli angoli arrotondati in Outlook, che era necessario per quel settore altamente regolamentato.

3. Pulsanti basati sull'imbottitura

Questo metodo utilizza una semplice tabella HTML per il pulsante. Si basa sul riempimento a livello di cella della tabella per strutturare il pulsante, nonché sugli attributi HTML e CSS per lo stile del pulsante.

Pro e contro di un pulsante basato su padding

Professionisti:

• Funziona bene con la maggior parte dei client di posta elettronica (vedi tabella sotto).
• Utilizza codice con cui i designer di posta elettronica hanno familiarità, HTML e CSS, il che rende la creazione di nuovi pulsanti a prova di proiettile e l'aggiornamento di quelli esistenti un gioco da ragazzi.

Contro:

• Non è possibile fare clic sull'intero pulsante, il che può causare attriti con gli abbonati che pensano di aver fatto clic o toccato un pulsante.
• Outlook non supporta gli angoli arrotondati.

4. Pulsanti basati sui bordi

I pulsanti basati sui bordi hanno un approccio simile al metodo precedente. Utilizzando semplici HTML e CSS, puoi strutturare e modellare i tuoi inviti all'azione. Tuttavia, invece di fare affidamento sul riempimento a livello di cella della tabella per la struttura, aggiungi bordi spessi al collegamento stesso per creare il tuo invito all'azione.

Nota che il tag link è impostato per essere un elemento a livello di blocco e che i bordi vengono utilizzati per fornire il nostro "padding". Ciò garantisce che l'intero pulsante sia posizionabile e cliccabile, anche nei client desktop più vecchi.

Pro e contro di un pulsante basato sui bordi

Professionisti:

• Tutto lo stile è sul tag di collegamento effettivo, il che semplifica il codice.
• Viene utilizzato un solo pulsante. Non sono necessari doppi pulsanti o codice VML confuso.
• Non hai bisogno di definizioni specifiche di altezza o larghezza, rendendo i pulsanti altamente scalabili.

Contro:

• Outlook riduce la dimensione dei bordi di una piccola quantità.
• Outlook non riconosce i tag <a> come elementi a livello di blocco.
• Outlook non supporta gli angoli arrotondati.
• Non è possibile aggiungere uno stile più avanzato come bordi extra sull'esatto elemento di collegamento.

5. Pulsanti basati su riempimento e bordo

I pulsanti basati su padding e border combinano elementi dei due approcci precedenti.

In sostanza, questo approccio utilizza la stessa struttura di stile del collegamento con padding e almeno un bordo solido di 1 pixel. Quindi, viene applicato un colore di sfondo al <td> per riempire l'intero sfondo del collegamento. Il colore di sfondo deve essere applicato a <td> anziché a <a> in questo caso perché Outlook non riconosce il riempimento orizzontale sul tag <a> (poiché non supporta tale stile per HTML non a livello di blocco elementi).

Pro e contro di un pulsante padding-and-border

Professionisti:

• È necessario codificare solo un pulsante, il che rende i pulsanti che utilizzano questa tecnica facili da aggiornare.
• Non sono necessarie dimensioni specifiche per i pulsanti.
• Le immagini di sfondo possono essere supportate con questo metodo.

Contro:

• Lo stile è separato tra <td> e <a>, quindi entrambi devono essere aggiornati quando ci sono cambiamenti di stile per il pulsante.
• Outlook non supporta gli angoli arrotondati.

E l'HTML semantico?

Ci piace usare l'html semantico, ma sfortunatamente il tag <button> non è supportato nelle email. È ridotto a un <div> nella maggior parte dei client di posta elettronica, che non è selezionabile o non viene visualizzato correttamente.

È possibile nidificare div o tabelle all'interno dei tag di ancoraggio. Ma non è semanticamente corretto. Inoltre, entrambi questi metodi generano pulsanti che non funzionano in Outlook. Nel caso delle tabelle, il collegamento non è cliccabile, e nel caso dei div... beh, guarda tu stesso:

Pulsante Div	Pulsante Div in Outlook

Hack e miglioramenti avanzati

Tutti i metodi di cui sopra sono ottimi punti di partenza nella creazione di pulsanti antiproiettile, ma ogni tecnica può essere ulteriormente modificata per creare pulsanti antiproiettile migliori.

Modifica dell'imbottitura orizzontale per Outlook

Outlook non supporta il riempimento orizzontale, il che può comportare che il testo CTA sia molto vicino ai bordi sinistro e destro del pulsante antiproiettile.

Un rapido trucco che può essere utilizzato per aumentare il "padding" orizzontale per Outlook consiste nell'aggiungere in modo condizionale spazi in linea e non interrotti su ciascun lato del collegamento. Il pulsante di riempimento condizionale ne fa già uso insieme alla proprietà di spaziatura delle lettere per aggiungere spazio ai lati del pulsante.

Miglioramento progressivo con media query

Per migliorare il design del tuo pulsante a prova di proiettile, puoi utilizzare stili avanzati come bordi, sfumature, caratteri web, effetti al passaggio del mouse e altro con le query multimediali.

Miglioramenti di Outlook con VML

Se vuoi far brillare davvero i tuoi pulsanti, puoi immergerti in VML per aggiungere un po' di brio ai tuoi pulsanti.

Per quanto frustrante possa essere VML, ti consente di creare alcuni pulsanti molto divertenti con immagini di sfondo, sfumature e ombre. C'è sicuramente un certo grado di tentativi ed errori, ma i risultati possono essere sorprendenti.

Dai un'occhiata al nostro pulsante dalla nostra newsletter di gennaio per un esempio:

Quindi, com'è il supporto del client di posta elettronica?

I client di posta elettronica hanno aggiornato il loro supporto da quando questo post è stato scritto per la prima volta nel 2017, quindi questi pulsanti sono molto vicini all'antiproiettile. La quantità minima di supporto è in Outlook, come previsto, ma anche lì i pulsanti non sono molto rotti.

Puoi controllare le prove di tornasole complete qui.

* Gli angoli arrotondati non vengono visualizzati. † La dimensione del pulsante è distorta.

Supporto e hack per la modalità oscura

La modalità oscura apporta una svolta interessante ai pulsanti antiproiettile. Come la maggior parte di HTML e CSS, puoi controllare gli stili della modalità oscura per i pulsanti con le query multimediali.

Tuttavia, Gmail e Outlook.com possono invertire i colori dei pulsanti.

Se vuoi mantenere i colori di sfondo sui pulsanti, ci sono alcuni hack. Attenzione però a invertire il colore della copia sui pulsanti. Non c'è modo di impedire che i colori dei caratteri cambino in Outlook, ma puoi mantenere il testo bianco sui pulsanti bianco con la soluzione alternativa alla fusione CSS di Remi Parmentier.

La più grande mancanza di supporto in queste opzioni di pulsanti a prova di proiettile sono i pulsanti VML.

In modalità scura, Office 365 invertirà i colori di sfondo, ma non invertirà il colore di riempimento nel VML. Quindi ti ritrovi con pulsanti che assomigliano a questo:

C'è una soluzione per questo: assicurati di utilizzare il valore RGBA per il colore di sfondo sul tag <a> per il tuo pulsante, in questo modo:

Quindi ti ritrovi con un pulsante che assomiglia a questo (molto meglio, giusto?):

Il valore RGBA come colore di sfondo non è supportato in Outlook, quindi ricorre al colore VML. Grazie a Wilbert Heinen per questa correzione! Poiché non possiamo controllare il colore del carattere in Modalità scura in Outlook, se utilizzerai questo pulsante, assicurati che le tue scelte di colore tengano conto dell'accessibilità anche quando il colore del carattere è invertito. (L'esempio che abbiamo usato è un buon esempio di quali colori non usare.)

Le tue campagne sono a prova di proiettile?

Indipendentemente dall'approccio adottato, l'utilizzo di pulsanti antiproiettile per gli inviti all'azione è di gran lunga superiore al fare affidamento sulle immagini. Anche nei client di posta elettronica che bloccano le immagini, i pulsanti a prova di proiettile assicurano che il tuo messaggio sia chiaro per il tuo pubblico, aumentando la probabilità che i tuoi iscritti siano coinvolti. Niente più email rotte!

Crea e-mail sul marchio e prive di errori con Litmus Le e-mail non funzionanti, in particolare i pulsanti CTA, significano meno clic e conversioni. Ahia. Litmus ti aiuta a garantire che tutto sia perfetto con un controllo automatico per il blocco delle immagini, i collegamenti interrotti e altro ancora. Inizia la tua prova gratuita →

Qual è la tua tecnica di bottoni antiproiettile preferita?

Facci sapere come crei pulsanti e-mail a prova di proiettile nei commenti qui sotto.

Pubblicato originariamente il 1 novembre 2017 da Jason Rodriguez. Ultimo aggiornamento il 22 giugno 2021.