19874 22
Маркетинг Читать 8 минут 22 февраля 2018

Как сделать адаптивное письмо, если вы не верстальщик

Как сделать адаптивное письмо, если вы не верстальщик
Иллюстрация: Мария Марикуца
Анна Кравец
Анна Кравец
Technical Support Manager в Serpstat
Проведем эксперимент. Возьмите телефон и зайдите в мобильную почту. Откройте и закройте подряд 10-20 писем. В скольких письмах заголовок или фото не умещались в экран? В скольких текст мельчил, так что надо было напрячь зрение? Всегда ли легко было добраться до сути?
Если email тяжело читать с мобильного, значит в нем отсутствует адаптивная верстка. Пример:
Пример сайта без адаптивной верстки
Письмо Forbes без адаптивной верстки
Адаптивная верстка предполагает, что письмо будет удобно читать с любого устройства и через любое приложение. Адаптацией занимаются верстальщики — при помощи языков разметки они перестраивают письмо под разные платформы и разрешения экранов.

Я не верстальщик, зачем мне знать про адаптив

Знать требования к адаптивным письмам пригодится не только верстальщикам.

Например, дизайнеры учитывают их при создании дизайна письма. Они отдают верстальщикам два макета: для ПК и под телефон. Дизайн должен учитывать возможности адаптивной верстки. Иначе верстальщик не сможет перенести макеты на язык HTML и CSS.

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

Инструменты создания адаптивного дизайна

Чтобы сделать адаптивное письмо, используют два инструмента: медиазапросы и резиновую верстку. Немного расскажу о каждом.

Медиазапросы

Медиазапросы (media queries) — часть языка CSS. Они встраиваются в HTML-код страницы и работают как «переключатели». Медиазапросы срабатывают, когда меняется ширина экрана или его ориентация. Они увеличивают шрифт, меняют цвета, скрывают изображения, расширяют целевую область кнопок и ссылок.

Медиазапросы поддерживают далеко не все устройства. Вот список клиентов, которые «дружат» с media queries:
Клиенты, которые поддерживают медиазапросы в письмах
Клиенты, которые отображают медиазапросы
В общем, к медиазапросам много вопросов. Если вы не верстальщик, то проще создать дизайн, который будет изначально хорошо смотреться и на ПК, и на мобильном.

Резиновая верстка

Письмо в 2–3 колонки удобно читать на компьютере. Но если уменьшить размер экрана, то колонкам не найдется места. Они сожмутся и читать их будет неудобно. Резиновая верстка превращает многоколоночный макет в одноколоночный. Его удобно читать на телефоне или планшете. Вот как работает резиновая верстка:
Уменьшаем область просмотра — 2 колонки превращаются в 1
Создать резиновую верстку можно в редакторах исходного кода или в блочных редакторах. Второй вариант проще: не надо копаться в HTML и CSS, шаблоны уже адаптированы под изменение ширины экрана.

Сделать самому или отдать верстальщику?

Верстальщик помогает реализовать нетипичные решения.

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

Для такого письма нужен верстальщик:
4 колонки в шапке письма, GIF-анимация под картинкой, элементы фона вплетаются в блоки поверх него

Создаем адаптивное письмо в блочном редакторе

Блочные редакторы встроены во все сервисы рассылок. Они работают по принципу Drag&Drop — бери и тащи. Выбираете нужный блок и переносите его на рабочую область. Далее блок кастомизируют: вставляют картинку или текст, изменяют размер, прописывают теги и вшивают ссылки.

В блочные редакторы вшит резиновый принцип: два и больше горизонтальных блоков прыгнут друг под друга на мобильных устройствах. Так это происходит в редакторе UniSender:
Как быстро создать адаптивное письмо не верстальщику 16261788131068
Резиновая верстка в действии. Стул переместился под текст на мобильном
Изменить шрифт, отступы, размеры картинок и их поведение на разных разрешениях экрана мы не можем. Если хотите, чтобы письмо хорошо смотрелось на всех устройствах, его нужно сразу создавать адаптивным. Вот несколько правил.

6 правил адаптивной верстки

1
Меньше колонок

Чем больше колонок — тем мельче шрифт. А мы хотим, чтобы читатель не напрягал зрение. Большинство рассылок выходит в 1-2 колонки — их удобно смотреть на ПК и легко перестраивать под мобильные.
2
Минималистичный дизайн

Старайтесь, чтобы в рассылке использовались 2-3 основных цвета. Уменьшите количество картинок, изменений фона и шрифтов. Это повысит скорость загрузки страницы на телефонах и упростит адаптацию письма.
3
Большие кнопки и ссылки

В своих гайдлайнах Apple рекомендуют минимальные размеры целевой области кнопок и ссылок 44х44 пикселя. Если не хотим, чтобы подписчики промахивались мимо кнопок, используем этот размер.
4
Разборчивый шрифт

По тем же гайдлайнам Apple, шрифт на смартфонах не должен быть мельче 13 пикселей. Если все же рискнете вставить текст размером 11 или 12 пикселей, то почтовое приложение iOS автоматически увеличит его.
5
Меньше декоративных шрифтов

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

Эффективно используйте пространство экрана. Поместите вверху интересный контент, call-to-action и кнопки для перехода на сайт.

Как проверить адаптивность письма

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

Чтобы убедиться, что с адаптивностью все ОК, отправьте готовое письмо на свои ящики в разных почтовых системах. Если их нет — лучше завести.

Проверьте верстку письма сначала с ПК, а затем с телефона. Если у вас Android, то попросите у друга устройство на iOS и прочитайте сообщение с него.

Если по каким-то причинам не можете отправить тестовые письма в сервисе рассылок — используйте один из сервисов для проверки адаптивности писем. Они показывают, как письмо выглядит в разных браузерах, почтовых приложениях и устройствах с разным разрешением. Не всегда есть смысл покупать в них подписку. Например, цены в Litmus стартуют с 79$ в месяц, а в Email On Acid — c 44$.

У многих верстальщиков есть подписка на такие сервисы. Если заказываете письмо у них — попросите скрины из программы.

Запомнить

Резюмируем сказанное.
1
Требования к адаптивным письмам — они не только для верстальщиков. Они полезны дизайнерам и маркетологам, которые делают рассылки.
2
Верстальщик нужен для адаптации нетипичных писем. Для простых писем подойдет блочный редактор.
3
Адаптивность реализуется двумя инструментами: медиазапросами и резиновой версткой. Медиазапросы — удел верстальщиков, а резиновая верстка вшита в большинство блочных редакторов.
4
Выбирайте разборчивый шрифт, используйте минималистичный дизайн и размещайте все важное в первых двух экранах. От этого выиграет любое письмо.
5
Для проверки адаптивности разошлите письмо на все свои электронные ящики. Постарайтесь прочитать его с самых популярных веб-браузеров, мобильных приложений и операционных систем.
6
Верстальщики из больших компаний часто имеют подписку в сервисах для проверки адаптивности. Если отдаете письмо для верстки на аутсорс — попросите скрины из Litmus или Email On Acid.

Serpstat — набор инструментов для поискового маркетинга!

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

Набор инструментов для экономии времени на выполнение SEO-задач.

7 дней бесплатно

Оцените статью по 5-бальной шкале

4.08 из 5 на основе 11 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Используйте лучшие SEO инструменты

Анализа домена

Узнайте о сильных и слабых сторонах любого сайта используя анализ домена

Проверка индексации

Узнайте какие страницы сайта не участвуют в выдаче используя инструмент проверка индексации

Мониторинг позиций

Отслеживайте изменение ранжирования запросов используя мониторинг позиций ключей

Анализ конкурентов

Сделайте полный анализ сайтов конкурентов для SEO и PPC

Поделитесь статьей с вашими друзьями

Вы уверены?

Знакомство с Serpstat

Узнайте об основных возможностях сервиса удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Я принимаю условия Политики конфиденциальности.

Спасибо, мы сохранили ваши новые настройки рассылок.

Сообщить об ошибке

Отменить
Открыть чат технической поддержки
mail pocket flipboard Messenger telegramm