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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

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

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

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

Как сделать адаптивное письмо, если вы не верстальщик
Иллюстрация: Мария Марикуца
Артем Чеховский, автор статьи об адаптивной верстке
Артем Чеховской
Автор блога UniSender
Проведем эксперимент. Возьмите телефон и зайдите в мобильную почту. Откройте и закройте подряд 10-20 писем. В скольких письмах заголовок или фото не умещались в экран? В скольких текст мельчил, так что надо было напрячь зрение? Всегда ли легко было добраться до сути?
Я столкнулся с похожими проблемами в каждом третьем письме. И ни одного не дочитал до конца. А вы дочитали?

Если email тяжело читать с мобильного, значит в нем отсутствует адаптивная верстка. Пример:
Пример сайта без адаптивной верстки
Письмо Forbes без адаптивной верстки
Адаптивная верстка предполагает, что письмо будет удобно читать с любого устройства и через любое приложение. Адаптацией занимаются верстальщики — при помощи языков разметки они перестраивают письмо под разные платформы и разрешения экранов.

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

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

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

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

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

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

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

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

Медиазапросы поддерживают далеко не все устройства. Вот список клиентов, которые «дружат» с media queries:
Клиенты, которые поддерживают медиазапросы в письмах
Клиенты, которые отображают медиазапросы
Сразу скажу: в таблице нет некоторых популярных почтовых клиентов: например, Яндекса и Mail.ru. Данных о том, поддерживают они медиазапросы или нет, я не нашел.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если по каким-то причинам не можете отправить тестовые письма в сервисе рассылок — используйте SendHtmail.ru. В нем можно отправить HTML-версию письма 10 получателям.

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

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

Запомнить

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

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

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

5 из 5 на основе 4 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Хотите узнать новые фишки по интернет-маркетингу?
Подпишитесь на нашу рассылку — только полезные статьи, реальные кейсы и новости Serpstat раз в неделю.

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

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов