Sfrustrowany niebieskimi linkami w e-mailu? Pokonaj ich na dobre

Opublikowany: 2021-07-24

Niebieskie linki w wiadomościach e-mail: są przydatną funkcją użyteczności, ale zbyt często przyprawiają o ból głowy marketerów e-mailowych, którzy chcą zaprojektować przemyślane kampanie promujące markę.

Przez lata widzieliśmy wiele sposobów obsługi niebieskich linków w wiadomościach e-mail HTML, od prostych do złożonych.

Ale które techniki działają najlepiej? W jaki sposób marketerzy mogą zapewnić piękny wygląd wiadomości e-mail bez poświęcania przydatnych funkcji w wiadomości e-mail? W tym przewodniku przyjrzymy się, czym są niebieskie linki i najlepszym sposobem, aby zapobiec zniszczeniu przez nie Twoich e-maili. Przygotuj się do nauki:

Co to są niebieskie linki?
Czy powinieneś je usunąć?
Jak je zmienić dla każdego klienta poczty e-mail
Sprawy Edge jako awaryjne (i dla Outlooka)

Anatomia zepsutego e-maila (wydanie drugie)

Uwaga: istnieją inni sprawcy zepsutego e-maila

Czy błędy e-maili przyprawiają Cię o dreszcze? Niebieskie linki to tylko jeden ze sposobów, w jaki Twój e-mail może wyglądać na uszkodzony. Zapoznaj się dokładnie z tym, co może zepsuć Twój e-mail oraz ze wskazówkami i poradami, aby pozostać prawdziwymi.

Ujawnij typowe problemy i poprawki →

Co to są niebieskie linki?

Niebieskie linki są dokładnie takie, jak brzmią: tekst w wiadomości e-mail, który przyjmuje domyślny niebieski, podkreślony styl, wspólny dla hiperłączy. W e-mail marketingu — zwłaszcza na urządzeniach mobilnych — te niebieskie łącza są automatycznie tworzone przez klientów poczty e-mail, aby zapewnić ludziom opcje zapisywania informacji lub interakcji z nimi.

W ostatnich latach Apple Mail zaktualizował obsługę niektórych z tych linków i nie zmienia ich już na niebieski. W przypadku adresów i godzin urządzenia z systemem iOS zachowują oryginalny styl, ale dodają podkreślenie kropkowane, aby wskazać, że można je kliknąć.

Chociaż jest to krok naprzód w zakresie dostępności niektórych problemów z niebieskimi łączami, nie rozwiązuje wszystkich problemów, ponieważ może to mieć wpływ nie tylko na adresy i godziny.

Większość wersji Apple Mail na iOS zmienia numery telefonów, adresy URL i adresy e-mail na kolor niebieski, ale pozostaw fizyczne adresy i godziny w oryginalnym kolorze (czerwony, w poniższym przykładzie).

niebieskie linki w iOS Apple Mail

W iOS 13 zawartość jest nadal połączona, ale zachowany jest oryginalny styl:

automatyczne łącza w Apple Mail iOS 13

W naszych testach te rzeczy są głównymi kandydatami do stania się treściami z linkami (niebieskimi lub innymi):

Adresy
Daktyle
Adresy e-mail
Adresy URL witryn
Czasy
Numery telefoniczne

Korzyści z niebieskich linków: należy je usunąć, czy nie?

W każdym przypadku powiązane informacje mogą być cenne dla subskrybentów, niezależnie od tego, czy chcą dodać numer telefonu do swojej listy kontaktów, czy wyszukać adres w Internecie. Chociaż irytujące z perspektywy marki, niebieskie linki są w rzeczywistości świetne pod względem użyteczności i dostępności, zapewniając krytyczną funkcjonalność.

To wywołuje debatę: czy powinniśmy w pierwszej kolejności zlekceważyć to zachowanie?

Z jednej strony chcemy, aby nasze projekty e-maili pozostały spójne i zgodne z marką. Klienty poczty e-mail, które zastępują nasz własny styl, mogą powodować niespodzianki, złościć interesariuszy i powodować problemy z dostępnością. Z drugiej strony ludzie mogą polegać na tej funkcjonalności i oczekiwać, że będą w stanie podjąć działania na informacjach zawartych w wiadomości e-mail.

Co więc powinni zrobić projektanci poczty e-mail?

Naszym zdaniem najlepszym rozwiązaniem jest pominięcie stylów — ale nie funkcjonalności — tych linków. Idealne rozwiązanie dla niebieskich linków powinno zachować możliwość podejmowania działań na tych automatycznie generowanych linkach, ale pozwalać nam na stylizowanie tych linków, a nie systemu operacyjnego lub klienta poczty e-mail.

Niektórzy twierdzą, że pominięcie niebieskiej, podkreślonej stylizacji idzie za daleko. Jednak domyślne zachowanie ma poważne problemy z dostępnością, z którymi możemy sobie poradzić. Na przykład spójrz na tę stopkę e-maila z niebieskimi linkami dodanymi do adresu:

niebieski link w stopce e-maila

To częsty projekt: biały tekst na czarnym tle, z małym tekstem, aby skupić się na treści nad nim. Gdy informacje są połączone i zastosowana jest niebieska stylizacja, kontrast jest bardzo niski. Każdy, kto ma wadę wzroku – lub ten, kto ma doskonały wzrok, korzystający z przyciemnionego ekranu lub urządzenia mobilnego w słonecznym otoczeniu – będzie miał niezwykle trudny czas na przyswojenie tych informacji. Pomocna funkcja zamienia się w frustrujące doświadczenie.

Nie wszystkie klienty poczty e-mail również traktują automatyczne łączenie w ten sam sposób. Podczas gdy niebieskie linki są najczęstszym winowajcą, niektórzy klienci zachowują kolor czcionki, ale dodają subtelne podkreślenie. Niektórzy klienci łączą numery telefonów, ale nie adresy. Przy całej tej niespójności zarządzanie może być frustrujące.

Jak więc projektanci e-maili mogą radzić sobie z niebieskimi linkami?

Najlepszy sposób na pominięcie stylizacji auto-link

Chociaż w przeszłości przyjrzeliśmy się różnym rozwiązaniom — takim jak kierowanie na często linkowany tekst z zakresami i klasami lub wstawianie do tego tekstu niewidocznych znaków w celu przerwania zachowania — najlepszym rozwiązaniem, jakie znaleźliśmy, jest poleganie na osadzonym CSS aby przesłonić automatyczne style linków. Następnie dodaj wartości, takie jak podkreślenia i kolory marki, aby ludzie wiedzieli, że zawartość nadal można kliknąć. Idealny pod względem użyteczności i dostępności.

Ta metoda ma wiele zalet. Możesz:

Ustaw swój własny styl na tekst.
Używaj różnych stylów dla różnych linków — nie wymusza to jednego stylu w wiadomości e-mail.
Zachowaj funkcjonalność wprowadzoną przez klientów poczty e-mail i systemy operacyjne.
Łatwo utrzymaj stylizację.

Jest to korzystne zarówno dla Ciebie, jak i Twoich subskrybentów.

Jedyne zastrzeżenie? Różne klienty poczty e-mail robią różne rzeczy podczas automatycznego łączenia tekstu, więc potrzebujesz wielu reguł CSS, aby zastąpić style.

Czy w Twoich e-mailach znajdują się niebieskie linki?

Zawsze wiedz, kiedy klienci poczty e-mail zaktualizują renderowanie wiadomości e-mail dzięki podglądowi wiadomości e-mail Litmus. Podgląd wiadomości e-mail we wszystkich popularnych klientach i urządzeniach pocztowych oraz wykrywanie błędów przed wysłaniem.

Dowiedz się więcej →

Zastępowanie niebieskich łączy w Apple Mail

Podczas tworzenia łączy wokół tekstu Apple Mail dodaje dodatkowe atrybuty do tych łączy poza zwykłym atrybutem href. Prosty przykład jest następujący:

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

W przeszłości omówiliśmy wiele sposobów obsługi niebieskich łączy iOS. Na szczęście wszystko, co musisz teraz zrobić, to elementy docelowe z określonymi atrybutami i nadpisanie stylu dla tych elementów.

W bloku stylów wiadomości e-mail dodaj następujące elementy, aby kierować linki dodane przez Apple i wymusić, aby tekst odziedziczył styl z elementu nadrzędnego:

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

Funkcjonalność nadal będzie dostępna, ale styl tekstu będzie zgodny z pierwotnym zamierzeniem.

Aby upewnić się, że użytkownicy wiedzieli, że treść jest klikalna, zmień wartość koloru z dziedziczonego na kod koloru szesnastkowego, który pasuje do projektu Twojej marki (np. #77d6fc dla jasnoniebieskiego) i zmień wartość dekoracji tekstu na podkreślenie.

Zastępowanie niebieskich linków w Gmailu

Zamiast dodawać atrybuty do automatycznie połączonego tekstu, Gmail robi coś zupełnie innego. Podczas przetwarzania kodu HTML e-maila Gmail przekonwertuje doctype na element podkreślenia (u). Wiedząc o tym, możesz dodać hak do własnego kodu HTML, aby kierować elementy tylko dla Gmaila. Zwykle robi się to poprzez dodanie identyfikatora do elementu body.

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

Chociaż istnieje kilka sposobów naprawienia niebieskich linków Gmaila, zalecamy to: Kieruj wszystkie linki zawarte w treści w Gmailu za pomocą następujących elementów w tagu stylu, zastępując wszelkie dodane style:

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

Używa dokładnie tych samych właściwości CSS, co sztuczka Apple Mail, tylko zastosowana specjalnie do Gmaila.

Pamiętaj o zaktualizowaniu wartości koloru i dekoracji tekstu, aby subskrybenci mieli pewność, że mogą klikać automatyczne linki. Znowu niektórzy wolą tę opcję, więc nie ukrywaj jej przed nimi.

Zastępowanie niebieskich łączy w Samsung Mail

Samsung Mail używa podobnej techniki do Gmaila. Jednak zamiast konwertować jeden element na inny, Samsung Mail doda określony identyfikator do wiadomości e-mail o nazwie „MessageViewBody”. Podobnie jak w przypadku Gmaila, nakieruj ten identyfikator i wszystkie linki zawarte w bloku stylu:

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

Ponownie, używane są dokładnie te same właściwości CSS, co poprzednio. Jeśli jest to część przewodnika projektowego, zamień się na wartość koloru swojej marki i podkreśl link.

Teraz wszyscy razem

Chociaż wygodnie byłoby połączyć wszystkie powyższe selektory CSS w jedną regułę, Gmail usuwa CSS za pomocą selektorów atrybutów, więc poprawka zostałaby usunięta z Gmaila, umożliwiając swobodne poruszanie się niebieskich linków.

Dlatego powinieneś zachować wszystkie trzy zasady oddzielnie. Dobra wiadomość jest taka, że po dodaniu ich do szablonów wiadomości e-mail nie musisz robić nic więcej w swoim kodzie, aby usunąć niebieskie linki z większości klientów poczty e-mail.

W połączeniu Twój kod HTML może wyglądać tak:

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

Oto przykład tego, jak mogłoby to wyglądać, gdybyś nic nie zrobił (bez poprawki), usunął domyślny styl bez dodawania własnego (z poprawką) i zastąpił domyślną stylizację własnym (z poprawką stylizowaną):

Bez poprawki	Z poprawką	Ze stylizowaną poprawką

Obsługa przypadków brzegowych dla kodera just-in-case (i Outlooka)

Jak zapewne wiesz, zawsze zdarzają się skrajne przypadki, jeśli chodzi o projektowanie wiadomości e-mail. Niebieskie linki nie różnią się. Niektóre klienty poczty e-mail nadal będą automatycznie łączyć tekst. A ponieważ aplikacje poczty e-mail zmieniają się co 1-2 dni, trzej powyżej klienci mogą bardzo łatwo wprowadzić aktualizację, która łamie te poprawki.

W tych skrajnych przypadkach można zastosować inne podejście.

Ta technika polega na opakowaniu kandydatów do automatycznego linkowania elementem, który jest następnie kierowany za pośrednictwem CSS w nagłówku wiadomości e-mail. Element kontenera ma klasę zastosowaną do kierowania. Zanim projektanci zorientowali się, że mogą użyć hacka x-apple-data-detectors, ta sztuczka była powszechnie używana w przypadku niebieskich łączy Apple Mail, więc często zobaczysz coś w rodzaju „appleLinks” używane dla klasy, ale może to być wszystko.

W naszym przykładzie użyjemy klasy „blueLinks”:

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

Ponieważ klienci poczty e-mail dodadzą łącze w tym elemencie, umieść go w CSS w bloku stylów wiadomości e-mail i zastąp określone właściwości CSS:

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

Może to być bardzo solidne rozwiązanie, ale wymaga większej konserwacji. Ponieważ treść wiadomości e-mail może się często zmieniać, śledzenie miejsca zastosowania tych klas i zapewnianie, że cały podejrzany tekst jest uwzględniany, może być czasochłonne i podatne na błędy.

Dlatego zazwyczaj zalecamy korzystanie z trzech wbudowanych rozwiązań CSS powyżej, korzystając z rozwiązania opartego na klasach tylko wtedy, gdy testy wykażą taką potrzebę.

Twoja poprawka dla klientów desktopowych programu Outlook

Aplikacje mobilne Outlook można naprawić za pomocą powyższego rozwiązania brzegowego, ale ta poprawka nie będzie działać z klientami klasycznymi Outlook.

W przypadku klientów klasycznych programu Outlook adresy URL i adresy e-mail będą zawsze wyświetlane jako kolory domyślne, jeśli nie zostaną otoczone znacznikami <a>. W większości przypadków będziesz chciał, aby prowadziły one do wyświetlanej strony internetowej lub adresu e-mail, więc dodanie tagu <a> z atrybutem href i ustawienie go jako linku zapewnia dobre wrażenia subskrybenta.

Jeśli nie chcesz, aby wyglądał jak link, nadal możesz dodać tag <a> i nadać mu styl, aby wyglądał jak reszta kopii.

W skrajnych przypadkach możesz mieć klienta, który potrzebuje adresu URL, aby wyglądał jak zwykła kopia i nie był połączony. W tym przypadku jedynym sposobem na osiągnięcie tego jest dodanie wielu łączników o zerowej szerokości w całym łączu:

www.lakmus. com staje się w&zwj;ww&zwj;.&zwj;litm&zwj;us.&zwj;com

To nie jest najładniejsza rzecz, ale działa. Może to jednak powodować problemy z subskrybentami, jeśli spróbują skopiować i wkleić adres URL. Czasami &zwj; pokazują się dziwnie lub przeszkadzają po wklejeniu do różnych programów. Na przykład kopiowanie i wklejanie adresu URL, gdy jest on zakodowany tak, jak powyżej w pasku adresu w przeglądarce Firefox, powoduje wyszukiwanie w Google, zamiast przenosić Cię bezpośrednio do Litmus.com:

kopiowanie i wklejanie linku z łącznikami o zerowej szerokości do przeglądarki

To jest to, co nazywam poprawką ostatniej szansy, gdy klient nie chce słuchać, aby zrozumieć powód.

Ta poprawka nie działa w przypadku adresów e-mail, a z mojego doświadczenia wynika, że nie znalazłem rozwiązania umożliwiającego utworzenie niestylowanego, nieklikalnego adresu e-mail, który działałby dla każdego dostawcy usług poczty e-mail (ESP). W przypadku niektórych dostawców usług internetowych możesz użyć tagu <a> bez atrybutu href lub <a href=”#”>. Ale niektórzy ESP nie pozwolą ci wysłać e-maila z tymi hackami.

Napraw styl, a nie funkcjonalność

Chociaż możesz chcieć usunąć niebieskie automatyczne linki ze względu na doskonały wygląd, pamiętaj, dla kogo jest Twój e-mail: dla subskrybentów. Klienci poczty e-mail mają dobre intencje, aby takie rzeczy, jak adresy, daty i numery telefonów były klikalne – a wiele osób lubi i nie może się doczekać korzystania z nich w ten sposób. Nie ukrywaj ich. Zamiast tego przekształć je, aby pasowały do projektu wiadomości e-mail. Uszczęśliwisz zarówno swoich interesariuszy, jak i subskrybentów.

Twórz markowe, bezbłędne e-maile z Litmus

Zobacz, jak wyglądają Twoje e-maile (nie ma już niebieskich linków, prawda?) w ponad 100 klientach poczty e-mail, aplikacjach i urządzeniach. Pożegnaj się z niedziałającymi e-mailami. Uff!

Rozpocznij bezpłatny okres próbny →

Oryginalnie opublikowana 2 lipca 2019 r. przez Jasona Rodrigueza. Ostatnia aktualizacja 23 lipca 2021 r.

Udostępnij, dziękuję!

Jak łatwo zadziwić każdego subskrybenta obrazem tła wiadomości e-mail (+ kod, który to zrobi!)

Uzyskaj kod HTML i wskazówki dotyczące projektowania, których potrzebujesz, aby tworzyć efektowne obrazy tła w szablonach wiadomości e-mail. Już dziś możesz zacząć!

Czytaj więcej

Jak zrobić potężne podróże e-mailowe non-profit, które przykuwają uwagę?

Jakie są najlepsze praktyki tworzenia podróży zarządzania za pomocą e-mail marketingu? Dowiedz się, jak zacząć w 6 krokach i zobacz kilka przykładów z życia wziętych.

Czytaj więcej

20 wskaźników i wskaźników KPI w wiadomościach e-mail do mierzenia sukcesu i zachęcania do działania

Dowiedz się, jakich narzędzi marketingowych używają marketerzy zajmujący się analizą poczty e-mail, aby śledzić sukcesy, i zobacz, które z tych wskaźników i wskaźników KPI w wiadomościach e-mail należy dodać do własnych raportów dotyczących poczty e-mail.

Czytaj więcej

Jak wyrzucić e-maile z Czarnego Piątku i Cyberponiedziałku (BF/CM) poza park?

Wyróżnij się i konwertuj subskrybentów dzięki tym sprawdzonym strategiom e-maili z okazji Czarnego Piątku w Cyberponiedziałek oraz doskonałym przykładom, którymi można się zainspirować.

Czytaj więcej

Przygotuj się na przyszłość statystyk i analiz poczty e-mail: nagrywanie webinarów + dania na wynos

Podczas naszego webinaru podzieliliśmy się praktycznymi wskazówkami, które pomogą Ci przygotować się na przyszłość wglądu i analiz wiadomości e-mail. Obejrzyj nagranie teraz i przeczytaj nasze dania na wynos.

Czytaj więcej