Как сделать адаптивное email-письмо для мобильных устройств

Email-письмо может отлично выглядеть на большом мониторе и оказаться неудобным на смартфоне.

Текст становится слишком мелким, несколько колонок сжимаются, кнопки сложно нажимать пальцем, а большое изображение растягивает письмо шире экрана.

Поэтому при создании рассылки нужно сразу учитывать мобильные устройства.

Адаптивное email-письмо — это письмо, структура которого остаётся удобной для чтения на экранах разной ширины.

Разберём, как этого добиться и какие элементы нужно обязательно проверять перед отправкой.

Что такое адаптивное email-письмо

Адаптивное письмо подстраивается под размер экрана получателя.

Например, на компьютере блок может выглядеть так:

изображение | текст

а на смартфоне перестроиться:

изображение

текст

То же относится к карточкам товаров, кнопкам и колонкам.

Главная задача адаптивности — не просто уменьшить письмо до размеров мобильного экрана.

Нужно сохранить:

• читаемый текст;
• понятную структуру;
• удобные кнопки;
• нормальные изображения;
• логичную последовательность контента.

Почему мобильная версия особенно важна

Почту часто просматривают со смартфона.

При этом пользователь может принимать решение очень быстро.

Если письмо приходится:

• увеличивать пальцами;
• прокручивать по горизонтали;
• пытаться попасть в маленькую кнопку;
• разбирать мелкий текст,

вероятность продолжить чтение снижается.

Поэтому мобильную версию лучше рассматривать не как дополнительную функцию, а как обычную часть создания email-рассылки.

Адаптивность начинается не с CSS

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

На самом деле всё начинается со структуры.

Если письмо содержит:

• слишком много колонок;
• огромные таблицы;
• длинные строки;
• мелкие кнопки;
• перегруженные блоки,

даже хорошая техническая адаптация не сделает его удобным.

Поэтому сначала нужно построить понятный макет.

Какую ширину делать у email-письма

Для desktop-версии email обычно используют достаточно компактную рабочую область.

Нет смысла растягивать текст на всю ширину большого монитора.

Слишком длинная строка сложнее читается.

Поэтому письмо чаще выглядит как центральный контейнер, внутри которого находятся:

• заголовки;
• текст;
• изображения;
• кнопки;
• карточки.

На смартфоне этот контейнер должен занимать доступную ширину экрана с небольшими боковыми отступами.

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

Не делайте слишком много колонок

На desktop три или четыре карточки в ряд могут выглядеть аккуратно.

На смартфоне такая структура становится проблемой.

Например:

товар 1 | товар 2 | товар 3 | товар 4

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

Текст становится мелким, изображения теряют смысл, кнопки перестают помещаться.

Лучше предусмотреть перестроение карточек.

Например:

На desktop

Товар 1 | Товар 2 | Товар 3

На смартфоне

Товар 1

Товар 2

Товар 3

Так пользователю проще изучать содержимое.

Одна колонка — самый безопасный вариант

Если письмо не требует сложного каталога или сравнения, одноколоночная структура часто является лучшим решением.

Например:

логотип

↓

заголовок

↓

изображение

↓

текст

↓

кнопка

↓

дополнительный блок

↓

footer

Такая композиция хорошо переносится между desktop и mobile и требует меньше сложных адаптивных решений.

Размер текста на мобильном устройстве

Главный текст не должен становиться настолько мелким, что его приходится увеличивать.

Особенно это касается:

• основного текста;
• подписей;
• ссылок;
• текста кнопок.

Не стоит пытаться поместить больше информации за счёт уменьшения шрифта.

Лучше сократить содержание.

Заголовки при этом тоже не должны занимать почти весь экран одним словом на строку.

Для мобильной версии важно найти баланс между заметностью и компактностью.

Используйте короткие абзацы

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

Сравним.

Плохо:

Один большой абзац на десять строк, в котором подряд объясняется акция, условия, преимущества, сроки и дополнительное предложение.

Лучше:

короткое вступление;

отдельное объяснение;

один главный тезис;

кнопка.

На узком экране короткие абзацы особенно сильно улучшают читаемость.

Кнопки должны быть удобными для нажатия

На компьютере пользователь работает мышью.

На смартфоне — пальцем.

Это принципиальная разница.

Маленькая текстовая ссылка может быть неудобна.

Основной CTA лучше оформлять полноценной кнопкой с достаточной высотой и свободным пространством вокруг.

Например:

Посмотреть коллекцию

лучше, чем маленькая ссылка:

подробнее

между двумя строками текста.

Не ставьте несколько кнопок слишком близко

Если рядом находятся:

Купить | Подробнее | Каталог

на мобильном устройстве пользователь может случайно нажать не туда.

Если действий несколько, лучше:

• увеличить расстояние;
• разместить кнопки вертикально;
• выделить одну главную.

Вообще для большинства маркетинговых писем полезно иметь один основной CTA.

Не делайте основной CTA слишком мелким

Кнопка должна визуально выделяться.

Особенно если письмо длинное.

Пользователь должен быстро понять:

что мне предлагают сделать?

Например:

Получить предложение

Посмотреть товары

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

Читать статью

Если основное действие сложно найти на смартфоне, адаптивность письма решает только половину задачи.

Изображения должны масштабироваться

Большая картинка не должна заставлять пользователя прокручивать письмо по горизонтали.

В адаптивной верстке изображение обычно ограничивается шириной доступного контейнера.

Условная логика:

max-width: 100%;
height: auto;

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

Если письмо создаётся в визуальном конструкторе, техническая реализация обычно скрыта от пользователя.

Однако сам принцип остаётся тем же:

изображение не должно быть шире мобильного экрана.

Не вставляйте текст внутрь изображения без необходимости

Например, компания создаёт огромный баннер, внутри которого уже находятся:

• заголовок;
• описание акции;
• цена;
• условия;
• кнопка.

На большом экране всё читается.

На смартфоне картинка уменьшается, а вместе с ней уменьшается и текст.

В итоге информация становится практически нечитаемой.

Лучше разделить:

изображение

и

настоящий текст письма.

Это даёт больше контроля над мобильным отображением и содержанием.

Баннеры требуют отдельной проверки

Особенно широкие горизонтальные изображения.

Например, баннер 1200 × 300 может отлично смотреться на desktop.

На мобильном он становится очень низким, а мелкие детали теряются.

Иногда лучше подготовить более универсальную композицию:

• крупный объект;
• минимум текста;
• понятный визуальный центр.

А сам заголовок и CTA разместить отдельными HTML-элементами ниже.

Осторожнее с изображениями фиксированной ширины

Если в HTML вручную указать слишком большую фиксированную ширину, мобильная версия может выйти за границы экрана.

Например:

<img width="800">

без корректных адаптивных правил.

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

Многоколоночные блоки должны перестраиваться

Особенно распространённый пример:

изображение слева + текст справа

На компьютере:

Фото	Описание
изображение	заголовок, текст, кнопка

На смартфоне лучше:

Изображение

Заголовок

Текст

Кнопка

Если просто уменьшить две колонки, и изображение, и текст могут стать слишком узкими.

Порядок блоков на мобильном имеет значение

Представим три карточки.

На desktop:

Изображение 1 | Текст 1

Текст 2 | Изображение 2

Изображение 3 | Текст 3

Такая шахматная композиция выглядит интересно.

Но при перестроении на смартфон можно случайно получить:

Изображение 1

Текст 1

Текст 2

Изображение 2

В результате визуальный порядок становится странным.

Поэтому нужно отдельно смотреть, в каком порядке элементы идут после перехода в одну колонку.

Не перегружайте письмо горизонтальными элементами

Например:

Новости | Акции | Каталог | Блог | Контакты

в виде пяти маленьких ссылок в одну строку.

На desktop это может работать.

На смартфоне элементы становятся слишком тесными.

Если такая навигация вообще нужна в email, лучше уменьшить количество пунктов или разрешить им переноситься.

Что делать с длинными URL

Не вставляйте в текст огромные открытые URL вроде:

https://example.ru/catalog/category/special-offer/…

Такая строка может плохо переноситься.

Лучше использовать нормальный анкор:

Посмотреть предложение

То же относится к email, телефонам и техническим строкам.

Проверяйте длину заголовков

Desktop позволяет использовать длинный заголовок в одну-две строки.

На смартфоне тот же текст может занять четыре-пять строк.

Это не обязательно ошибка.

Но если первый экран письма выглядит так:

огромный заголовок на семь строк

и только потом появляется смысл сообщения, лучше сократить формулировку.

Как работать с preheader

Preheader отображается не внутри мобильного макета письма, а рядом с темой в интерфейсе почтового клиента.

Но для мобильного пользователя он особенно важен, потому что помогает понять письмо ещё до открытия.

Например:

Тема:
Новые модели уже в каталоге

Preheader:
Собрали свежую коллекцию и специальные предложения

Тема и preheader должны дополнять друг друга, а не повторять одну и ту же фразу.

Footer тоже должен быть адаптивным

Нижнюю часть письма часто воспринимают как технический блок и уделяют ей мало внимания.

Но именно там могут находиться:

• информация об отправителе;
• контакты;
• ссылки;
• отписка.

Не стоит делать footer микроскопическим.

На мобильном он тоже должен оставаться читаемым.

Не используйте слишком мелкие служебные ссылки

Иногда ссылку «Отписаться» делают практически незаметной.

Это плохая идея.

Она должна быть доступной и читаемой.

Так же как и другая обязательная информация отправителя.

Нужно ли использовать media queries

Если письмо верстается вручную, media queries могут использоваться для изменения стилей на узких экранах.

Например:

@media screen and (max-width: 600px) {
    .column {
        width: 100% !important;
        display: block !important;
    }
}

Но email отличается от сайта.

Нужно учитывать поддержку конкретных правил различными почтовыми клиентами.

Поэтому не стоит строить всё письмо на сложном CSS, не проверив его совместимость.

Почему inline CSS всё ещё используется в email

На обычном сайте CSS обычно хранится отдельно.

В email многие стили традиционно задаются непосредственно элементам.

Например:

<td style="font-size:16px; line-height:24px;">

Причина — особенности поддержки CSS в почтовых клиентах.

Поэтому HTML email может выглядеть намного более громоздким, чем HTML современного сайта.

И это ещё одна причина, почему для типовых рассылок визуальный конструктор часто удобнее ручной верстки.

Что проще: адаптивный HTML или конструктор

Если человек не занимается email-разработкой, конструктор обычно проще.

Он позволяет сосредоточиться на:

• содержании;
• структуре;
• визуальной иерархии.

А не на:

• таблицах;
• media queries;
• inline CSS;
• особенностях Outlook.

В конструкторе email-писем QWERTYMAIL письмо можно собрать визуально без необходимости писать HTML вручную.

Но предпросмотр всё равно обязателен

Даже хороший конструктор не отменяет финальную проверку.

Перед отправкой посмотрите:

• desktop;
• mobile;
• длинные заголовки;
• кнопки;
• изображения;
• колонки;
• ссылки;
• footer.

И желательно сделать реальную тестовую отправку.

Как тестировать мобильную версию

Минимальный вариант:

1. Откройте мобильный предпросмотр

Проверьте всю длину письма.

2. Отправьте тест себе

Откройте его на реальном смартфоне.

3. Нажмите все основные кнопки

Проверьте, удобно ли ими пользоваться.

4. Посмотрите изображения

Нет ли обрезания или горизонтального скролла.

5. Прочитайте текст

Не слишком ли он мелкий.

6. Проверьте порядок блоков

Особенно если на desktop используются колонки.

Проверка на одном смартфоне — не идеальна

Разные почтовые приложения могут отображать письма немного по-разному.

Поэтому для важных кампаний полезно проверять несколько вариантов.

Например:

• Gmail;
• Яндекс Почту;
• Mail.ru;
• Outlook.

Особенно если используется нестандартная HTML-верстка.

Ошибка: проверять только ширину экрана браузера

Иногда разработчик открывает HTML-письмо в Chrome, уменьшает окно и говорит:

«Адаптив работает».

Но браузер и почтовый клиент — не одно и то же.

Email может отображаться иначе после реальной отправки.

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

Ошибка: слишком сложный первый экран

На мобильном первый экран особенно ценен.

Если пользователь после открытия видит:

• огромный логотип;
• большое пустое пространство;
• баннер;
• длинный заголовок,

а основное предложение начинается далеко ниже, письмо теряет эффективность.

Первый экран должен быстро объяснять:

кто пишет

о чём письмо

что предлагается.

Ошибка: огромные изображения

Не только визуально, но и по весу.

Тяжёлое письмо может загружаться медленнее на мобильном интернете.

Поэтому изображения стоит оптимизировать.

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

Ошибка: делать всё картинками

Некоторые письма фактически являются одним большим изображением.

Это создаёт сразу несколько проблем:

• текст плохо адаптируется;
• его нельзя нормально увеличить;
• контент зависит от загрузки изображения;
• кнопка внутри картинки фактически не является нормальной кнопкой;
• мобильная версия становится менее гибкой.

Лучше использовать изображения как визуальное дополнение, а не замену всей HTML-структуры.

Ошибка: слишком много текста

На мобильном длинное письмо воспринимается ещё длиннее.

Это не означает, что каждое сообщение должно состоять из двух предложений.

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

Например:

вместо пяти абзацев объяснения акции иногда достаточно двух строк и кнопки.

Ошибка: слишком много CTA

Если в письме десять одинаково заметных действий, пользователь не понимает, какое из них главное.

На мобильном этот эффект усиливается.

Лучше определить основной CTA.

Дополнительные действия можно сделать менее заметными.

Нужно ли делать отдельное письмо для смартфона

В большинстве случаев — нет.

Разумнее иметь одну адаптивную версию, которая нормально работает на разных устройствах.

Отдельные desktop и mobile письма усложняют:

• производство;
• тестирование;
• изменения;
• поддержку.

Поэтому чаще используют одну структуру с адаптивным поведением.

Что делать с таблицами

Email традиционно использует таблицы для построения макета.

Но широкая таблица может стать проблемой на мобильном.

Если внутри находятся:

| Товар | Артикул | Цена | Скидка | Остаток | Доставка |

на узком экране такую структуру сложно сохранить.

Иногда лучше заменить таблицу карточками.

Например:

Товар А
Цена: 1 500 ₽
Скидка: 20%
Доставка: завтра

Для мобильного пользователя это может быть намного удобнее.

Что делать с карточками товаров

Карточки отлично подходят для email, если их немного.

Например, на desktop:

3 карточки в ряд

а на смартфоне:

1 карточка на строку

При этом кнопка каждой карточки должна оставаться достаточно крупной.

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

Что делать с двумя колонками текста

Лучше либо перестраивать их в одну колонку, либо вообще избегать, если нет очевидной причины.

Две длинные текстовые колонки удобны в печатном журнале.

В email они редко дают реальную пользу.

Что делать с видео

Полноценная поддержка встроенного видео в email ограничена и зависит от клиента.

Поэтому часто используют:

превью изображения → кнопка просмотра → ссылка на сайт или видеоплатформу.

На мобильном это также предсказуемее.

Анимация и GIF

GIF может работать в email, но не стоит делать всё сообщение зависимым от анимации.

Некоторые клиенты могут отображать только первый кадр.

Поэтому первый кадр должен сам по себе передавать смысл.

И обязательно следите за размером файла.

Как адаптивность влияет на конверсию

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

Но плохая мобильная версия может помешать выполнить действие.

Например:

пользователь заинтересовался предложением,

но:

кнопку невозможно нормально нажать.

Или:

текст приходится увеличивать.

То есть адаптивность не заменяет маркетинг, а убирает технические препятствия между сообщением и действием.

Что важнее: красивый desktop или простой mobile

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

Сложная desktop-композиция не имеет большой ценности, если значительная часть аудитории получает неудобное мобильное письмо.

Хороший email-дизайн — не максимальное количество декоративных решений.

Это понятная структура, которая работает в реальных условиях.

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

Рабочий процесс может выглядеть так:

1. Выбрать шаблон или создать письмо

↓

2. Собрать структуру из блоков

↓

3. Добавить текст и изображения

↓

4. Проверить мобильное отображение

↓

5. Упростить сложные блоки

↓

6. Отправить тест

↓

7. Проверить письмо на смартфоне

↓

8. Запустить рассылку

Для старта можно использовать конструктор email-писем QWERTYMAIL.

А если не хочется начинать с пустого макета, можно взять готовый шаблон email-письма.

Чек-лист адаптивного email-письма

Перед отправкой проверьте:

1. Нет горизонтальной прокрутки.
2. Основной текст легко читается.
3. Заголовки не выглядят чрезмерно большими.
4. Изображения помещаются в экран.
5. Текст не встроен в мелкие изображения.
6. Колонки правильно перестраиваются.
7. Порядок блоков сохраняет смысл.
8. Кнопки удобно нажимать пальцем.
9. Между CTA достаточно пространства.
10. Footer остаётся читаемым.
11. Все ссылки работают.
12. Письмо проверено реальной тестовой отправкой.

Частые вопросы

Что значит адаптивное email-письмо?

Это письмо, структура которого подстраивается под размер экрана и остаётся удобной для чтения и взаимодействия на компьютере и смартфоне.

Нужно ли делать отдельную мобильную версию?

Обычно нет. Достаточно одного корректно адаптивного письма.

Можно ли создать адаптивное письмо без HTML?

Да. Визуальный конструктор позволяет создавать типовые адаптивные email-письма без ручной верстки.

Сколько колонок лучше использовать?

Для мобильной версии наиболее безопасна одна колонка. Несколько колонок на desktop лучше перестраивать вертикально на узких экранах.

Нужно ли проверять письмо на реальном телефоне?

Да. Предпросмотр полезен, но тестовая отправка на реальное устройство даёт более надёжную картину.

Почему письмо выглядит нормально в браузере, но иначе в Outlook?

Почтовые клиенты имеют собственные ограничения и поддерживают HTML/CSS не так, как обычные браузеры.

Где создать адаптивное email-письмо?

В конструкторе email-писем QWERTYMAIL.

Что в итоге

Адаптивное письмо начинается с простой структуры.

Не нужно пытаться уместить desktop-макет на маленький экран.

Лучше изначально проектировать сообщение так, чтобы каждый элемент отвечал на вопрос:

будет ли этим удобно пользоваться со смартфона?

Основные правила просты:

понятная ширина → минимум сложных колонок → читаемый текст → адаптивные изображения → крупные CTA → обязательный мобильный тест.

А для большинства регулярных рассылок нет необходимости вручную решать каждую техническую задачу через HTML.

Можно собрать письмо в визуальном редакторе, проверить мобильное отображение, отправить тест и уже после этого запускать кампанию.

Именно такой процесс делает адаптивность не отдельным техническим проектом, а обычной частью работы с email-рассылками.

Создание email-писем

Продолжить по теме

Разберитесь с выбором способа создания письма и подготовьте корректную мобильную версию.

Следующий материал

HTML-письмо или конструктор email-писем: что выбрать

Когда достаточно визуального редактора, а когда имеет смысл использовать ручную HTML-верстку.

Читать статью →Инструмент

Конструктор email-писем QWERTYMAIL

Соберите адаптивное письмо в визуальном редакторе без необходимости вручную верстать HTML.

Открыть Конструктор →