Начните искать ключевые слова
Используйте Serpstat, чтобы находить лучшие ключи
Как сделать адаптивное письмо, если вы не верстальщик
Иллюстрация: Мария Марикуца
Проведем эксперимент. Возьмите телефон и зайдите в мобильную почту. Откройте и закройте подряд 10-20 писем. В скольких письмах заголовок или фото не умещались в экран? В скольких текст мельчил, так что надо было напрячь зрение? Всегда ли легко было добраться до сути?
Письмо Forbes без адаптивной верстки
Адаптивная верстка предполагает, что письмо будет удобно читать с любого устройства и через любое приложение. Адаптацией занимаются верстальщики — при помощи языков разметки они перестраивают письмо под разные платформы и разрешения экранов.
Я не верстальщик, зачем мне знать про адаптив
Знать требования к адаптивным письмам пригодится не только верстальщикам.
Например, дизайнеры учитывают их при создании дизайна письма. Они отдают верстальщикам два макета: для ПК и под телефон. Дизайн должен учитывать возможности адаптивной верстки. Иначе верстальщик не сможет перенести макеты на язык HTML и CSS.
Маркетологу это надо, чтобы составить ТЗ для дизайнера и верстальщика, а потом проверить их работу. Это полезно, даже если вы собираете письма в блочном редакторе сервиса рассылок. Вы будете знать, как делать удобные письма под телефоны без владения языками разметки.
Например, дизайнеры учитывают их при создании дизайна письма. Они отдают верстальщикам два макета: для ПК и под телефон. Дизайн должен учитывать возможности адаптивной верстки. Иначе верстальщик не сможет перенести макеты на язык HTML и CSS.
Маркетологу это надо, чтобы составить ТЗ для дизайнера и верстальщика, а потом проверить их работу. Это полезно, даже если вы собираете письма в блочном редакторе сервиса рассылок. Вы будете знать, как делать удобные письма под телефоны без владения языками разметки.
Инструменты создания адаптивного дизайна
Чтобы сделать адаптивное письмо, используют два инструмента: медиазапросы и резиновую верстку. Немного расскажу о каждом.
Медиазапросы
Медиазапросы (media queries) — часть языка CSS. Они встраиваются в HTML-код страницы и работают как «переключатели». Медиазапросы срабатывают, когда меняется ширина экрана или его ориентация. Они увеличивают шрифт, меняют цвета, скрывают изображения, расширяют целевую область кнопок и ссылок.
Медиазапросы поддерживают далеко не все устройства. Вот список клиентов, которые «дружат» с media queries:
Медиазапросы поддерживают далеко не все устройства. Вот список клиентов, которые «дружат» с media queries:
Клиенты, которые отображают медиазапросы
В общем, к медиазапросам много вопросов. Если вы не верстальщик, то проще создать дизайн, который будет изначально хорошо смотреться и на ПК, и на мобильном.
Резиновая верстка
Письмо в 2–3 колонки удобно читать на компьютере. Но если уменьшить размер экрана, то колонкам не найдется места. Они сожмутся и читать их будет неудобно. Резиновая верстка превращает многоколоночный макет в одноколоночный. Его удобно читать на телефоне или планшете. Вот как работает резиновая верстка:
Уменьшаем область просмотра — 2 колонки превращаются в 1
Создать резиновую верстку можно в редакторах исходного кода или в блочных редакторах. Второй вариант проще: не надо копаться в HTML и CSS, шаблоны уже адаптированы под изменение ширины экрана.
Сделать самому или отдать верстальщику?
Верстальщик помогает реализовать нетипичные решения.
К нему обращаются, когда возможностей блочного редактора для мобильной версии не хватает. Например, если письмо надо полностью перестроить или у клиента есть особые пожелания к мобильной версии. В остальных ситуациях возможностей блочного редактора хватит.
Для такого письма нужен верстальщик:
К нему обращаются, когда возможностей блочного редактора для мобильной версии не хватает. Например, если письмо надо полностью перестроить или у клиента есть особые пожелания к мобильной версии. В остальных ситуациях возможностей блочного редактора хватит.
Для такого письма нужен верстальщик:
4 колонки в шапке письма, GIF-анимация под картинкой, элементы фона вплетаются в блоки поверх него
Создаем адаптивное письмо в блочном редакторе
Блочные редакторы встроены во все сервисы рассылок. Они работают по принципу Drag&Drop — бери и тащи. Выбираете нужный блок и переносите его на рабочую область. Далее блок кастомизируют: вставляют картинку или текст, изменяют размер, прописывают теги и вшивают ссылки.
В блочные редакторы вшит резиновый принцип: два и больше горизонтальных блоков прыгнут друг под друга на мобильных устройствах. Так это происходит в редакторе UniSender:
В блочные редакторы вшит резиновый принцип: два и больше горизонтальных блоков прыгнут друг под друга на мобильных устройствах. Так это происходит в редакторе UniSender:
Резиновая верстка в действии. Стул переместился под текст на мобильном
Изменить шрифт, отступы, размеры картинок и их поведение на разных разрешениях экрана мы не можем. Если хотите, чтобы письмо хорошо смотрелось на всех устройствах, его нужно сразу создавать адаптивным. Вот несколько правил.
6 правил адаптивной верстки
1
Меньше колонок
Чем больше колонок — тем мельче шрифт. А мы хотим, чтобы читатель не напрягал зрение. Большинство рассылок выходит в 1-2 колонки — их удобно смотреть на ПК и легко перестраивать под мобильные.
Чем больше колонок — тем мельче шрифт. А мы хотим, чтобы читатель не напрягал зрение. Большинство рассылок выходит в 1-2 колонки — их удобно смотреть на ПК и легко перестраивать под мобильные.
2
Минималистичный дизайн
Старайтесь, чтобы в рассылке использовались 2-3 основных цвета. Уменьшите количество картинок, изменений фона и шрифтов. Это повысит скорость загрузки страницы на телефонах и упростит адаптацию письма.
Старайтесь, чтобы в рассылке использовались 2-3 основных цвета. Уменьшите количество картинок, изменений фона и шрифтов. Это повысит скорость загрузки страницы на телефонах и упростит адаптацию письма.
4
Разборчивый шрифт
По тем же гайдлайнам Apple, шрифт на смартфонах не должен быть мельче 13 пикселей. Если все же рискнете вставить текст размером 11 или 12 пикселей, то почтовое приложение iOS автоматически увеличит его.
По тем же гайдлайнам Apple, шрифт на смартфонах не должен быть мельче 13 пикселей. Если все же рискнете вставить текст размером 11 или 12 пикселей, то почтовое приложение iOS автоматически увеличит его.
5
Меньше декоративных шрифтов
Чаще всего их вставляют в виде изображения. При просмотре с мобильного такой текст будет масштабироваться под размер экрана или давать горизонтальную полосу прокрутки — читать неудобно.
Чаще всего их вставляют в виде изображения. При просмотре с мобильного такой текст будет масштабироваться под размер экрана или давать горизонтальную полосу прокрутки — читать неудобно.
6
Краткое и лаконичное изложение
Эффективно используйте пространство экрана. Поместите вверху интересный контент, call-to-action и кнопки для перехода на сайт.
Эффективно используйте пространство экрана. Поместите вверху интересный контент, call-to-action и кнопки для перехода на сайт.
Как проверить адаптивность письма
Можно использовать функцию предпросмотра письма в сервисе рассылок. Но она не гарантирует, что сообщение будет смотреться именно так на всех устройствах.
Чтобы убедиться, что с адаптивностью все ОК, отправьте готовое письмо на свои ящики в разных почтовых системах. Если их нет — лучше завести.
Проверьте верстку письма сначала с ПК, а затем с телефона. Если у вас Android, то попросите у друга устройство на iOS и прочитайте сообщение с него.
Если по каким-то причинам не можете отправить тестовые письма в сервисе рассылок — используйте один из сервисов для проверки адаптивности писем. Они показывают, как письмо выглядит в разных браузерах, почтовых приложениях и устройствах с разным разрешением. Не всегда есть смысл покупать в них подписку. Например, цены в Litmus стартуют с 79$ в месяц, а в Email On Acid — c 44$.
У многих верстальщиков есть подписка на такие сервисы. Если заказываете письмо у них — попросите скрины из программы.
Чтобы убедиться, что с адаптивностью все ОК, отправьте готовое письмо на свои ящики в разных почтовых системах. Если их нет — лучше завести.
Проверьте верстку письма сначала с ПК, а затем с телефона. Если у вас Android, то попросите у друга устройство на iOS и прочитайте сообщение с него.
Если по каким-то причинам не можете отправить тестовые письма в сервисе рассылок — используйте один из сервисов для проверки адаптивности писем. Они показывают, как письмо выглядит в разных браузерах, почтовых приложениях и устройствах с разным разрешением. Не всегда есть смысл покупать в них подписку. Например, цены в Litmus стартуют с 79$ в месяц, а в Email On Acid — c 44$.
У многих верстальщиков есть подписка на такие сервисы. Если заказываете письмо у них — попросите скрины из программы.
Запомнить
Резюмируем сказанное.
1
Требования к адаптивным письмам — они не только для верстальщиков. Они полезны дизайнерам и маркетологам, которые делают рассылки.
2
Верстальщик нужен для адаптации нетипичных писем. Для простых писем подойдет блочный редактор.
3
Адаптивность реализуется двумя инструментами: медиазапросами и резиновой версткой. Медиазапросы — удел верстальщиков, а резиновая верстка вшита в большинство блочных редакторов.
4
Выбирайте разборчивый шрифт, используйте минималистичный дизайн и размещайте все важное в первых двух экранах. От этого выиграет любое письмо.
5
Для проверки адаптивности разошлите письмо на все свои электронные ящики. Постарайтесь прочитать его с самых популярных веб-браузеров, мобильных приложений и операционных систем.
6
Верстальщики из больших компаний часто имеют подписку в сервисах для проверки адаптивности. Если отдаете письмо для верстки на аутсорс — попросите скрины из Litmus или Email On Acid.
Serpstat — набор инструментов для поискового маркетинга!
Находите ключевые фразы и площадки для обратных ссылок, анализируйте SEO-стратегии конкурентов, ежедневно отслеживайте позиции в выдаче, исправляйте SEO-ошибки и управляйте SEO-командами.
Набор инструментов для экономии времени на выполнение SEO-задач.
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Используйте лучшие SEO инструменты
Анализа домена
Узнайте о сильных и слабых сторонах любого сайта используя анализ домена
Проверка индексации
Узнайте какие страницы сайта не участвуют в выдаче используя инструмент проверка индексации
Мониторинг позиций
Отслеживайте изменение ранжирования запросов используя мониторинг позиций ключей
Анализ конкурентов
Сделайте полный анализ сайтов конкурентов для SEO и PPC
Рекомендуемые статьи
Кейсы, лайфхаки, исследования и полезные статьи
Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити :)
Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.
Вы уверены?
Спасибо, мы сохранили ваши новые настройки рассылок.