Как создать HTML-письмо в Gmail

Email — это секретное оружие цифрового маркетолога. Грамотно выстроенная стратегия email-маркетинга способна повысить вовлеченность, укрепить лояльность клиентов и увеличить прибыль.

Тем не менее, чтобы опережать конкурентов, необходимо следить за актуальными трендами. В ваших интересах — и интересах вашей маркетинговой команды, если она у вас есть — стать одним из первых, кто внедрит новые методы, позволяющие вашим письмам всегда оставаться на виду в папке «Входящие» потенциальных клиентов.

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

## Почему вам нужно оптимизировать email-маркетинг под мобильные устройства

Настройка писем для чтения на смартфонах или планшетах критически важна для доставки вашего маркетингового сообщения до аудитории.

Дело в том, что 81% населения регулярно используют смартфоны для проверки почты.

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

Адаптивность значительно влияет на эффективность: мобильно-оптимизированный дизайн повышает количество уникальных кликов от мобильных пользователей на 15% (источник: Email Monday).

При оптимизации под мобильные устройства нужно учитывать, как письмо будет выглядеть в самом популярном почтовом клиенте — Gmail. Хорошая новость в том, что создание динамической email-кампании в Gmail не только выполнимо, но и эффективно.

Рассмотрим простые способы создания HTML-писем в Gmail.

## Как создать HTML-письмо в Gmail

Если мысль о написании кода на HTML вызывает у вас тревогу, успокойтесь. Многие почтовые клиенты, включая Gmail, имеют встроенные редакторы «что видишь, то и получаешь» (WSIWYG), которые помогают создавать HTML-сообщения.

Однако, если вам нужна большая гибкость дизайна и вы используете сторонний редактор, имейте в виду, что Gmail не всегда «любит» внешний HTML. Это немного затрудняет работу вне встроенного редактора.

Но не бойтесь. Есть способы сделать процесс создания дизайна для Gmail максимально простым:

### 1. Метод копирования и вставки

Чтобы избежать проблем с письмами, созданными вне Gmail, Дженнифер Кирнин из Lifewire предлагает простое решение:

— Создайте верстку в выбранном HTML-редакторе, используя полные пути и URL-адреса для всех внешних файлов.

— Как только закончите, сохраните файл на компьютере.

— Откройте HTML-файл в браузере. Если изображения видны, а стили CSS корректны — можно продолжать.

— Выделите всю страницу (Ctrl+A для Windows или Cmd+A для Mac).

— Скопируйте содержимое (Ctrl+C для Windows или Cmd+C для Mac).

— Откройте окно создания письма в Gmail и вставьте содержимое (Ctrl+V или Cmd+V).

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

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

### 2. Используйте абсолютные ссылки

Существует два типа ссылок: абсолютные и относительные.

Прежде чем обсуждать их важность, дадим определения:

#### Абсолютный URL

Абсолютный URL содержит полный адрес страницы, например: https://thiswebsite.com/images/bluesky.png. Браузер переходит по этому адресу и находит конкретный файл.

#### Относительный URL

Относительный URL предполагает, что первая часть адреса совпадает с текущим расположением файла (например, на вашем компьютере). Пример: «img src=”/Users/YourUserName/Desktop/bluesky.png”.

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

### 3. Используйте прогрессивное раскрытие для длинных текстов

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

### 4. Добавьте CSS — даже в Gmail!

Вы можете использовать CSS для улучшения отображения письма на мобильных устройствах. Gmail стал поддерживать CSS после обновлений в сентябре 2017 года, поэтому теперь можно использовать мобильно-специфичные таблицы стилей, чтобы пользователям не приходилось «зумить» экран пальцами.

## Заключение

Создать адаптивное HTML-письмо в Gmail проще, чем кажется. Используйте абсолютные пути к файлам, немного CSS для красоты и прогрессивное раскрытие для удобства чтения. Комбинируя эти методы, вы поднимете email-маркетинг на новый уровень. Если же вы хотите упростить процесс, воспользуйтесь конструкторами drag-and-drop, такими как в Campaign Monitor, чтобы создавать красивые и эффективные письма без навыков программирования.