Как исправить синие ссылки в Gmail для идеального email-дизайна

Раздражают случайные синие ссылки, которые портят ваш безупречный email при тестировании в Gmail? Мы вас понимаем. Хорошая новость: вы ничего не сделали не так. С 2017 года Gmail автоматически превращает часть текста — например, адреса электронной почты, номера телефонов, физические адреса и время — в кликабельные элементы, иногда окрашивая их в синий цвет. А поскольку Gmail является вторым по популярности почтовым клиентом с более чем 30% открытий писем, по данным нашей статистики, игнорировать его нельзя.

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

## Учитывайте доступность

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

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

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

## Три способа изменить цвет синих ссылок в Gmail

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

.ii a[href] { color: #15c; }

Класс **.ii** относится к классу, присвоенному div, содержащему всё письмо в Gmail. **a[href]** — это CSS-селектор атрибута. Он указывает, что любая ссылка в классе **.ii** должна быть синего цвета.

Адреса и номера телефонов редко оформляются как ссылки в письмах. Однако Gmail распознаёт их и превращает в ссылку, нравится вам это или нет. Поскольку эти ссылки создаются на лету, к ним не применяются встроенные стили, и используется стандартное оформление.

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

### Способ 1: Использование тега

Метод с использованием — самый простой способ предотвратить превращение номеров телефонов и адресов в синие ссылки в Gmail. Он идеален, если вы хотите стилизовать их **отлично от других ссылок**, сохранив их функциональность. Вот как это сделать:

— Оберните номер телефона или адрес в тег

— Задайте тегу класс, например:

— Объявите класс в разделе

Измените чёрный цвет в нашем примере, заменив #000000 на шестнадцатеричный код цвета, соответствующий вашему бренду. Если вы не хотите подчёркивания, замените underline на none в коде.

Создание тега с именем класса вокруг адреса или номера телефона даёт вам возможность нацелиться на него с помощью CSS. Просто нацеливание на сам не стилизует ссылку — оно стилизует только не связанный текст, в то время как *ссылка* внутри сохранит стандартный синий стиль. Поэтому, чтобы стилизовать *ссылку* внутри span, в стилевом объявлении указывается имя класса и «a».

Этот метод особенно удобен для номеров телефонов, если вы хотите добавить напрямую к номерам, но не хотите, чтобы на десктопе открывалось приложение для звонков. А затем придётся скрывать и показывать контент для десктопа и мобильных устройств. Избегайте головной боли и используйте тот факт, что почтовый клиент наконец-то делает что-то полезное для вас.

### Способ 2: Переопределение стилей всех ссылок

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

Добавьте это объявление стилей, специфичное для Gmail, в блок

Затем добавьте ID «body» к тегу :

Подчёркивание «u» — это метод таргетинга для Gmail. Оно преобразует doctype в тег подчёркивания, и только Gmail ведёт себя таким образом. Таким образом, использование тега подчёркивания с селектором соседнего элемента для div или id/class этого div в CSS — это уникальный метод таргетинга только клиентов Gmail (по крайней мере, на данный момент). В этом примере мы использовали ID «body».

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

**Однако у этого метода есть небольшой нюанс.**

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

### Способ 3: Добавление тега и самостоятельное оформление ссылок

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

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

675 Massachusetts Ave.
Cambridge, MA 02139, USA

В приведённом выше примере физический адрес стилизован серым цветом без подчёркивания и ссылается на страницу контактов нашего сайта. Это предотвратит применение Gmail стандартного стиля и функциональности.

## Прощайте, синие ссылки Gmail

С помощью любого из трёх наших методов синие ссылки больше не будут портить дизайн вашего письма и делать его «сломанным» в Gmail. Это здорово, потому что некорректные письма могут снижать вовлечённость и конверсии (а этого точно не хочется).

Есть вопросы по нашим методам? Или хотите поделиться другим решением? Напишите в комментариях ниже.

*Оригинальная публикация от 13 октября 2017 года, автор Джайна Мистри. Последнее обновление: 16 июля 2021 года.*