Разочарованы синими ссылками в электронной почте? Покори их навсегда

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

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

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

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

Отмена синих ссылок в Gmail

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

Хотя есть несколько способов исправить синие ссылки Gmail, мы рекомендуем: настроить таргетинг на все ссылки, содержащиеся в теле Gmail, с помощью следующего тега стиля, переопределив любой добавленный стиль в процессе:

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

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

Отмена синих ссылок в Samsung Mail

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

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

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

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

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

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

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

Без исправления	С исправлением	Со стилизованным исправлением

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

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

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

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

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

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

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

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

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

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

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

Если вы не хотите, чтобы он выглядел как ссылка, вы все равно можете добавить тег <a> и оформить его так, чтобы он выглядел как остальная часть копии.

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

www.litmus. com становится w & zwj; ww & zwj;. & zwj; litm & zwj; us. & zwj; com

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

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

Это исправление не работает для адресов электронной почты, и, по моему опыту, я не нашел решения для создания нестилизованного, не интерактивного адреса электронной почты, который работает для каждого поставщика услуг электронной почты (ESP). Для некоторых ESP вы можете использовать тег <a> без атрибута href или <a href="#">. Но некоторые ESP не позволят вам отправить электронное письмо с этими хаками.

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

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

Создавайте фирменные электронные письма без ошибок с Litmus Посмотрите, как выглядят ваши электронные письма (больше никаких синих ссылок, верно?) В более чем 100 почтовых клиентах, приложениях и устройствах. Попрощайтесь с испорченными электронными письмами. Ух! Начать бесплатную пробную версию →

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