Как улучшить свои электронные письма с помощью CSS?

Для многих людей HTML сам по себе скучен, в конце концов, нет ничего интересного, если в нем нет цвета. Теперь добавьте несколько каскадных таблиц стилей (CSS) либо на веб-страницу, либо в электронное письмо, и все станет красочным, интересным и начнет выделяться.

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

CSS для HTML-писем: Почему это так важно?

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

Аспект брендинга

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

Отзывчивый дизайн

Хотя в электронных письмах дело не только в цветах. Это еще и расположение контента, которое должно быть последовательным на каждом устройстве, с которого его просматривает пользователь, и динамичным, чтобы повысить вовлеченность. Хорошей новостью является то, что веб-разработка прошла долгий путь, и сегодня CSS пишется с учетом подхода Responsive Web Design (RWD). Это означает, что любое отзывчивое электронное письмо будет автоматически корректировать свой внешний вид в зависимости от устройства, с которого его читают, а все стили устанавливаются в одном месте. Вместо того чтобы иметь кусок кода для каждого диапазона размеров.

Лучшее преобразование

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

Можно ли избежать использования CSS для HTML-писем?

Обычное HTML-письмо, в котором есть только текст и нет CSS, определенно можно сделать. Но почему? Размер письма с CSS может быть немного больше, но не настолько, чтобы это повлияло на доставляемость или любой другой аспект, связанный с этим. Что возможно, так это минимизировать использование CSS, например, если речь идет о простой транзакции или подтверждении электронной почты, единственной целью которой является предоставление информации, а от пользователя требуется минимальное действие или вообще никаких действий. Фактически, именно так поступают многие компании, и рыночные данные показывают, что простые письма с подтверждением имеют высокие показатели вовлеченности и кликов. В среднем, коэффициент открытия составляет 65%, а кликов — 17%, что делает электронные письма с подтверждением отличным местом для продвижения дополнительных услуг или продуктов, предлагаемых компанией.

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

Встроенный, встраиваемый или внешний CSS для электронных писем?

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

Внешний CSS

Преимущество внешнего CSS в том, что он позволяет вносить изменения в одном месте, и каждая подключенная HTML-страница будет обновляться автоматически. Отдельный .css файл подключается в тегах <head> </head> основного HTML документа через тег <link>.

Для веб-сайтов это работает отлично, но для электронной почты, использующей SMTP-сервер, это не сработает. Помимо простоты обслуживания, этот метод также положительно влияет на скорость загрузки страницы. Файл .css может храниться на том же сервере, что и остальные файлы, составляющие сайт, но определенные части, такие как пакеты сторонних разработчиков или шрифты Google, присутствующие в файле, могут быть извлечены с отдельного сервера. Но поскольку в случае с электронной почтой это не так, необходим другой тип CSS.

Внутренний или встроенный

Другим часто используемым типом CSS является встроенный или также известный как внутренний. При этом методе фактический код стиля размещается непосредственно в тегах <head> </head> HTML-файла. Однако поддержка CSS встроенного метода почтовыми клиентами все еще ограничена, несмотря на то, что большинство из них были обновлены после 2016 года для его поддержки. Проблема заключается в том, что во всем мире многие пользователи все еще используют либо старые версии почтовых клиентов, либо те, которые до сих пор не имеют поддержки, и удаляют теги <head> и <style>, тем самым вызывая ошибки для правильного отображения электронного письма.

Inline

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

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

<html>
    <head>
        <style>
            h1{ color: green; }
        </style>
    </head>
    <body>
        <h1>Green Mailtrap Heading</h1>
    </body>
</html>
Войти в полноэкранный режим Выход из полноэкранного режима

А вот как его преобразует инструмент inliner:

<h1 style="color:green;">Green Mailtrap Heading</h1>
Войти в полноэкранный режим Выход из полноэкранного режима

Лучшие инструменты для разработки электронной почты на HTML и CSS

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

Mailchimp CSS Inliner

Этот простой, но удобный и эффективный инструмент от Mailchimp позволяет вам вставить встроенный CSS в одно окно и получить удобную для электронной почты инлайн-версию в другом. Кроме того, инструмент преобразования оставляет нетронутыми любые медиа-запросы для отзывчивого дизайна.

Responsive Email CSS Inliner

Еще один инструмент, о котором стоит упомянуть, — Responsive Email CSS Inliner от HTML Email. Как и другие инструменты преобразования, этот инлайнер работает аналогичным образом, считывая встроенный CSS в одном окне и делая его инлайн в другом. Особенность, которая выделяет его среди остальных, заключается в том, что он также имеет третье окно, демонстрирующее, как будет выглядеть фактическое письмо, как на мобильном, так и на настольном компьютере. Кроме того, есть возможность загрузить .html-файл письма. Поскольку инструмент работает на базе Juice, проекта с открытым исходным кодом, он также может быть легко интегрирован в ваши проекты Node.js и работает в клиентском JavaScript.

Litmus Builder

Litmus Builder — это не отдельный инструмент инлайнера, а скорее редактор кода, который разработчики особенно часто используют для проектирования и разработки электронных писем. Редактор имеет внушительный список функций, одной из которых является инлайнер. Еще одна удобная функция редактора кода — возможность автоматической синхронизации кода непосредственно с поставщиком услуг электронной почты (ESP).

Почтовая песочница Mailtrap: проверьте свой CSS на поддержку почтовых клиентов

Разработка электронных писем — это одно, но вы также хотите протестировать их перед отправкой. Именно здесь на помощь приходит наша собственная Email Sandbox, которая упрощает весь процесс тестирования писем. Наша экономящая время «песочница» действует как безопасная среда, позволяющая разработчикам перехватывать электронные письма из стадии постановки на предварительный просмотр, анализировать содержимое и генерировать полный отчет о спаме, и, конечно же, включает в себя HTML & CSS Email Checker.

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

Если какой-то элемент или тег не поддерживается, вы можете исправить код письма, отправить его повторно и посмотреть, как новое письмо будет отображаться на настольном компьютере или мобильном устройстве.

В заключение

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


Надеюсь, вам понравилось читать наше руководство по CSS в электронных письмах, которое было первоначально опубликовано в Mailtrap Blog Денисом Конторским.

Оцените статью
devanswers.ru
Добавить комментарий