Если вы хоть как-то связаны с дизайном электронной почты, вы знаете, что создание отличного письма — непростая задача. Помимо выбора правильной компоновки, веса заголовков и шрифта, контента и многого другого, создание каждой кампании требует больших усилий.
Каскадные таблицы стилей (CSS) позволяют добавлять стили и форматирование к HTML-коду вашего письма, чтобы шрифты, отступы, цвета, изображения и многое другое отображались так, как вы задумали. Существует множество способов включить CSS в ваше письмо, самый простой из которых — написать стили в
вашего письма. Однако, поскольку Gmail и некоторые другие почтовые клиенты удаляют CSS из , инлайнинг CSS становится обязательным.
Однако инлайнинг стилей вручную может отнимать много времени и быть немного сложным в управлении. Когда вы редактируете определенный стиль, его необходимо обновить везде, где он встречается в вашем коде, из-за чего легко упустить некорректный стиль.
Так что же вам делать? Мы провели вебинар, чтобы ответить именно на этот вопрос — охватив процесс инлайнинга CSS от начала до конца, точно определив, что такое инлайновый CSS, и почему он необходим для создания надежных HTML-писем, которые отлично смотрятся везде.
Не успели посетить вебинар «*CSS Inlining in Email: What It is + How To Do It?*»? Не волнуйтесь — мы записали всё. Вы можете просмотреть слайды и ознакомиться с записью ниже.
Во время вебинара было задано так много отличных вопросов. Мы не успели ответить на все, но я ответил на них здесь, в блоге. Кроме того, мы предоставили ссылки на все ресурсы, упомянутые на вебинаре.
### Что означает инлайнинг стилей?
«Инлайнинг» стилей перемещает CSS и связанные с ним инструкции по форматированию из блока стилей в
вашего письма в тело HTML.### Зачем вам нужно инлайнить стили?
Благодаря громоздким почтовым клиентам, таким как Gmail (один из самых популярных почтовых клиентов, на долю которого приходится 16% открытий писем по всему миру), инлайнинг стилей в письмах является необходимостью. Если вы не инлайните стили, форматирование в теле вашего письма не будет отображаться в таких клиентах, как Gmail.
### Если мы не используем программу-инлайнер, а создаем вручную, следует ли нам сначала создавать стили или сначала инлайнить стили?
Если вы не используете инлайнер или таск-раннер для инлайнинга, вам следует писать CSS инлайново с самого начала, чтобы обеспечить совместимость со всеми почтовыми клиентами. В этом случае я настоятельно рекомендую использовать множественные курсоры, которые позволяют разместить курсор в нескольких местах редактора, чтобы набрать одинаковый код.
Я также рекомендую Emmet.io как способ сокращенного кодирования HTML и CSS. Это поможет вам сократить время, необходимое для написания инлайнового CSS.
## Сторонние инлайнеры
### Что такое сторонние инлайнеры?
Сторонние инлайнеры автоматически инлайнят ваш CSS для вас. После вставки вашего HTML в инструмент, он возвращает ваш код со всеми инлайновыми стилями.
Вот несколько примеров бесплатных инлайнеров:
### Доступны ли сторонние инлайнеры для тех, кто не использует сервис?
Да, эти сторонние сайты-инлайнеры доступны бесплатно и не требуют учетной записи ни в одном из сервисов. Вы можете посетить сайт, скопировать и вставить свой HTML, и нажать, чтобы инлайнить CSS. Это так просто.
## Таск-раннеры + Open source инлайнеры
### Можно ли использовать таск-раннер и open source инлайнер для инлайнинга стилей?
Если ваши письма генерируются на стороне сервера приложения, существуют решения для большинства серверных языков и фреймворков. Вы можете использовать таск-раннеры, такие как Grunt или Gulp, наряду с open source инлайнером, таким как Juice или Roadie, для инлайнинга ваших стилей.
### Нужно ли писать исходный код на Sass, чтобы он работал в Grunt?
Sass — это язык препроцессинга для CSS. Вам не нужно использовать Sass, чтобы использовать Grunt. Это просто опция для тех, кто предпочитает писать свой CSS на Sass. Grunt, как таск-раннер, может автоматически компилировать ваш Sass в CSS, как это настроено в Grunt Email Design Workflow Ли Мана.
### Grunt только для Mac?
Нет, Grunt — это таск-раннер на основе JavaScript. Он не зависит от использования какой-либо конкретной ОС и может использоваться на любой платформе.
### Можно ли или как интегрировать инлайнер с ESP, такой как ExactTarget?
Многие ESP имеют свой собственный инлайнер, встроенный в их платформу, который вы можете использовать для инлайнинга перед отправкой письма или во время нее. Однако многие не имеют способа прямой интеграции open source инлайнеров «из коробки».
Чтобы отправить тестовое письмо через ваш ESP, используя, например, Grunt, ваш ESP должен иметь доступ к API, чтобы вы могли настраивать тестовые отправки через их инфраструктуру. Вам нужно будет настроить Grunt для инлайнинга вашего CSS, экспортировать письмо в ваш ESP, а затем отправить тестовое письмо через ваш ESP. Это требует пользовательской разработки. Транзакционные почтовые сервисы, такие как Mandrill и Mailgun, обычно имеют отличную документацию по API и очень дружелюбны к разработчикам, в то время как маркетинговые провайдеры могут отличаться.
## CSS Inlining в Litmus Builder
### В чем преимущество использования Litmus Builder по сравнению со сторонними инлайнерами или таск-раннерами/open source инлайнерами?
CSS Inlining в Litmus Builder — единственный инлайнер, специально настроенный для разработки электронной почты. Одним переключением встроенные стили могут быть автоматически инлайнены. Никакого копирования и вставки, никакой поддержки — это более быстрый рабочий процесс, чем любая настройка таск-раннера или стороннего инлайнера.
### Может ли Litmus Builder добавлять MSO-код?
«MSO-код» относится к условным комментариям Microsoft Outlook, которые можно использовать для таргетинга почтовых клиентов Outlook, чтобы включить HTML или CSS, предназначенные специально для Outlook.
Litmus Builder — это редактор электронных писем. Litmus предлагает бесплатные шаблоны электронных писем, использующие условные комментарии Outlook для корректного отображения в Outlook. Вы также можете создавать свои собственные шаблоны, использующие условные комментарии Outlook в Litmus Builder в качестве отправной точки, или создавать сниппеты, хранящие часто используемые условные комментарии Outlook.
## CSS-инлайнинг и его влияние на дизайн
### Можно ли использовать инлайновый CSS для создания живого текста поверх изображения с текстом, выровненным по правой стороне контейнера, который будет работать во всех клиентах?
Вы можете использовать фоновые изображения и живой текст вместе для создания этого эффекта. Поддержка фоновых изображений варьируется в зависимости от почтовых клиентов, но я рекомендую использовать backgrounds.cm для создания максимально надежных фонов, которые отображаются во всех почтовых клиентах.
Litmus Community — отличное место, где можно получить дополнительную помощь от коллег-дизайнеров и разработчиков электронной почты по реализации чего-либо.
### Как инлайнить медиа-запросы, которые необходимы для адаптивного дизайна?
Медиа-запросы нельзя инлайнить, поскольку они должны оставаться в
письма, чтобы работать. Предпосылка медиа-запросов заключается в том, что это набор условных операторов для активации определенного CSS, когда эти условия истинны, особенно для размера экрана. Если бы такое форматирование было инлайновым, оно потеряло бы условное условие и сделало бы медиа-запросы бесполезными.### Что вы рекомендуете для адаптивных ситуаций в Gmail?
К сожалению, Gmail не поддерживает медиа-запросы и, следовательно, адаптивный дизайн, что затрудняет создание мобильных писем.
Я настоятельно рекомендую использовать гибридную технику кодирования, технику «Fab Four» или подход «mobile-first» для наилучшего отображения в почтовых клиентах, особенно в приложениях Gmail.
### Увеличивает ли инлайнинг стилей размер HTML-файла? Если да, то могу ли я что-то сделать, чтобы уменьшить размер файла?
Да, CSS-инлайнинг увеличивает размер HTML-файла, и это важное соображение. Размер вашего HTML-файла всегда должен быть менее 102 КБ, потому что Gmail обрежет письмо, если оно не укладывается в этот размер. Чтобы уменьшить размер HTML-файла, вы можете минифицировать свой HTML. Для этого используйте сторонний сайт-минификатор, чтобы скопировать и вставить ваш HTML и нажать, чтобы минифицировать (точно так же, как сторонние сайты-инлайнеры CSS, которые мы рассмотрели на вебинаре). Или вы можете найти open source минификатор для интеграции в рабочий процесс таск-раннера.
### Как бы я обновлял шаблоны глобально, если бы инлайнил вместо простого обновления таблицы стилей, которая применялась бы ко всем письмам с этой таблицей стилей?
Вам нужно будет использовать частичные шаблоны (partials) для глобального обновления шаблонов для часто используемых компонентов, будь то HTML или даже CSS. Частичные шаблоны — лучший способ управлять, поддерживать и обновлять все ваши шаблоны электронных писем. Они встроены в Grunt Email Design Workflow Ли Мана, который мы рассматривали на вебинаре, и также доступны в Litmus Builder.
## Начните инлайнить свои стили
С CSS Inlining в Litmus Builder вы можете автоматически инлайнить CSS вашего письма простым переключением и стилизовать ваши письма быстрее и проще, чем когда-либо.
CSS-инлайнинг в Litmus Builder теперь активен во всех учетных записях Litmus. У вас еще нет учетной записи Builder? Зарегистрируйтесь сегодня — это бесплатно!
