Бесят синие ссылки в email? Избавьтесь от них навсегда — КРИПТА, ЗАРАБОТОК, АРБИТРАЖ, РАССЫЛКИ, ИНФО О СЛИВАХ/УТЕЧКАХ/ВЗЛОМАХ БАЗ ДАННЫХ

Синие ссылки в email: это полезная функция юзабилити, но слишком часто она становится головной болью для email-маркетологов, стремящихся создавать продуманные и фирменные кампании.

За годы работы мы видели множество способов работы с синими ссылками в HTML-письмах, от простых до сложных.

Но какие методы работают лучше всего? И как маркетологи могут обеспечить красивый дизайн email, не жертвуя полезной функциональностью? В этом руководстве мы рассмотрим, что такое синие ссылки, и как лучше всего предотвратить их появление в ваших письмах. Приготовьтесь узнать:

— Что такое синие ссылки?

— Стоит ли их удалять?

— Как изменить их для каждого почтового клиента

— Краевые случаи в качестве запасного варианта (и для Outlook)

## Что такое синие ссылки?

Синие ссылки — это именно то, как они звучат: текст в письме, который принимает стандартный синий подчеркнутый стиль, характерный для гиперссылок. В email-маркетинге — особенно на мобильных устройствах — эти синие ссылки автоматически создаются почтовыми клиентами, чтобы предоставить людям варианты сохранения или взаимодействия с информацией.

В последние годы Apple Mail обновил обработку некоторых из этих ссылок и больше не делает их синими. Для адресов и времени устройства на iOS сохраняют исходный стиль, но добавляют пунктирное подчеркивание, чтобы указать, что они кликабельны.

Хотя это шаг вперед в плане доступности для некоторых проблем с синими ссылками, это не решает все проблемы, так как затронуто может быть больше, чем просто адреса и время.

Большинство версий Apple Mail на iOS делает телефонные номера, URL-адреса и email-адреса синими — но оставляет физические адреса и время в исходном стиле (красном, в примере ниже).

В iOS 13 контент по-прежнему является ссылкой, но сохраняется исходный цвет стиля:

В ходе нашего тестирования мы выяснили, что эти элементы являются главными кандидатами на то, чтобы стать связанным контентом (синим или иным):

— Адреса

— Даты

— Email-адреса

— URL-адреса сайтов

— Время

— Телефонные номера

## Преимущества синих ссылок: стоит ли их удалять или нет?

В каждом случае связанная информация может быть ценна для подписчиков, хотят ли они добавить телефонный номер в список контактов или найти адрес в интернете. Хотя с точки зрения брендинга это раздражает, синие ссылки отлично подходят для юзабилити и доступности, предоставляя критически важную функциональность.

Это вызывает дискуссию: стоит ли нам вообще переопределять это поведение?

С одной стороны, мы хотим, чтобы дизайн наших писем оставался последовательным и соответствовал бренду. Почтовые клиенты, переопределяющие наши собственные стили, могут вызывать сюрпризы, раздражать заинтересованных сторон и вызывать проблемы с доступностью. С другой стороны, люди могут полагаться на эту функцию и ожидать, что смогут выполнять действия с информацией в письме.

Так что же делать email-дизайнерам?

На наш взгляд, переопределение стилей — *но не функциональности —* этих ссылок является лучшим подходом. Идеальное решение для синих ссылок должно сохранять возможность выполнять действия с этими автоматически сгенерированными ссылками, но позволять нам стилизовать эти ссылки, а не операционной системе или почтовому клиенту.

Некоторые могут возразить, что переопределение синего подчеркнутого стиля заходит слишком далеко. Однако стандартное поведение имеет серьезные проблемы с доступностью, с которыми мы можем бороться. Например, посмотрите на этот футер письма с синими ссылками, добавленными к адресу:

Это распространенный дизайн: белый текст на черном фоне с мелким шрифтом, чтобы сохранить фокус на контенте над ним. Когда информация связана ссылкой и применяется синий стиль, контрастность крайне низкая. Любой человек с нарушениями зрения — или те, кто с отличным зрением использует приглушенный экран или мобильное устройство в солнечную погоду — будет испытывать крайние трудности с восприятием этой информации. Полезная функция превращается в разочаровывающий опыт.

Не все почтовые клиенты относятся к автоматическому связыванию одинаково. Хотя синие ссылки являются наиболее частым виновником, некоторые клиенты сохраняют цвет шрифта, но добавляют едва заметное подчеркивание. Некоторые клиенты связывают телефонные номера, но не адреса. Со всей этой непоследовательностью может быть сложно справиться.

Итак, как email-дизайнеры могут бороться с синими ссылками?

## Лучший способ переопределить стиль автоматических ссылок

Хотя в прошлом мы рассматривали различные решения — такие как нацеливание на часто связываемый текст с помощью спанов и классов или вставка невидимых символов в этот текст для прерывания поведения — лучшим решением, которое мы нашли, является использование встроенного CSS для переопределения автоматического стиля ссылок. Затем добавьте такие значения, как подчеркивание и фирменные цвета, чтобы дать людям понять, что контент по-прежнему кликабелен. Идеально для юзабилити и доступности.

У этого метода много преимуществ. Вы можете:

— Задавать собственные стили для текста.

— Использовать разные стили для разных ссылок — это не навязывает один стиль для всего письма.

— Сохранять функциональность, введенную почтовыми клиентами и операционными системами.

— Легко поддерживать стилизацию.

Это беспроигрышный вариант как для вас, так и для ваших подписчиков.

Единственное предупреждение? Разные почтовые клиенты делают разные вещи при автоматическом связывании текста, поэтому вам понадобятся несколько CSS-правил для переопределения стиля.

### Переопределение синих ссылок в Apple Mail

При создании ссылок вокруг текста Apple Mail добавляет к этим ссылкам дополнительные атрибуты помимо обычного href. Простой пример:

В прошлом мы рассматривали множество способов работы с синими ссылками в iOS. К счастью, теперь все, что вам нужно сделать, — это нацелиться на элементы с определенными атрибутами и переопределить стиль для этих элементов.

В блоке стилей вашего письма добавьте следующее, чтобы нацелиться на ссылки, добавленные Apple, и заставить этот текст наследовать стиль от его родительского элемента:

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

Функциональность останется, но текст будет стилизован так, как вы изначально задумывали.

Чтобы люди знали, что контент кликабелен, измените значение color с inherit на HEX-код цвета, который соответствует дизайну вашего бренда (например, #77d6fc для светло-синего), и измените значение text-decoration на underline.

### Переопределение синих ссылок в Gmail

Вместо добавления атрибутов к автоматически связываемому тексту Gmail делает нечто совершенно иное. При обработке HTML-кода письма Gmail преобразует doctype в элемент подчеркивания (u). Зная это, вы можете добавить хук в свой собственный HTML, чтобы нацеливаться на элементы только для Gmail. Обычно это делается путем добавления ID к элементу body.

Хотя есть несколько способов исправить синие ссылки в Gmail, вот наша рекомендация: нацельтесь на все ссылки, содержащиеся в body в Gmail, с помощью следующего кода в вашем теге 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; }

Он использует те же самые свойства CSS, что и трюк с Apple Mail, просто применяется конкретно к Gmail.

Не забудьте обновить значения color и text-decoration, чтобы сделать очевидным для подписчиков, что они могут кликать на автоматические ссылки. Опять же, некоторым людям нравится эта опция, так что не скрывайте ее от них.

### Переопределение синих ссылок в Samsung Mail

Samsung Mail использует технику, аналогичную Gmail. Однако вместо преобразования одного элемента в другой, Samsung Mail добавит определенный ID к письму под названием «MessageViewBody». Как и в случае с Gmail, нацельтесь на этот ID и любые ссылки, содержащиеся внутри, в вашем блоке стилей:

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

Опять же, используются те же свойства CSS, что и раньше. И вы захотите заменить их на цветовой код вашего бренда и подчеркнуть ссылку, если это часть вашего руководства по дизайну.

### Все вместе сейчас

Хотя было бы удобно объединить все вышеперечисленные селекторы CSS в одно правило, Gmail удаляет CSS, использующий селекторы атрибутов, поэтому исправление будет удалено из Gmail, что позволит синим ссылкам свободно появляться.

Поэтому вам следует держать все три правила раздельно. Хорошая новость заключается в том, что после их добавления в шаблоны писем вам не нужно делать ничего дополнительного в вашем коде, чтобы удалить синие ссылки из большинства почтовых клиентов.

В совокупности ваш HTML может выглядеть так:

<здесь идет ваш код письма как обычно>

Вот пример того, как это может выглядеть, если вы ничего не делали (без исправления), удалили стандартный стиль, не добавив свой (с исправлением), и заменили стандартный стиль своим собственным (со стилизованным исправлением):

## Обработка краевых случаев для кодеров на всякий случай (и Outlook)

Как вы могли знать, всегда есть краевые случаи, когда речь идет о дизайне email. Синие ссылки не исключение. Некоторые почтовые клиенты все равно будут автоматически связывать текст. И поскольку почтовые приложения меняются каждые 1-2 дня, три вышеуказанных клиента могут легко выпустить обновление, которое сломает эти исправления.

Для этих краевых случаев вы можете применить другой подход.

Этот метод включает обертывание кандидатов на автоматическое связывание элементом, который затем нацеливается через CSS в head письма. Элемент-контейнер имеет класс, применяемый для нацеливания. До того, как дизайнеры поняли, что могут использовать хак x-apple-data-detectors, этот трюк обычно использовался для синих ссылок в Apple Mail, поэтому вы часто увидите что-то вроде «appleLinks», используемое для класса, но это может быть что угодно.

В нашем примере мы будем использовать класс «blueLinks»:

+1 (800) 123-4567

Поскольку почтовые клиенты добавят ссылку внутри этого элемента, нацельтесь на нее в CSS в блоке стилей вашего письма и переопределите определенные свойства CSS:

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

Это может быть очень надежным решением, но оно требует большего обслуживания. Поскольку контент письма может часто меняться, отслеживание того, где применяются эти классы, и обеспечение учета всего предполагаемого текста может занять много времени и привести к ошибкам.

Вот почему мы обычно рекомендуем использовать три вышеуказанных решения со встроенным CSS, прибегая к решению на основе классов только тогда, когда тестирование показывает необходимость в этом.

### Ваше исправление для десктопных клиентов Outlook

Мобильные приложения Outlook можно исправить с помощью решения для краевых случаев, описанного выше, но это исправление не сработает с десктопными клиентами Outlook.

Для десктопных клиентов Outlook URL-адреса и email-адреса всегда будут отображаться цветами по умолчанию, если вы не обернете их в теги . В большинстве случаев вы захотите, чтобы они ссылались на веб-страницу или email-адрес, который представлен, поэтому добавление тега с атрибутом href и стилизацией его как ссылки обеспечивает хороший опыт для подписчика.

Если вы не хотите, чтобы это выглядело как ссылка, вы все равно можете добавить тег и стилизовать его так, чтобы он выглядел как остальной текст.

В краевых случаях у вас может быть клиент, которому нужно, чтобы URL выглядел как обычный текст и не был связан ссылкой. В этом случае единственный способ сделать это — добавить множество соединителей нулевой ширины по всей ссылке:

**www.litmus.****com** становится **w‍ww‍.‍litm‍us.‍com**

Это не самое красивое зрелище, но это работает. Однако это может вызвать трудности у ваших подписчиков, если они попытаются скопировать и вставить URL. Иногда ‍ отображаются странно или мешают при вставке в разные программы. Например, копирование и вставка URL, закодированного так, как показано выше, в адресную строку Firefox приводит к поиску в Google вместо того, чтобы направить вас прямо на Litmus.com:

Так что я называю это исправлением последней инстанции, когда клиент не хочет слушать доводы разума.

Это исправление не работает для email-адресов, и, по моему опыту, я не нашел решения для создания нестилизованного, некликабельного email-адреса, который работал бы для каждого провайдера email-услуг (ESP). Для некоторых ESP вы можете использовать тег без атрибута href или . Но некоторые ESP не позволят вам отправить письмо с этими хаками.

## Исправляйте стиль, а не функциональность

Хотя вы можете захотеть удалить синие автоматические ссылки ради пиксельно идеального дизайна, помните, для кого ваше письмо: для ваших подписчиков. У почтовых клиентов благие намерения, когда они делают такие вещи, как адреса, даты и кликабельные телефонные номера — и многим людям нравится и хочется использовать их именно так. Не скрывайте их. Вместо этого трансформируйте их, чтобы они соответствовали дизайну вашего письма. Вы сделаете счастливыми и своих заинтересованных лиц, и своих подписчиков.

*Изначально опубликовано 2 июля 2019 года Джейсоном Родригесом. Последнее обновление 23 июля 2021 года.*

Related Posts