Frustrat de linkurile albastre din e-mail? Cucerește-i pentru bine

Publicat: 2021-07-24

Link-uri albastre în e-mail: sunt o caracteristică utilă de utilizare, dar prea des provoacă bătăi de cap pentru agenții de marketing prin e-mail care doresc să creeze campanii gânditoare, pe marcă.

De-a lungul anilor, am văzut mai multe moduri de a gestiona linkurile albastre în e-mailurile HTML, de la simplu la complex.

Dar care tehnici funcționează cel mai bine? Și cum pot agenții de marketing să asigure un design frumos de e-mail fără a sacrifica funcționalitatea utilă a unui e-mail? În acest ghid, ne vom uita la ce sunt linkurile albastre și la cea mai bună modalitate de a le împiedica să vă distrugă propriile e-mailuri. Pregătește-te să înveți:

Ce sunt link-urile albastre?
Ar trebui să le eliminați?
Cum să le schimbi pentru fiecare client de e-mail
Cazuri Edge ca rezervă (și pentru Outlook)

Anatomia unui e-mail spart (ediția a doua)

Atenție: există și alți vinovați de un e-mail spart

Erorile de e-mail te fac să te înfioră? Linkurile albastre sunt doar o modalitate prin care e-mailul tău poate părea rupt. Aflați în profunzime ceea ce vă poate distruge e-mailul și sfaturile și trucurile pentru a rămâne adevărat.

Dezvăluie probleme comune și remedieri →

Ce sunt link-urile albastre?

Linkurile albastre sunt exact așa cum sună: text într-un e-mail care adoptă stilul implicit albastru, subliniat, comun hyperlink-urilor. În marketingul prin e-mail, în special pe dispozitivele mobile, aceste legături albastre sunt create automat de clienții de e-mail pentru a oferi oamenilor opțiuni pentru salvarea sau interacțiunea cu informațiile.

În ultimii ani, Apple Mail și-a actualizat modul de gestionare a unora dintre aceste link-uri și nu le mai transformă în albastru. Pentru adrese și ore, dispozitivele iOS păstrează stilul original, dar adaugă o subliniere punctată pentru a indica faptul că acestea se pot face clic.

Deși acesta este un pas înainte pentru accesibilitate pentru unele dintre problemele legate de linkurile albastre, nu rezolvă toate problemele, deoarece mai mult decât adresele și orele pot fi afectate.

Cele mai multe versiuni iOS ale Apple Mail transformă numerele de telefon, adresele URL și adresele de e-mail în albastru, dar lasă adresele fizice și orele în culoarea originală (roșu, în exemplul de mai jos).

link-uri albastre în iOS Apple Mail

În iOS 13, conținutul este încă legat, dar culoarea stilului original este menținută:

legături automate în Apple Mail iOS 13

În testarea noastră, aceste lucruri sunt candidații principali pentru a deveni conținut legat (albastru sau altfel):

Adrese
Datele
Adrese de email
Adresele URL ale site-urilor web
Times
Numere de telefon

Beneficiile linkurilor albastre: ar trebui să le eliminați sau nu?

În fiecare caz, informațiile asociate ar putea fi valoroase pentru abonați, indiferent dacă doresc să adauge un număr de telefon la lista de contacte sau să caute o adresă online. Deși sunt enervante din punct de vedere al mărcii, linkurile albastre sunt de fapt excelente pentru utilizare și accesibilitate, oferind funcționalități critice.

Acest lucru aduce dezbaterea: ar trebui să trecem peste acest comportament în primul rând?

Pe de o parte, dorim ca design-urile noastre de e-mail să rămână consecvente și conform mărcii. Clienții de e-mail care depășesc stilul nostru pot provoca surprize, enerva părțile interesate și pot cauza probleme de accesibilitate. Pe de altă parte, oamenii se pot baza pe această funcționalitate și se așteaptă să poată lua măsuri cu privire la informațiile dintr-un e-mail.

Deci, ce ar trebui să facă designerii de e-mail?

Părerea noastră este că anularea stilurilor – dar nu și funcționalității – acestor link-uri este cea mai bună abordare. Soluția ideală pentru link-urile albastre ar trebui să păstreze capacitatea de a acționa asupra acelor link-uri generate automat, dar să ne permită să stilăm aceste link-uri, nu sistemul de operare sau clientul de e-mail.

Unii ar susține că trecerea peste stilul albastru subliniat este prea departe. Cu toate acestea, comportamentul implicit are probleme serioase de accesibilitate pe care le putem combate. De exemplu, uitați-vă la acest subsol de e-mail cu linkuri albastre adăugate la adresa:

link albastru în subsolul e-mailului

Este un design obișnuit: text alb pe fundal negru, cu text mic pentru a menține concentrarea asupra conținutului de deasupra acestuia. Când informațiile sunt legate și se aplică stilul albastru, contrastul este extrem de scăzut. Oricine are deficiențe de vedere – sau cei cu vedere excelentă care utilizează un ecran estompat sau un dispozitiv mobil într-un cadru însorit – va avea un timp extrem de dificil să consume aceste informații. O caracteristică utilă se transformă într-o experiență frustrantă.

Nici toți clienții de e-mail tratează conectarea automată la fel. În timp ce linkurile albastre sunt cele mai comune vinovate, unii clienți păstrează culoarea fontului, dar adaugă o subliniere subtilă. Unii clienți leagă numere de telefon, dar nu adrese. Cu toată această inconsecvență, poate fi frustrant de gestionat.

Deci, cum pot designerii de e-mail să se ocupe de linkurile albastre?

Cel mai bun mod de a anula stilul de conectare automată

Deși ne-am uitat la diferite soluții în trecut, cum ar fi direcționarea textului legat în mod obișnuit cu intervale și clase sau inserarea de caractere nevizibile în acel text pentru a distruge comportamentul, cea mai bună soluție pe care am găsit-o este să ne bazăm pe CSS încorporat. pentru a suprascrie stilul de link automat. Apoi, adăugați valori, cum ar fi sublinierea și culorile de pe marcă, pentru a le face pe oameni să știe că conținutul este încă pe care se poate face clic. Ideal pentru utilizare și accesibilitate.

Această metodă are multe de făcut. Poti:

Setați-vă propriile stiluri pe text.
Utilizați stiluri diferite pentru link-uri diferite — nu forțează un singur stil într-un e-mail.
Păstrați funcționalitatea introdusă de clienții de e-mail și sistemele de operare.
Menține stilul cu ușurință.

Acesta este un câștig-câștig atât pentru tine, cât și pentru abonații tăi.

Singura avertizare? Diferiți clienți de e-mail fac lucruri diferite atunci când conectează automat textul, așa că aveți nevoie de mai multe reguli CSS pentru a înlocui stilul.

E-mailurile tale au link-uri albastre?

Aflați întotdeauna când clienții de e-mail își actualizează redarea e-mailului cu Litmus Email Previews. Previzualizați-vă e-mailurile în toți clienții și dispozitivele de e-mail populare și identificați erorile înainte de a trimite.

Aflați mai multe →

Suprascrierea linkurilor albastre în Apple Mail

Când se creează linkuri în jurul textului, Apple Mail adaugă atribute suplimentare acelor linkuri dincolo de href obișnuit. Un exemplu simplu este următorul:

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

Am acoperit mai multe moduri de a gestiona linkurile albastre iOS în trecut. Din fericire, tot ce trebuie să faceți acum este să vizați elemente cu atribute specifice și să înlocuiți stilul pentru acele elemente.

În blocul de stil al e-mailului, adăugați următoarele pentru a viza linkurile adăugate de Apple și pentru a forța acel text să moștenească stilul de la elementul părinte:

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;
}

Funcționalitatea va fi în continuare acolo, dar textul va fi stilat așa cum ați vrut inițial.

Pentru a vă asigura că utilizatorii știu că conținutul se poate face clic, modificați valoarea pentru culoare de la moștenire la un cod de culoare hexadecimal care se potrivește cu designul mărcii dvs. (de exemplu, #77d6fc pentru albastru deschis) și modificați valoarea pentru decorarea textului la subliniat.

Înlocuirea linkurilor albastre în Gmail

În loc să adauge atribute textului legat automat, Gmail face cu totul altceva. Când procesează codul HTML al unui e-mail, Gmail va converti doctype într-un element de subliniere (u). Știind acest lucru, puteți apoi adăuga un cârlig în propriul dvs. HTML pentru a viza elemente numai pentru Gmail. Acest lucru se face de obicei prin adăugarea unui ID la elementul body.

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

Deși există câteva modalități de a remedia linkurile albastre Gmail, aceasta este recomandarea noastră: vizați toate linkurile conținute în corpul Gmail cu următoarele în eticheta de stil, înlocuind orice stil adăugat în acest proces:

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;
}

Folosește exact aceleași proprietăți CSS ca trucul Apple Mail, doar aplicat în mod specific Gmail.

Nu uitați să actualizați valorile de culoare și de decor text pentru a le face evident abonaților că pot face clic pe linkurile automate. Din nou, unii preferă opțiunea, așa că nu le ascunde.

Suprascrierea linkurilor albastre în Samsung Mail

Samsung Mail folosește o tehnică similară cu Gmail. Totuși, în loc să convertească un element în altul, Samsung Mail va adăuga un anumit ID la e-mail numit „MessageViewBody”. La fel ca în Gmail, vizați acel ID și orice linkuri conținute în blocul dvs. de stil:

#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;
}

Din nou, sunt folosite exact aceleași proprietăți CSS ca și înainte. Și veți dori să schimbați valoarea de culoare a mărcii dvs. și să subliniați linkul dacă acesta face parte din ghidul dvs. de design.

Toti impreuna acum

Deși ar fi convenabil să înlănțuim toți selectoarele CSS de mai sus într-o singură regulă, Gmail elimină CSS folosind selectoare de atribute, astfel încât remedierea ar fi eliminată din Gmail, permițând linkurilor albastre să circule liber.

Prin urmare, ar trebui să păstrați toate cele trei reguli separate. Vestea bună este că, după ce sunt adăugate la șabloanele de e-mail, nu trebuie să faceți nimic suplimentar în codul dvs. pentru a elimina linkurile albastre de la majoritatea clienților de e-mail.

Combinat, HTML-ul dvs. ar putea arăta astfel:

<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>

Iată un exemplu despre cum ar putea arăta dacă nu ați făcut nimic (fără remediere), ați elimina stilul implicit fără a-l adăuga pe al dvs. (cu remediere) și ați înlocui stilul implicit cu al dvs. (cu remediere stilată):

Fara reparatie	Cu fix	Cu fix stilizat

Gestionarea cazurilor marginale pentru codificatorul just-in-case (și Outlook)

După cum probabil știți, există întotdeauna cazuri de margine când vine vorba de design de e-mail. Legăturile albastre nu sunt diferite. Unii clienți de e-mail vor conecta în continuare textul automat. Și pentru că aplicațiile de e-mail se schimbă la fiecare 1-2 zile, cei trei clienți de mai sus ar putea introduce foarte ușor o actualizare care încalcă aceste remedieri.

Pentru aceste cazuri marginale, puteți adopta o abordare diferită.

Această tehnică implică împachetarea candidaților cu linkuri automate cu un element care este apoi vizat prin CSS în capul unui e-mail. Elementul container are o clasă aplicată pentru direcționare. Înainte ca designerii să-și dea seama că ar putea folosi hack-ul x-apple-data-detectors, acest truc a fost folosit în mod obișnuit pentru link-urile albastre Apple Mail, așa că veți vedea în mod obișnuit ceva de genul „appleLinks” folosit pentru clasă, dar poate fi orice.

În exemplul nostru, vom folosi clasa „blueLinks”:

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

Deoarece clienții de e-mail vor adăuga un link în acel element, vizați-l în CSS în blocul de stil al e-mailului și înlocuiți anumite proprietăți CSS:

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

Aceasta poate fi o soluție foarte robustă, dar necesită mai multă întreținere. Deoarece conținutul unui e-mail se poate schimba frecvent, urmărirea locului în care sunt aplicate acele clase și asigurarea faptului că este luat în considerare tot textul suspectat poate fi consumatoare de timp și predispusă la erori.

De aceea, recomandăm în mod obișnuit să folosiți cele trei soluții CSS încorporate de mai sus, revenind la soluția bazată pe clasă numai atunci când testarea arată că este nevoie de aceasta.

Remedierea dvs. pentru clienții desktop Outlook

Aplicațiile mobile Outlook pot fi remediate cu soluția de mai sus, dar această remediere nu va funcționa cu clienții desktop Outlook.

Pentru clienții desktop Outlook, adresele URL și adresele de e-mail vor apărea întotdeauna ca culori implicite dacă nu le încadrați în etichete <a>. În cele mai multe cazuri, veți dori ca acestea să fie conectate la pagina web sau adresa de e-mail care este prezentată, așa că adăugarea etichetei <a> cu atributul href și stilul acesteia ca link asigură o experiență bună pentru abonat.

Dacă nu doriți să arate ca un link, puteți adăuga în continuare eticheta <a> și să o stilați astfel încât să arate ca restul copiei.

În cazuri de margine, este posibil să aveți un client care are nevoie ca adresa URL să arate ca o copie obișnuită și să nu fie conectată. În acest caz, singura modalitate de a realiza acest lucru este adăugând o mulțime de tălpi cu lățime zero pe tot linkul:

www.turnesol. com devine w&zwj;ww&zwj;.&zwj;litm&zwj;us.&zwj;com

Acesta nu este cel mai frumos lucru, dar funcționează. Cu toate acestea, poate provoca fricțiuni cu abonații dvs. dacă încearcă să copieze și să lipească adresa URL. Uneori, &zwj; apar ciudat sau interferează atunci când sunt lipite în diferite programe. De exemplu, copierea și lipirea adresei URL atunci când este codificată așa cum este mai sus în bara de adrese din Firefox are ca rezultat o căutare pe Google, în loc să vă conducă direct la Litmus.com:

copierea și lipirea unei legături cu elemente de tăiere cu lățime zero într-un browser

Așadar, aceasta este ceea ce eu numesc o soluție de ultimă instanță-de-partea-de-partea-client-nu-va-asculta-motivul.

Această remediere nu funcționează pentru adresele de e-mail și, din experiența mea, nu am găsit o soluție pentru a crea o adresă de e-mail fără stil, pe care nu se poate da clic, care să funcționeze pentru fiecare furnizor de servicii de e-mail (ESP). Pentru unele ESP-uri, puteți utiliza o etichetă <a> fără un atribut href sau un <a href="#”>. Dar unele ESP-uri nu vă vor lăsa să trimiteți un e-mail cu acele hack-uri.

Remediați stilul, nu funcționalitatea

Deși este posibil să doriți să eliminați legăturile automate albastre de dragul unui design perfect cu pixeli, amintiți-vă cui este adresa dvs. de e-mail: abonații dvs. Clienții de e-mail au intenții bune să facă clic pe lucruri precum adrese, date și numere de telefon – iar mulți oameni le plac și așteaptă cu nerăbdare să le folosească în acest fel. Nu le ascunde. În schimb, transformați-le pentru a se potrivi cu designul e-mailului dvs. Veți face fericiți atât părțile interesate, cât și abonații.

Creați e-mailuri de marcă, fără erori, cu Litmus

Vedeți cum arată e-mailurile dvs. (nu mai sunt linkuri albastre, nu?) pe peste 100 de clienți de e-mail, aplicații și dispozitive. Spune la revedere e-mailurilor sparte. Uf!

Începeți perioada de încercare gratuită →

Publicat inițial pe 2 iulie 2019, de Jason Rodriguez. Ultima actualizare pe 23 iulie 2021.