Адаптивная электронная почта 101 Веб-семинар Вопросы и ответы: основы HTML и CSS

По мере того, как количество мобильных устройств продолжает расти (за последние четыре года они увеличились более чем на 500%!), Так же как и разговоры о стратегиях мобильной электронной почты, таких как адаптивный дизайн. В нашем веб-семинаре «Адаптивное электронное письмо 101: основы HTML и CSS» мы рассмотрели ландшафт мобильной электронной почты, основы создания отзывчивых электронных писем и почему эти методы имеют решающее значение для улучшения качества обслуживания подписчиков. Мы также рассмотрели поддержку почтового клиента и продемонстрировали, как с нуля написать отзывчивое письмо.

Не смогли это сделать? Не волнуйся. Мы все это записали! Кроме того, мы даже сделали слайды доступными.

Получить слайды + запись →

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

НАЧАЛО ОТЗЫВНОГО ДИЗАЙНА

Как вы думаете, рост числа открытий на мобильных устройствах достиг своего насыщения или вы думаете, что он будет расти и дальше?

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

В чем разница между гибким, адаптивным и отзывчивым дизайном?

Гибкий дизайн состоит из относительной ширины без медиа-запросов. Адаптивный дизайн состоит из фиксированной или относительной ширины в нескольких окнах просмотра / точках останова. Адаптивный дизайн состоит из относительной ширины в нескольких окнах просмотра / контрольных точках. Вот несколько полезных ресурсов, которые помогут вам лучше понять различия между ними:

• Масштабируемость, гибкость или отзывчивость? Понимание подходов к мобильной электронной почте
• Фиксированное против жидкости против адаптивного против отзывчивого
• Какой макет? Статический, плавный, адаптивный или отзывчивый?
• Жидкое взрывчатое вещество

Какой подход обеспечивает лучшую поддержку почтового клиента - гибкий, адаптивный или отзывчивый?

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

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

Что такое медиа-запрос?

Медиа-запрос (@media) - это условный оператор, который запускает набор CSS для определенного набора правил. Вы можете узнать больше о медиа-запросах и электронной почте в следующих ресурсах:

• Практическое руководство по адаптивному дизайну электронной почты
• Понимание медиа-запросов в электронной почте HTML

Есть ли какие-либо данные о влиянии адаптивного дизайна на электронную почту?

Вы делаете ставку! Недавно мы сделали отчет с MailChimp о влиянии адаптивного дизайна и тестирования электронной почты на клики. Мы обнаружили, что адаптивный дизайн увеличивает количество кликов для мобильных пользователей на 15%.

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

При такой ограниченной поддержке со стороны существующих почтовых клиентов может быть сложно реализовать адаптивный дизайн электронной почты. Наша первая рекомендация - как можно больше узнать об адаптивном дизайне электронной почты, прежде чем углубляться в нее. Мы рекомендуем проверить ресурсы на MailChimp, Campaign Monitor и Litmus, чтобы помочь вам.

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

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

Кроме того, не забудьте предварительно просмотреть свои электронные письма перед отправкой! Вы можете отправлять себе электронные письма с помощью PutsMail или посмотреть, как выглядит ваша электронная почта, в более чем 40 различных почтовых клиентах с Litmus.

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

Вы рекомендуете какие-либо адаптивные фреймворки?

Да! Мы рекомендуем проверить адаптивную структуру ZURB Ink (внимание: для правильной визуализации в Outlook 2007-2013 этой платформе требуется обходной путь). Если вам нравится Sass, Фауст Герц создал версию Ink для Sass, а у Алекса Ильхана есть фреймворк электронной почты Sass под названием Zenith. Кроме того, у Дэна Денни из Code School есть потрясающий рабочий процесс электронной почты под названием Emayll, а у Брайана Грейвса есть потрясающая коллекция шаблонов отзывчивой электронной почты.

ОПТИМИЗАЦИЯ ДЛЯ КЛИЕНТОВ, НЕ ПОДДЕРЖИВАЮЩИХ МЕДИА-ЗАПРОСЫ

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

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

Лучше всего всегда предварительно просматривать свое электронное письмо перед его отправкой. Вы можете отправлять себе электронные письма с помощью PutsMail или посмотреть, как выглядит ваша электронная почта, в более чем 40 различных почтовых клиентах с Litmus.

Как лучше всего подойти к адаптивному дизайну для клиентов, которые его не поддерживают, например к приложению Gmail для Android? Какой тип «резервной копии» мы должны иметь?

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

Для тех, кто знаком с передовыми методами кодирования, лучший способ разработать электронную почту и учесть отсутствие отзывчивой поддержки в приложении Gmail - это «гибридный подход к кодированию». По сути, он использует подход, ориентированный на мобильные устройства, и масштабирует электронную почту до ширины рабочего стола, используя некоторые специальные уловки для электронной почты. Вы можете узнать больше о том, как реализовать подход гибридного кодирования здесь:

• Подход гибридного кодирования
• Гибридное кодирование Redux - поднимает планку
• Сложные уроки адаптивного дизайна электронной почты

КОД ВОПРОСЫ

Можете ли вы поместить свои медиа-запросы в отдельный документ CSS и ссылку на этот документ в заголовке?

Не рекомендуется использовать связанные таблицы стилей (тег <link>) для электронных писем из-за ограниченной поддержки почтового клиента. Все стили должны быть встроены в <head> электронного письма.

Каковы наиболее распространенные точки останова для адаптивного дизайна электронной почты? Сколько точек останова идеально?

Поскольку наибольшее количество открытий происходит на iPhone, важно, чтобы ваши электронные письма начали реализовывать точки останова как минимум на 414 пикселей, что соответствует ширине нового iPhone 6 Plus.

Не существует «идеального» количества точек останова для данного дизайна - все сводится к вашему индивидуальному дизайну и оптимизации опыта для ваших подписчиков. Идеально учитывать хотя бы одну точку останова, чтобы ваше письмо было отзывчивым.

Вы рекомендуете использовать таблицы или div?

Дизайн электронной почты абсолютно требует использования табличного макета и структуры. Причина этого - отсутствие поддержки <div> почтовыми клиентами, такими как настольные клиенты Outlook, поскольку это относится к фактической структуре и основе HTML. Некоторые почтовые клиенты действительно поддерживают <div> и могут быть чрезвычайно мощными для использования при определенных взломах и обходных путях, особенно для быстрой электронной почты.

Можно ли изменить атрибуты align = «left» или align = «right» в таблице с помощью медиа-запросов? Или это только для изменения стиля?

Вы не можете технически изменить атрибут HTML выравнивания в CSS, но есть другие обходные пути. Вы можете заключить каждую отдельную таблицу в пустой <div> и использовать свойство float или свойство display для обмена таблицами. У ActionRocket есть отличная запись в блоге об использовании этой продвинутой техники.

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

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

Должны ли стили быть встроенными, чтобы заставить их работать со многими почтовыми клиентами?

да. Некоторые почтовые клиенты удаляют любые стили CSS в <head> электронных писем, в частности Gmail, что делает встраивание стилей CSS в электронные письма необходимостью.

Что лучше использовать пиксели или em для размера шрифта в электронных письмах?

Для определения размеров шрифта в электронных письмах лучше использовать пиксели, поскольку многие почтовые клиенты не поддерживают ems.

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

Можно заменить фоновые изображения с помощью медиа-запросов, но не встроенных изображений ( <img> теги).

Как лучше всего оптимизировать изображения, чтобы они отображались четко на дисплеях сетчатки?

Для сетчатки обычно требуется увеличить размер изображения в два раза по сравнению с его окончательным отображением. Например, изображение 100 × 100 на самом деле должно быть 200 × 200, но уменьшено до 100 × 100 с использованием атрибутов HTML или стиля CSS. Как правило, этот метод следует использовать только для небольших изображений, которые должны быть резкими, а не для больших изображений, таких как фотографии. В Litmus Community есть пара замечательных дискуссий о разработке для сетчатки глаза:

• Дизайн для Retina
• Изображения с текстовыми призывами к действию и дисплеем Retina

Отображается: нет; или display: block; работать в отзывчивой почте?

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

Есть ли в почтовом клиенте эквивалент «элемента проверки» в веб-браузере? Было бы полезно устранить неполадки в моем адаптивном дизайне.

Не существует точного эквивалента «проверить элемент» в веб-браузере. Однако функция интерактивного тестирования в Litmus чрезвычайно полезна. Кроме того, в Litmus Builder есть функция тестирования и повторного тестирования в один клик, что позволяет очень быстро выполнять итерацию по электронной почте.

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

Универсально ли поддерживается заполнение во всех почтовых клиентах?

Заполнение почти повсеместно поддерживается во всех почтовых клиентах. С другой стороны, свойство margin не пользуется большой поддержкой. Мы настоятельно рекомендуем использовать отступы.

Как правильно сложить три столбца, используя выравнивание? Следует ли использовать выравнивание по центру в дополнение к левому и правому? Или вы вообще не рекомендуете использовать трехколоночную раскладку?

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

У ActionRocket есть отличный пост о продвинутой технике обратного стекирования столов.

ЛИТМУС СТРОИТЕЛЬ

Что такое Litmus Builder?

Litmus Builder - это первый в мире редактор кода, созданный дизайнерами электронной почты для дизайнеров электронной почты. Создавать, редактировать и публиковать электронные письма совершенно бесплатно.

Эммет встроен непосредственно в Litmus Builder?

Это! Наша интеграция с Emmet упрощает сокращенное кодирование.

Где мы можем найти адаптивные шаблоны писем в Litmus Builder?

Litmus Builder имеет галерею из 20+ шаблонов писем в разделе «Шаблоны». Все шаблоны совершенно бесплатны для использования. Ознакомьтесь с полной справочной документацией по Litmus Builder.

Попробуйте наши бесплатные, предварительно протестированные адаптивные шаблоны

Адаптивная электронная почта позволяет настраивать дизайн для все более мобильной аудитории. Упростите процесс создания электронного письма с помощью множества бесплатных предварительно протестированных шаблонов в Litmus Community.

Представляем шаблоны сообщества Litmus Начните свою следующую кампанию с помощью одного из предварительно протестированных шаблонов Litmus. Доступ к шаблонам →