Инлайнинг CSS в письмах: что это такое и как его сделать [Запись вебинара]

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

Каскадные таблицы стилей (CSS) позволяют добавлять стили и форматирование в HTML вашего письма, чтобы шрифты, отступы, цвета, изображения и другие элементы отображались именно так, как вы задумали. Существует множество способов внедрения CSS в письмо, самый простой из которых — прописать стили в блоке . Однако, поскольку Gmail и некоторые другие почтовые клиенты удаляют стили из , инлайнинг CSS (встраивание стилей непосредственно в теги) становится критически важным.

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

Что же делать? Мы провели вебинар, чтобы ответить на этот вопрос: мы подробно разобрали процесс инлайнинга CSS от начала до конца, дали определение встроенным стилям и объяснили, почему они необходимы для создания надежных HTML-писем, которые отлично выглядят везде.

Не смогли посетить вебинар «CSS Inlining in Email: What It is + How To Do It»? Не беспокойтесь — мы записали его целиком. Вы можете посмотреть слайды и запись ниже.

Во время вебинара было задано много отличных вопросов. Мы не успели ответить на все в прямом эфире, но я собрал ответы в этом блоге. Кроме того, мы добавили ссылки на все ресурсы, упомянутые во время встречи.

### Что значит «инлайнить» стили?

Инлайнинг перемещает CSS и связанные с ним инструкции по форматированию из блока style в заголовке письма непосредственно в тело HTML-кода.

### Зачем нужно встраивать стили (инлайнить)?

Благодаря таким сложным почтовым клиентам, как Gmail (один из самых популярных сервисов, на который приходится 16% открытий писем в мире), инлайнинг стал необходимостью. Если вы не встроите стили, оформление тела письма не отобразится в клиентах типа Gmail.

### Если мы не используем автоматический инлайнер, а верстаем вручную, с чего начинать: со стилей или сразу с инлайна?

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

Также рекомендую Emmet.io для сокращенного написания HTML и CSS. Это поможет значительно сократить время на верстку.

## Сторонние инлайнеры

### Что такое сторонние инлайнеры?

Это инструменты, которые автоматически встраивают ваш CSS. Вы вставляете свой HTML-код в сервис, а он возвращает его обратно уже со всеми стилями, прописанными внутри тегов.

Вот примеры бесплатных инлайнеров:

### Доступны ли сторонние инлайнеры для тех, кто не является пользователем сервиса?

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

## Таск-раннеры и инлайнеры с открытым кодом

### Можно ли использовать таск-раннер и open-source инлайнер?

Если ваши письма генерируются на бэкенде приложения, существуют решения для большинства серверных языков и фреймворков. Вы можете использовать таск-раннеры, такие как Grunt или Gulp, вместе с инлайнерами вроде Juice или Roadie.

### Нужно ли писать исходный код на Sass, чтобы это работало в Grunt?

Sass — это язык препроцессинга CSS. Вам не обязательно использовать Sass для работы с Grunt. Это лишь опция для тех, кому удобнее писать стили на Sass. Grunt, как таск-раннер, может автоматически компилировать ваш Sass в CSS, как это настроено в воркфлоу Ли Манро для email-дизайна.

### Grunt работает только на Mac?

Нет, Grunt — это JavaScript-инструмент. Он не зависит от операционной системы и может использоваться на любой платформе.

### Можно ли интегрировать инлайнер с ESP, например, ExactTarget?

Многие ESP (сервисы рассылок) имеют встроенные инструменты для инлайнинга перед отправкой. Однако у многих нет прямой интеграции со сторонними open-source решениями «из коробки».

Чтобы отправить тестовое письмо через ESP с помощью Grunt, вашему сервису потребуется API-доступ. Вам нужно настроить Grunt так, чтобы он встраивал стили, затем экспортировать письмо в ESP и отправить тест. Это требует дополнительной разработки. Сервисы транзакционных писем, такие как Mandrill и Mailgun, обычно имеют отличную документацию API, в то время как маркетинговые платформы различаются.

## Инлайнинг CSS в Litmus Builder

### В чем преимущество Litmus Builder перед сторонними инструментами?

CSS Inlining в Litmus Builder — это единственный инлайнер, специально настроенный для email-разработки. С помощью одного переключателя встроенные стили автоматически встраиваются в теги. Никакого копирования и вставки, никакого обслуживания — это гораздо более быстрый процесс, чем любая настройка таск-раннера.

### Может ли Litmus Builder добавлять MSO-код?

«MSO-код» относится к условным комментариям Microsoft Outlook, которые используются для таргетинга на почтовые клиенты Outlook.

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

## Инлайнинг CSS и его влияние на дизайн

### Можно ли использовать инлайновый CSS для наложения текста на картинку, чтобы это работало во всех клиентах?

Вы можете использовать фоновые изображения вместе с живым текстом. Поддержка фоновых изображений варьируется, но я рекомендую использовать backgrounds.cm для создания максимально надежных фонов.

Сообщество Litmus — отличное место для поиска помощи от коллег-дизайнеров по реализации любых задач.

### Как инлайнить медиа-запросы, важные для адаптивного дизайна?

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

### Что вы рекомендуете для адаптации под Gmail?

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

Я настоятельно рекомендую использовать технику «гибридной верстки» или подход «mobile-first» для наилучшего отображения во всех клиентах, особенно в приложениях Gmail.

### Увеличивает ли инлайнинг размер HTML-файла? Можно ли его уменьшить?

Да, инлайнинг увеличивает размер файла, и это важно учитывать. Размер HTML-кода должен быть менее 102 КБ, иначе Gmail обрежет письмо. Чтобы уменьшить размер, вы можете минифицировать HTML. Используйте сторонние сайты для минификации или добавьте open-source минификатор в ваш таск-раннер.

### Как обновлять шаблоны глобально, если я использую инлайнинг вместо внешней таблицы стилей?

Вам нужно использовать «части» (partials) для обновления часто используемых компонентов — как HTML, так и CSS. Части — лучший способ управлять всеми вашими email-шаблонами. Они встроены в воркфлоу Grunt, о котором мы говорили, и также доступны в Litmus Builder.

## Начните инлайнить ваши стили

Благодаря функции CSS Inlining в Litmus Builder вы можете автоматически встраивать стили простым переключением тумблера, делая процесс верстки писем быстрее и проще, чем когда-либо.

Функция уже активна во всех аккаунтах Litmus. У вас еще нет аккаунта? Зарегистрируйтесь сегодня — это бесплатно!