Frustrato dai link blu nelle e-mail? Conquistarli per sempre

Pubblicato: 2021-07-24

Link blu nelle e-mail: sono un'utile funzionalità di usabilità, ma troppo spesso causano grattacapi agli e-mail marketer che cercano di progettare campagne ponderate e on-brand.

Nel corso degli anni, abbiamo visto diversi modi di gestire i collegamenti blu nelle e-mail HTML, da semplici a complessi.

Ma quali tecniche funzionano meglio? E in che modo i professionisti del marketing possono garantire un bel design di posta elettronica senza sacrificare funzionalità utili in un'e-mail? In questa guida, esamineremo cosa sono i collegamenti blu e il modo migliore per evitare che rovinino le tue e-mail. Preparati a imparare:

Cosa sono i link blu?
Dovresti rimuoverli?
Come cambiarli per ogni client di posta elettronica
Casi limite come fallback (e per Outlook)

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 →

Cosa sono i link blu?

I collegamenti blu sono esattamente come suonano: testo in un'e-mail che assume lo stile blu sottolineato predefinito comune ai collegamenti ipertestuali. Nell'email marketing, in particolare sui dispositivi mobili, questi collegamenti blu vengono creati automaticamente dai client di posta elettronica per fornire alle persone opzioni per salvare o interagire con le informazioni.

Negli ultimi anni, Apple Mail ha aggiornato la gestione di alcuni di questi collegamenti e non li rende più blu. Per indirizzi e orari, i dispositivi iOS mantengono lo stile originale ma aggiungono una sottolineatura punteggiata per indicare che sono cliccabili.

Sebbene questo sia un passo avanti per l'accessibilità per alcuni dei problemi relativi al collegamento blu, non risolve tutti i problemi perché possono essere interessati più di semplici indirizzi e tempi.

La maggior parte delle versioni iOS di Apple Mail trasforma i numeri di telefono, gli URL e gli indirizzi e-mail in blu, ma lascia indirizzi fisici e orari nel colore originale (rosso, nell'esempio seguente).

collegamenti blu in iOS Apple Mail

In iOS 13, il contenuto è ancora collegato, ma viene mantenuto il colore in stile originale:

collegamenti automatici in Apple Mail iOS 13

Nei nostri test, queste cose sono i primi candidati per diventare contenuti collegati (blu o altro):

Indirizzi
Date
Indirizzi email
URL del sito web
Volte
Numeri di telefono

I vantaggi dei link blu: rimuoverli o no?

In ogni caso, le informazioni collegate potrebbero essere preziose per gli abbonati, sia che vogliano aggiungere un numero di telefono all'elenco dei contatti sia che cerchino un indirizzo online. Sebbene fastidiosi dal punto di vista del marchio, i collegamenti blu sono in realtà ottimi per l'usabilità e l'accessibilità, fornendo funzionalità critiche.

Questo fa sorgere il dibattito: dovremmo ignorare questo comportamento in primo luogo?

Da un lato, vogliamo che i nostri progetti di e-mail rimangano coerenti e in linea con il marchio. I client di posta elettronica che annullano il nostro stile possono causare sorprese, rabbia nelle parti interessate e problemi di accessibilità. D'altra parte, le persone possono fare affidamento su questa funzionalità e aspettarsi di essere in grado di agire sulle informazioni contenute in un'e-mail.

Quindi, cosa dovrebbero fare i designer di posta elettronica?

È nostra opinione che sovrascrivere gli stili, ma non la funzionalità, di questi collegamenti sia l'approccio migliore. La soluzione ideale per i collegamenti blu dovrebbe mantenere la capacità di agire su quei collegamenti generati automaticamente, ma permetterci di modellare quei collegamenti, non il sistema operativo o il client di posta elettronica.

Alcuni potrebbero obiettare che ignorare lo stile blu e sottolineato sta andando troppo oltre. Tuttavia, il comportamento predefinito presenta seri problemi di accessibilità che possiamo combattere. Ad esempio, guarda questo piè di pagina e-mail con collegamenti blu aggiunti all'indirizzo:

collegamento blu nel piè di pagina dell'e-mail

È un design comune: testo bianco su sfondo nero, con testo piccolo per mantenere l'attenzione sul contenuto sopra di esso. Quando le informazioni sono collegate e viene applicato lo stile blu, il contrasto è estremamente basso. Chiunque abbia problemi di vista, o chi ha una vista eccellente che utilizza uno schermo oscurato o un dispositivo mobile in un ambiente soleggiato, avrà difficoltà a consumare queste informazioni. Una funzione utile si trasforma in un'esperienza frustrante.

Inoltre, non tutti i client di posta elettronica trattano il collegamento automatico allo stesso modo. Mentre i collegamenti blu sono il colpevole più comune, alcuni client mantengono il colore del carattere ma aggiungono una sottile sottolineatura. Alcuni clienti collegano i numeri di telefono ma non gli indirizzi. Con tutta questa incoerenza, può essere frustrante da gestire.

Quindi, come possono i designer di posta elettronica gestire i collegamenti blu?

Il modo migliore per ignorare lo stile di collegamento automatico

Sebbene abbiamo esaminato diverse soluzioni in passato, come il targeting del testo comunemente collegato con intervalli e classi, o l'inserimento di caratteri non visibili in quel testo per interrompere il comportamento, la soluzione migliore che abbiamo trovato è affidarsi a CSS incorporati per ignorare lo stile di collegamento automatico. Quindi, aggiungi valori come sottolineature e colori del marchio per far sapere alle persone che il contenuto è ancora selezionabile. Ideale per usabilità e accessibilità.

Questo metodo ha molto da offrire. Puoi:

Imposta i tuoi stili sul testo.
Usa stili diversi per collegamenti diversi: non impone uno stile in un'e-mail.
Conserva le funzionalità introdotte dai client di posta elettronica e dai sistemi operativi.
Mantieni lo stile facilmente.

Questo è un vantaggio sia per te che per i tuoi abbonati.

L'unico avvertimento? Diversi client di posta fanno cose diverse durante il collegamento automatico del testo, quindi sono necessarie più regole CSS per sovrascrivere lo stile.

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 elettronica più diffusi e individua gli errori prima di inviarle.

Scopri di più →

Sovrascrivere i collegamenti blu in Apple Mail

Quando si creano collegamenti attorno al testo, Apple Mail aggiunge attributi aggiuntivi a tali collegamenti oltre al solito href. Un semplice esempio è il seguente:

<a href="#" x-apple-data-detectors="true">

Abbiamo coperto molti modi per gestire i collegamenti blu iOS in passato. Fortunatamente, tutto ciò che devi fare ora è individuare elementi con attributi specifici e sovrascrivere lo stile per quegli elementi.

Nel blocco stile della tua email, aggiungi quanto segue per indirizzare i link aggiunti da Apple e forza quel testo ad ereditare lo stile dal suo elemento genitore:

a[x-apple-data-detectors] {
color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
}

La funzionalità sarà ancora lì, ma il testo avrà lo stile che avevi originariamente previsto.

Per assicurarti che le persone sappiano che il contenuto è cliccabile, cambia il valore per il colore da eredita a un codice colore esadecimale che corrisponda al design del tuo marchio (ad esempio # 77d6fc per azzurro) e cambia il valore per la decorazione del testo in sottolineato.

Sostituzione dei link blu in Gmail

Invece di aggiungere attributi al testo collegato automaticamente, Gmail fa qualcos'altro. Durante l'elaborazione dell'HTML di un'e-mail, Gmail convertirà il doctype in un elemento sottolineato (u). Sapendo questo, puoi quindi aggiungere un hook nel tuo codice HTML per indirizzare gli elementi solo per Gmail. Questo è comunemente fatto aggiungendo un ID all'elemento body.

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

Sebbene ci siano alcuni modi per correggere i collegamenti blu di Gmail, questo è il nostro consiglio: scegli come target tutti i collegamenti contenuti nel corpo in Gmail con quanto segue nel tag di stile, ignorando qualsiasi stile aggiunto nel processo:

u + #body a {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
}

Utilizza le stesse esatte proprietà CSS del trucco di Apple Mail, applicate in modo specifico a Gmail.

Ricorda di aggiornare i valori del colore e della decorazione del testo per rendere ovvio agli abbonati che possono fare clic sui collegamenti automatici. Ancora una volta, alcune persone preferiscono l'opzione, quindi non nasconderla loro.

Sovrascrivere i collegamenti blu in Samsung Mail

Samsung Mail utilizza una tecnica simile a Gmail. Invece di convertire un elemento in un altro, tuttavia, Samsung Mail aggiungerà un ID specifico all'e-mail chiamato "MessageViewBody". Proprio come con Gmail, scegli come target quell'ID e tutti i link contenuti nel tuo blocco di stile:

#MessageViewBody a {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
}

Di nuovo, vengono utilizzate le stesse identiche proprietà CSS di prima. E ti consigliamo di scambiare con il valore del colore del tuo marchio e sottolineare il collegamento se fa parte della tua guida al design.

Adesso tutti insieme

Sebbene sarebbe conveniente concatenare tutti i selettori CSS di cui sopra in un'unica regola, Gmail rimuove i CSS utilizzando i selettori di attributo, quindi la correzione verrebbe rimossa da Gmail, consentendo ai collegamenti blu di spostarsi liberamente.

Pertanto, dovresti tenere separate tutte e tre le regole. La buona notizia è che dopo essere stati aggiunti ai modelli di posta elettronica, non è necessario eseguire ulteriori operazioni nel codice per rimuovere i collegamenti blu dalla maggior parte dei client di posta elettronica.

Combinato, il tuo HTML potrebbe apparire così:

<html>
	<head>
	<style>
a[x-apple-data-detectors] {
	color: #77d6fc !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

u + #body a {
	color: #77d6fc !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

#MessageViewBody a {
	color: #77d6fc !important;
	font-size: inherit !important;
	font-family: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}
</style>
</head>
<body id="body">

 <your email code goes here as normal>

</body>

Ecco un esempio di come potrebbe apparire se non facessi nulla (senza correzione), rimuovessi lo stile predefinito senza aggiungere il tuo (con correzione) e sostituissi lo stile predefinito con il tuo (con correzione stilizzata):

Senza correzione	Con correzione	Con correzione in stile

Gestione dei casi limite per il codificatore just-in-case (e Outlook)

Come forse saprai, ci sono sempre casi limite quando si tratta di progettare e-mail. I collegamenti blu non sono diversi. Alcuni client di posta collegheranno automaticamente il testo. E poiché le app di posta elettronica cambiano ogni 1-2 giorni, i tre client di cui sopra potrebbero facilmente introdurre un aggiornamento che interrompe tali correzioni.

Per questi casi limite, puoi adottare un approccio diverso.

Questa tecnica prevede il wrapping dei candidati con collegamento automatico con un elemento che viene quindi mirato tramite CSS nell'intestazione di un'e-mail. L'elemento contenitore ha una classe applicata per il targeting. Prima che i designer scoprissero che potevano usare l'hack x-apple-data-detectors, questo trucco era comunemente usato per i collegamenti blu di Apple Mail, quindi vedrai comunemente qualcosa come "appleLinks" usato per la classe, ma può essere qualsiasi cosa.

Nel nostro esempio utilizzeremo la classe “blueLinks”:

<p class="blueLinks">+1 (800) 123-4567</p>

Poiché i client di posta elettronica aggiungeranno un collegamento all'interno di quell'elemento, indirizzalo nel CSS nel blocco di stile della tua email e sovrascriveranno le proprietà CSS specifiche:

.blueLinks a { 
            color:inherit !important; 
            text-decoration: none !important; 
}

Questa può essere una soluzione molto robusta, ma richiede più manutenzione. Poiché il contenuto di un'e-mail può cambiare frequentemente, monitorare dove vengono applicate tali classi e garantire che tutto il testo sospetto venga contabilizzato può richiedere molto tempo ed essere soggetto a errori.

Ecco perché in genere consigliamo di utilizzare le tre soluzioni CSS incorporate sopra, ricorrendo alla soluzione basata sulla classe solo quando i test ne mostrano la necessità.

La tua soluzione per i client desktop Outlook

Le app per dispositivi mobili di Outlook possono essere risolte con la soluzione del caso limite sopra, ma tale correzione non funzionerà con i client desktop di Outlook.

Per i client desktop Outlook, gli URL e gli indirizzi e-mail verranno sempre visualizzati come colori predefiniti se non li racchiudi nei tag <a>. Nella maggior parte dei casi, vorrai che questi si colleghino alla pagina web o all'indirizzo email che viene presentato, quindi l'aggiunta del tag <a> con l'attributo href e lo stile come collegamento rende l'esperienza dell'abbonato buona.

Se non vuoi che assomigli a un collegamento, puoi comunque aggiungere il tag <a> e modellarlo in modo che assomigli al resto della copia.

Nei casi limite, potresti avere un client che ha bisogno che l'URL assomigli a una copia normale e non sia collegato. In questo caso, l'unico modo per farlo è aggiungere molti joiner di larghezza zero in tutto il collegamento:

www.cartina di tornasole. com diventa w&zwj;ww&zwj;.&zwj;litm&zwj;us.&zwj;com

Questa non è la cosa più bella, ma funziona. Tuttavia, potrebbe causare attrito con i tuoi abbonati se tentano di copiare e incollare l'URL. A volte &zwj; appaiono strani o interferiscono quando vengono incollati in programmi diversi. Ad esempio, copiando e incollando l'URL quando è codificato come è sopra nella barra degli indirizzi in Firefox si ottiene una ricerca su Google invece di portarti direttamente a Litmus.com:

copiare e incollare un collegamento con joiner a larghezza zero in un browser

Quindi questo è quello che io chiamo una soluzione di ultima istanza dal fondo del secchio che il cliente non ascolterà la ragione.

Questa correzione non funziona per gli indirizzi e-mail e, nella mia esperienza, non ho trovato una soluzione per creare un indirizzo e-mail senza stile e non cliccabile che funzioni per tutti i provider di servizi di posta elettronica (ESP). Per alcuni ESP, puoi utilizzare un tag <a> senza un attributo href o un <a href=”#”>. Ma alcuni ESP non ti consentono di inviare un'e-mail con quegli hack.

Fissa lo stile, non la funzionalità

Anche se potresti voler rimuovere i collegamenti automatici blu per il bene di un design perfetto per i pixel, ricorda a chi è rivolta la tua email: i tuoi abbonati. I client di posta elettronica hanno buone intenzioni nel rendere cliccabili elementi come indirizzi, date e numeri di telefono e molte persone apprezzano e non vedono l'ora di utilizzarli in questo modo. Non nasconderli. Invece, trasformali in modo che corrispondano al design della tua email. Renderai felici sia i tuoi stakeholder che i tuoi abbonati.

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

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

Inizia la tua prova gratuita →

Pubblicato originariamente il 2 luglio 2019 da Jason Rodriguez. Ultimo aggiornamento il 23 luglio 2021.