Абсолютное руководство по использованию HTML5 и CSS3 в электронной почте

«Вы не можете использовать HTML5 или CSS3 в электронной почте».

Из-за их «ограниченной» поддержки идея о том, что использование HTML5 и CSS3 в электронной почте «невозможно», остается распространенным заблуждением в индустрии дизайна электронной почты. Однако мы считаем это полным мифом.

Хотя поддержка, безусловно, не универсальна, многие ведущие почтовые клиенты поддерживают HTML5 и CSS3. Фактически, около 50% общего рынка и 3 из 5 ведущих почтовых клиентов поддерживают их. Поддержка может быть еще больше для вашей конкретной аудитории.

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

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

### Защитный дизайн электронной почты

Джонатан Ким представил «Расширяя пределы электронной почты» на нашем мастер-классе Mobile Masterclass. Во время своего выступления Джонатан ввел термин **защитный дизайн электронной почты**, чтобы объяснить текущее состояние дизайна электронной почты.

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

### Прогрессивное улучшение

Аналогичным образом, на конференции The Email Design Conference 2014 Брайан Грейвс, UI-дизайнер в DEG, выступил с докладом «Победа в битве дизайна на каждом экране». Основное внимание в его выступлении было уделено **прогрессивному улучшению**, которое включает предоставление расширенных функций в средах, где они поддерживаются.

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

Эскалатор — отличный пример прогрессивного улучшения и плавного спада в реальной жизни. Покойный комик Митч Хедберг пошутил: «Эскалатор никогда не может сломаться: он может только превратиться в лестницу. Вы никогда не должны видеть знак «Эскалатор временно не работает», только «Эскалатор временно лестница». Извините за удобство». Независимо от своей среды, эскалатор сохраняет свою функциональность.

## ВНЕДРЕНИЕ ПРОГРЕССИВНОГО УЛУЧШЕНИЯ ДЛЯ HTML5 + CSS3

Использование прогрессивного улучшения — самый эффективный способ подхода к дизайну электронной почты. Мы знаем, что использование обычного HTML5 и CSS3 в электронной почте вызывает множество проблем с рендерингом в разных клиентах. Поддержка резервных вариантов очень непоследовательна — у некоторых HTML и CSS есть надежные резервные варианты, а у других их нет. В отдельных клиентах возникают различные причуды. Использование стандартного HTML5 и CSS3 требует гораздо большего тестирования и замедляет разработку. Итак, каков лучший способ фактически внедрить прогрессивное улучшение в электронную почту?

Использование HTML5 и CSS3 в электронной почте не обязательно должно быть сложным. Это не требует бесконечных часов устранения неполадок в причудливых почтовых клиентах (мы смотрим на тебя, Outlook). Все, что нужно, — это правильная структура для быстрой реализации HTML5 и CSS3 без проблем или страха перед проблемами рендеринга. И, к вашему счастью, у нас есть такая структура!

Вот самая великая строчка кода, когда-либо созданная для дизайнеров и разработчиков электронной почты:

«`

@media screen and (-webkit-min-device-pixel-ratio:0) {

/* Вставьте стили здесь */

}

«`

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

Этот подход также разделяет разработку электронной почты для современных почтовых клиентов и старых клиентов на две части. Вы можете использовать Safari/Chrome для тестирования и разработки современных методов для клиентов с поддержкой WebKit, в то время как Firefox используется для базового опыта для старых клиентов, таких как Outlook.

При таком подходе к разработке электронной почты большая часть процесса обеспечения качества (QA) переносится в браузер, а не в почтовый клиент. Это дает дизайнерам электронной почты больше власти, контроля и уверенности в разработке письма, которое будет корректно отображаться во всех почтовых клиентах.

Ознакомьтесь с этими результатами тестов Litmus, которые показывают поддержку медиа-запросов, нацеленных на WebKit. Следует отметить, что Gmail — как веб-клиент, так и мобильное приложение — не поддерживает медиа-запросы, поэтому тесты недействительны для этих снимков экрана.

Вы также можете нацелиться на рендеринг Gecko (Firefox) с помощью этого медиа-запроса:

«`

@-moz-document url-prefix() {

/* Вставьте стили здесь */

}

«`

Лишь немногие клиенты имеют Gecko (Firefox) в качестве движка рендеринга, поэтому лучше всего нацелиться на WebKit для улучшенной версии вашего письма. Но легко добавить ту же функциональность, что и у движков рендеринга WebKit, с помощью этого медиа-запроса для определенных клиентов, таких как Thunderbird.

Существуют ли другие способы внедрения HTML5 и CSS3 в электронную почту, кроме этого метода? Да. Но мы считаем, что этот метод является самым быстрым способом разработки, а также самым надежным. Он сводит к минимуму объем работы по разработке для причудливых почтовых клиентов, таких как Outlook, и фокусируется на тестировании в браузере.

## ИТОГ: СОВЕТЫ ПО ПРОГРЕССИВНОМУ УЛУЧШЕНИЮ

### Знайте свою аудиторию

Где ваши подписчики открывают ваши письма? Используют ли они клиенты с отличной поддержкой CSS и HTML, такие как iPhone и Apple Mail? Вы можете использовать инструмент Email Analytics от Litmus, чтобы выяснить, какие приложения для электронной почты наиболее популярны среди ваших подписчиков.

На основе этой информации вы можете определить, подходит ли вам прогрессивное улучшение. Например, если большой процент вашей аудитории использует WebKit, который отлично поддерживает расширенные функции, возможно, стоит попробовать инновационные методы, такие как видео HTML5!

### Создайте базовый опыт

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

### Улучшайте, где это возможно

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

## УВИДЕТЬ В ДЕЙСТВИИ: ПРИМЕРЫ ПРОГРЕССИВНОГО УЛУЧШЕНИЯ В ЭЛЕКТРОННОЙ ПОЧТЕ

Давайте посмотрим на несколько новаторских примеров, которые используют прогрессивное улучшение в электронной почте. Чтобы увидеть улучшения для этих писем, вы должны использовать браузер с поддержкой WebKit, такой как Chrome или Safari.

### Email с фоновым видео HTML5 для The Email Design Conference 2014

Чтобы анонсировать The Email Design Conference 2014, мы решили провести серьезное прогрессивное улучшение с фоновым видео HTML5. Хотя этот конкретный метод работал только в Apple Mail и Outlook 2011 (Mac), эти два клиента составили около 40% нашей аудитории для этой конкретной рассылки.

Видео HTML5 просто откатилось к статическому фоновому изображению для всех почтовых клиентов, которые не поддерживали видео. Наши результаты были потрясающими, как и отзывы!

### Интерактивный карусельный email от B&Q

Одним из самых крутых писем года стал интерактивный карусельный email от B&Q. Для клиентов WebKit письмо содержало карусель с горячими точками, где пользователи могли нажимать, чтобы увидеть разные разделы.

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

Вы можете открыть письмо в Firefox или Internet Explorer, чтобы увидеть резервный вариант.

### Интерактивный тур Litmus Builder Email

Для запуска нашего нового редактора кода электронной почты Litmus Builder мы создали полностью кликабельный интерактивный тур внутри письма. Опять же, этот метод работал только в Apple Mail и Outlook 2011 (Mac), но составил большую часть нашей аудитории. (Примечание: письмо должно быть шириной не менее 800 пикселей, чтобы увидеть тур.)

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

## СТРУКТУРА ДЛЯ ИННОВАЦИЙ В ДИЗАЙНЕ ЭЛЕКТРОННОЙ ПОЧТЫ

«`

@media screen and (-webkit-min-device-pixel-ratio:0) {

/* Вставьте стили здесь */

}

«`

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

Лучшая защита — это хорошее нападение. Пора начать играть в нападении. Чтобы начать внедрять инновации в дизайн электронной почты с помощью этого медиа-запроса. Чтобы продвинуть электронную почту вперед.

Сделайте это для своих подписчиков. Для нашего ремесла. Ради любви к электронной почте.

Мы с нетерпением ждем, что мы построим вместе.

Если вы используете этот метод — или разрабатываете более продвинутые собственные версии — в своем письме(ах), или у вас есть какие-либо вопросы по поводу метода, пожалуйста, оставьте комментарий ниже или, что еще лучше, в сообществе Litmus!

## УЗНАЙТЕ СВОЮ АУДИТОРИЮ + ТЕСТИРУЙТЕ СВОИ ДИЗАЙНЫ

Вдохновились начать продвигать электронную почту вперед, используя такие продвинутые методы, как HTML5 и CSS3? Обязательно определите любимые приложения для электронной почты ваших подписчиков, а также протестируйте свои новые письма.

С помощью Email Analytics вы можете понять, где ваши подписчики открывают ваши письма, чтобы вы могли сосредоточить свои усилия по прогрессивному улучшению (и плавному спаду!).

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

Узнайте больше о Litmus сегодня.