Надежное руководство по использованию HTML5 и CSS3 в email-рассылках

«Вы не можете использовать HTML5 или CSS3 в email».

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

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

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

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

### Защитный email-дизайн

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

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

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

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

Он также подчеркнул важность «плавной деградации» (graceful degradation). Плавная деградация означает, что если почтовый клиент вашего подписчика не поддерживает определенную функцию, вы все равно обеспечите ему приятный опыт взаимодействия.

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

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

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

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

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

«`

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

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

}

«`

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

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

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

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

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

«`

@-moz-document url-prefix() {

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

}

«`

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

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

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

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

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

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

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

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

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

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

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

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

### Письмо с фоновым видео HTML5 для конференции The Email Design Conference 2014

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

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

### Интерактивное письмо-карусель от B&Q

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

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

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

### Письмо с интерактивным туром по Litmus Builder

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

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

## КАРКАС ДЛЯ ИННОВАЦИЙ В EMAIL-ДИЗАЙНЕ

«`

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

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

}

«`

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

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

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

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

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

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

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

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

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

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