Come risolvere i collegamenti blu di Gmail per un sogno di e-mail che diventa realtà

Pubblicato: 2021-07-16

Frustrato da link blu apparentemente casuali e off-brand durante il test di controllo qualità della tua email altrimenti perfetta in Gmail? Stato lì. Fatto. Le buone notizie? Non hai fatto niente di male. Dal 2017, Gmail trasforma automaticamente parte della tua copia, come indirizzi email, numeri di telefono, indirizzi fisici e orari, in elementi cliccabili, a volte trasformandoli in blu. E poiché si apre il secondo client di posta elettronica più popolare con oltre il 30% di messaggi di posta elettronica, secondo i nostri dati, non puoi ignorare Gmail.

Nonostante cosa siano i link blu e perché, hai bisogno che la tua email assomigli a ciò che è stato approvato. O almeno che i collegamenti siano sul marchio. Fortunatamente, rimuovere lo stile predefinito non è così difficile. Ti illustreremo come vengono generati i collegamenti blu e cosa puoi fare per modificarli in modo che corrispondano al design della tua email. Il tutto mantenendo i link di facile utilizzo per il tuo pubblico di Gmail.

Le tue email hanno link blu?

Sapere sempre quando i client di posta aggiornano il rendering delle e-mail con Litmus Email Previews. Visualizza in anteprima le tue e-mail in tutti i client e dispositivi di posta più diffusi, incluso Gmail, e individua gli errori prima di inviarli.

Scopri di più →

Tieni a mente l'accessibilità

Innanzitutto, è importante ricordare che i collegamenti blu hanno uno scopo importante. Rendono più conveniente per i tuoi abbonati agire sulla tua e-mail, ad esempio, per navigare verso una posizione che hai incluso o darti una chiamata veloce. Entrambi ottimi per usabilità e accessibilità.

Sì, avevamo anche dei link blu nelle nostre e-mail

Tuttavia, questi collegamenti automatici possono avere lo stile predefinito: sottolineato e blu. Questo può entrare in conflitto con il design della tua email e persino rendere la tua email meno accessibile se i collegamenti sono su un colore di sfondo che non contrasta bene con loro.

piè di pagina — Il collegamento blu qui è appena percettibile

Quindi, ti consigliamo di mantenere la funzionalità del collegamento ma di modellarlo in modo che corrisponda meglio al design della tua email e sia leggibile.

L'anatomia di un'e-mail rotta (2a edizione)

Attenzione: ci sono altri colpevoli di un'e-mail non funzionante

Gli errori di posta elettronica ti fanno rabbrividire? I link blu sono solo uno dei modi in cui la tua email può sembrare rotta. Fai un tuffo profondo in ciò che può danneggiare la tua e-mail e i suggerimenti e i trucchi per rimanere fedele.

Rivela problemi comuni e correzioni →

Tre modi per cambiare il colore del collegamento blu in Gmail

Per cambiare il colore del collegamento blu, devi capire perché succede. Quando Gmail rileva un indirizzo o un numero di telefono in un'e-mail, aggiunge automaticamente una dichiarazione di stile extra, che formatta qualsiasi collegamento nell'e-mail come blu se non ha stili in linea allegati:

.ii a[href] { color: #15c; }

La classe .ii si riferisce alla classe assegnata al div che contiene l'intera email in Gmail. L' a[href] è un selettore di attributi CSS. Questo dichiara che qualsiasi collegamento nella classe .ii deve essere di colore blu.

Indirizzi e numeri di telefono non sono comunemente collegati nelle e-mail. Tuttavia, Gmail li riconosce e li trasforma in un collegamento, che ti piaccia o no. Poiché questi collegamenti vengono creati al volo, non hanno alcuno stile in linea collegato e quindi viene utilizzato lo stile predefinito sopra.

Esistono tre metodi che puoi utilizzare per impedire che i collegamenti diventino blu, a seconda che tu voglia che questi collegamenti appaiano uguali o diversi dagli altri collegamenti nella tua email.

Opzione 1: utilizzare il metodo <span>

Il metodo <span> è la tecnica più semplice per impedire che numeri di telefono e indirizzi diventino blu in Gmail. È perfetto se vuoi stilizzarli in modo diverso dagli altri tuoi collegamenti mantenendo la loro funzionalità. Ecco come:

Avvolgi il numero di telefono o l'indirizzo in un <span></span>
Assegna una classe a <span>, ad esempio: <span class="contact"></span>
Dichiara la classe nella sezione <style> della tua email per stilizzare il numero di telefono o l'indirizzo come preferisci
Profitto!

Ecco un esempio dell'HTML in cui l'indirizzo appare nell'e-mail:

<span class="contact">675 Massachusetts Ave.<br />Cambridge, MA 02139, USA</span>

Ed ecco un esempio di dichiarazione di stile per la classe "contatto" nel blocco <style> nel <head> della tua email dove impostiamo il collegamento in modo che sia nero (#000000) e sottolineato:

<style type="text/css">
    .contact a {color: #000000!important; text-decoration: underline!important;}
</style>

Cambia il colore nero nel nostro codice di esempio scambiando il #000000 con un codice esadecimale di colore che si adatta al tuo marchio. Se non vuoi che il tuo link sia sottolineato, cambia la sottolineatura nel tuo codice in nessuno.

La creazione di un <span> con un nome di classe attorno all'indirizzo o al numero di telefono ti dà qualcosa da scegliere come target usando i CSS. Il solo targeting dell'<span> stesso non determinerà lo stile del collegamento. Modellerà solo il testo non collegato, mentre il collegamento all'interno di <span> avrà ancora lo stile blu predefinito. Quindi, per indirizzare il collegamento all'interno dello span, la dichiarazione di stile include il nome della classe e "a".

Ciò è particolarmente utile per i numeri di telefono se desideri aggiungere <a href=”tel:XXX-XXXX”> direttamente ai numeri di telefono ma non vuoi che il numero di telefono tenti di aprire un'app del telefono sul desktop. E poi inizi a dover nascondere e mostrare i contenuti per desktop rispetto a dispositivi mobili. Basta saltare il mal di testa e approfittare del fatto che un client di posta elettronica sta finalmente facendo qualcosa per aiutarti.

Opzione 2: ignora tutti gli stili di collegamento

Un'altra opzione è quella di impostare il proprio stile predefinito che verrà applicato a tutti i collegamenti in un'e-mail. Questa opzione è perfetta se desideri che i link dell'indirizzo o del numero di telefono abbiano lo stesso aspetto degli altri link mantenendo le funzionalità fornite da Gmail.

Aggiungi questa dichiarazione di stile specifica di Gmail al tuo blocco <style> in <head> della tua email, in questo modo:

<style type="text/css">
    u + #body a {
    	  color: inherit;
    	  text-decoration: none;
    	  font-size: inherit;
    	  font-family: inherit;
    	  font-weight: inherit;
    	  line-height: inherit;
    }
</style>

Quindi aggiungi l'ID "body" al tag body:

<body id="body">
</body>

La "u" sottolineata è un metodo di targeting per Gmail. Converte il doctype in un tag sottolineato e Gmail è l'unico client che si comporta in questo modo. Pertanto, l'utilizzo del tag di sottolineatura con il selettore di pari livello adiacente di un div o id/class su quel div in CSS è un metodo unico per indirizzare solo i client Gmail (almeno per il momento). In questo esempio, abbiamo usato un id di "body".

Con questo metodo, se vuoi che i link nella tua email abbiano stili leggermente diversi, questo dovrà essere aggiunto in linea a quei link specifici poiché questa tecnica sopra modellerà tutti i link come sono stati definiti nella dichiarazione di stile.

Tuttavia, c'è un piccolo avvertimento con questo metodo.

Non funziona quando gli utenti di Gmail hanno le immagini disattivate per impostazione predefinita e poi le abilitano. Ciò è dovuto a un bug in Gmail che modifica in modo improprio lo stile una volta abilitate le immagini. Lo sviluppatore di posta elettronica Remi Parmentier ha qualche dettaglio in più su questo bug.

Opzione 3: aggiungi il tag <a> e creali tu stesso i link

Collegando in modo proattivo gli elementi che Gmail collegherebbe automaticamente, hai un maggiore controllo sui loro stili e colori. Questa opzione è perfetta se vuoi anche cambiare la posizione in cui si collega il contenuto , Forse hai una pagina di contatto sul tuo sito web a cui preferiresti portare gli abbonati invece di far loro aprire automaticamente l'app di navigazione del loro telefono o chiamarti istantaneamente direttamente.

<a style="color:#4B525D; text-decoration:none;" href="https://www.litmus.com/contact-us/">675 Massachusetts Ave.<br />Cambridge, MA 02139, USA</a>

Nell'esempio sopra, l'indirizzo fisico è di colore grigio senza sottolineatura ed è collegato alla pagina dei contatti del nostro sito web. Ciò impedirà a Gmail di applicare lo stile e la funzionalità predefiniti.

Arrivederci, link blu di Gmail

Con uno dei nostri tre metodi, i collegamenti blu non elimineranno più il design della tua email e lo faranno sembrare rotto in Gmail. Ed è fantastico, perché le e-mail non funzionanti possono danneggiare il coinvolgimento e le conversioni (e sicuramente non lo vuoi).

Hai domande sui nostri metodi? O hai un'altra soluzione da condividere? Fateci sapere nei commenti qui sotto.

Crea e-mail sul marchio e prive di errori con Litmus

Guarda come appaiono le tue email (non più link blu, giusto?) su oltre 90 client di posta, app e dispositivi, incluso Gmail. Dì addio alle email rotte. Wow!

Inizia la tua prova gratuita →

Pubblicato originariamente il 13 ottobre 2017 da Jaina Mistry. Ultimo aggiornamento il 16 luglio 2021.

Condividi, grazie!

Cosa devi sapere per gestire i 3 tipi di abbonati e-mail inattivi

Scopri come approcciare gli iscritti inattivi in base al tipo di iscritti alle email inattivi in modo da poter creare un'efficace strategia di re-engagement.
Leggi di più

I nostri esempi e strategie di email marketing per il giorno dei single preferiti

Le e-mail per la Giornata dei single stanno prendendo piede in tutto il mondo (non solo in Cina). Guarda 8 esempi di email per ispirare la tua campagna e le strategie per iniziare a pianificare.
Leggi di più

Matrice di metriche e-mail olistiche: stai vedendo l'intera immagine?

Guarda il quadro completo delle prestazioni dell'email marketing con metriche e-mail olistiche a breve e lungo termine. E crea subito campagne ad alto rendimento.
Leggi di più

Come mettere fuori gioco le email del Black Friday e del Cyber Monday (BF/CM)

Distinguiti e converti gli abbonati con queste strategie collaudate per le e-mail del Black Friday Cyber Monday ed esempi perfetti a cui ispirarsi.
Leggi di più

Rendering di posta elettronica di Outlook: come ho imparato a smettere di preoccuparmi e ad amare Outlook

Ti chiedi perché le tue e-mail hanno un brutto aspetto in Outlook? Scopri i problemi di rendering e visualizzazione delle e-mail che potresti incontrare e come risolverli per la perfezione dell'e-mail.
Leggi di più