Что учесть в вёрстке, чтобы письмо не стало «пустым местом»
Бывает, что всё в письме держится на баннере, но он просто не загружается. У получателя — пустота, у вас — провал коммуникации. В этой статье рассказываем и показываем на примере реальных рассылок, как сверстать письмо, чтобы сохранить структуру, смысл и действия в письме, даже если изображения не отображаются.
Письмо без картинок — не редкость. Изображения в рассылках могут не загрузиться по множеству причин, и далеко не всегда дело в плохом интернете. Хороший email-маркетолог заранее думает о том, как письмо будет выглядеть без визуала — и делает так, чтобы оно оставалось читаемым и информативным.
Вот несколько основных причин, почему в рассылках не загружаются картинки.
Настройки безопасности и защита от вредоносного контента. Некоторые почтовые клиенты (например, Outlook) по умолчанию блокируют загрузку изображений, чтобы защитить пользователя. На это могут влиять и другие инструменты защиты: антивирусы, расширения браузеров или фильтры в мобильных приложениях.
Ограничения со стороны пользователя. Читатель может вручную отключить показ картинок — например, чтобы сэкономить трафик или сохранить приватность. Иногда изображения не загружаются из-за слабого соединения, особенно на мобильных устройствах.
Фильтры корпоративной почты. В рабочей переписке письма часто проходят через внутренние системы безопасности. Они могут автоматически блокировать внешний контент — особенно если изображения подгружаются с незащищённых или незнакомых ресурсов.
Использование незащищённых ссылок на изображения (HTTP вместо HTTPS). Если картинки загружаются по незащищённому протоколу (HTTP), некоторые клиенты (например, Gmail) блокируют их. Этого легко избежать, если заранее убедиться, что все изображения в письме идут по HTTPS.
Мы часто говорим, что письмо не должно состоять только из картинок — в том числе потому, что такие письма не проходят спам-фильтры. Но до сих пор встречаем рассылки от крупных брендов, где вся важная информация — от заголовков до кнопок — размещена на изображениях. Вот несколько примеров, которые наглядно показывают, почему это серьёзная проблема.
В рассылке MIXIT вся ключевая информация — на баннере. В режиме без картинок мы так и не узнаем, кому и почему говорим «пока». Тексты должны оставаться текстами, особенно если они несут смысловую нагрузку. Спасают только живые кнопки и alt-тексты у части изображений — благодаря им пользователь хотя бы может перейти на сайт.
Магазин посуды Reywood оформил письмо так, что при отключённых картинках из него невозможно понять, о чём идёт речь. Тема письма не даёт ясных ожиданий, и в теле письма — ни одного текстового элемента. Единственное, что остаётся пользователю — большая кнопка с переходом на сайт.
Самый проблемный пример — рассылка бренда косметики The Act. Меню, текст, кнопки и даже футер реализованы как изображения. В письме нет ни alt-текстов, ни активных ссылок. В результате пользователь не может понять, что предлагает бренд, и не может перейти на сайт — рассылка просто становится пустой.
Чтобы избежать проблем, дизайн писем стоит создавать не в Photoshop или Figma, а сразу в блочных редакторах в сервисах email-рассылок. Это не только удобно, но и помогает построить письмо так, чтобы оно сохранило структуру и эффективность в любых условиях.
Блочная вёрстка — это не просто «собрали письмо из прямоугольников». Это смысловая структура письма. Каждый блок отвечает за одну мысль, одно действие, один фокус внимания. Если вы предлагаете скидку — оформляйте это как отдельный блок: с фоном, текстом, изображением и кнопкой. Если в письме есть полезный контент — он тоже должен быть оформлен обособленно.
Такой подход помогает сохранить читаемость даже без картинок. Структура письма остаётся ясной, потому что каждый блок работает автономно — как самостоятельная смысловая единица, а не часть общей «картинки».
Если у вашего бренда есть узнаваемая палитра, используйте её в фоне: это добавляет динамики и поддерживает узнаваемость даже без изображений. Например, центр онлайн-обучения «Фоксфорд» использует сиреневый фон — тот же, что и в других каналах бренда.
В блочной вёрстке фон — это не только про красоту, но и про архитектуру. Его можно задавать как для всего письма, так и для отдельных блоков. Цвет помогает отделить один элемент от другого, выстроить ритм чтения, подчеркнуть смысл и сохранить целостность даже при отключённых картинках.
Отступы не менее важны, чем цвет. Они бывают внешними — между разными блоками, и внутренними — расстояния размещения контента от границ блока и между контентом внутри него. Если у блока нет воздуха, он сливается с соседним. Если внутренние отступы блока слишком узкие, контент кажется сжатым и теряет читаемость.
Кнопки в виде изображений — плохая идея. Если изображения не загрузятся, пользователь их просто не увидит. А даже если загрузятся, такие кнопки могут плохо масштабироваться на мобильных устройствах и терять читаемость.
Как сверстать адаптивное письмо
Лучшее решение — HTML-кнопки. Их легко собрать в любом блочном редакторе и настроить под ваш бренд. Что важно:
Кнопка — это логическое завершение блока. Если блок что-то продаёт — рядом должна быть кнопка. Если просто информирует — добавьте ссылку. Главное, чтобы у каждого смыслового фрагмента был логичный путь дальше: к действию, на сайт, к оформлению.
Лучше всего в условиях отключенных картинок работают рассылки, в которых главную роль играет текст. Это могут быть лайфхаки, дайджесты, истории клиентов или новости компании. Хороший пример — письма от онлайн-школ, у которых много бренд-контента и минимум визуальных рисков.
Но даже если вы продаёте через визуал, стоит сопровождать изображения описаниями — на случай, если картинки не загрузятся. Это особенно актуально для категорий, где выбор зависит от характеристик, а не от внешнего вида.
Например, в рассылке Randewoo покупателю помогают тексты: даже без изображений можно понять, о каком парфюме идёт речь. А «зигзагообразная» вёрстка с «воздухом» делает описания заметнее.
Для сравнения — письмо от Л’Этуаль. Да, товарные блоки отделены и снабжены крупными названиями, но без картинок они почти бесполезны: никакой дополнительной информации о продукте мы не получаем, и у нас нет никакого представления о нём, если товар незнакомый.
Но и в сегментах товаров, где ключевой критерий — визуал, можно с помощью текста привлечь внимание подписчиков, когда картинки не загружаются.
Например, рассылка магазина мебели Loft Designe. По кратким интригующим описаниям мы можем сформировать ожидания от товаров. Согласитесь, любопытно взглянуть на кресло с лохматой обивкой из мультфильма «Лоракс».
А в случае с рассылкой магазина The Dar Store краткое описание ваз в начале письма только запутывает: разные характеристики, сплетённые в один абзац, неразличимы. Без картинок нам трудно понять, какой именно блок кликать, чтобы открыть товар с вазой, которая соответствует нашим вкусам и настроению.
Когда изображения в письме не загружаются, именно alt-текст помогает подписчику понять, что скрывается за «пустым прямоугольником» и решить, стоит ли переходить по ссылке. Это особенно важно для рассылок, где визуал решает всё: одежда, украшения, предметы интерьера.
Если у бренда нет описания товара в тексте, а картинка не открылась — письмо превращается в пустоту. Но alt-текст с коротким и выразительным описанием может спасти ситуацию. Например, в рассылке Befree подписчика может зацепить «заколка в виде орхидеи» или «майка из сетки с принтом-граффити» — даже без картинки у товара появляется образ.
Главное — не скупиться на детали. Один выразительный штрих в alt-тексте способен заинтересовать и удержать внимание, когда визуального ряда нет.
Есть и другие способы улучшить вид письма без картинок: например, убрать значки непрогрузившихся изображений или красиво оформить «альты», добавив к ним ссылки. Всё это можно сделать, доработав или целиком сверстав письмо в HTML — в большинстве редакторов можно «подтянуть» код письма, свёрстанного при помощи блоков и шаблонов.
В отличие от блочных редакторов, HTML-письма чаще всего собираются как вложенные таблицы: каждая ячейка — отдельный контентный блок со своим содержимым. Такой подход позволяет контролировать структуру и минимизировать вероятность того, что письмо «поедет» в разных почтовых клиентах или на мобильных устройствах.
Несколько важных правил:
Больше о вёрстке писем с помощью CSS и HTML для чайников писали в другой статье «Конверта» — там есть база и все основные особенности.
Ещё один важный момент в рассылках с отключёнными картинками — это то, что остаётся на месте изображения. Почтовые клиенты по умолчанию показывают заглушку: иконку, значок изображения или надпись вроде «Image not loaded». Такие элементы визуально ломают аккуратную вёрстку, особенно если изображение декоративное — например, иконка возле текста или эмодзи, встроенные через <img>.
Но есть способ этого избежать: если правильно задать CSS-стили, пиктограмма не появится вовсе. Так, например, делает Aviasales — при отключённых изображениях иконки просто исчезают, и на их месте остаётся чистый фон (в некоторых случаях, как здесь — едва заметная рамка).
Чтобы скрыть эту пиктограмму, нужно сделать одну простую вещь: не задавать высоту изображению вообще. Ни через тег <height>, ни через inline-стили.
Если в коде письма изображение не загрузилось, но ему заранее задана ширина (например, width: 100% или width: 290px), а высота не указана вовсе, то почтовый клиент не знает, какую высоту зарезервировать под это изображение. В итоге он оставляет высоту нулевой, и никакая пиктограмма не появляется — потому что просто нечего отображать.
Хороший пример реализации — рассылка магазина парфюмерии Randewoo.
Некоторые конструкторы рассылок (например, Unisender) поддерживают градиентные фоны в блоках. Они могут стать эффектной заменой картинкам в ситуации, когда изображения не загружаются. С помощью такого оформления лучше всего выделять информацию о скидках, промокодах, важных датах.
Но если в сервисе рассылок такой функции нет, можно задать градиент через свойство background-image и CSS-функцию linear-gradient. В ней нужно будет указать два кода цвета — с какого начинается градиент и каким заканчивается. Вот, как выглядит градиент в рассылке Нетологии:
Такие градиенты поддерживаются во всех основных браузерных и мобильных почтовых клиентах, но могут работать нестабильно в десктопных приложениях (например, в Outlook). Поэтому всегда задавайте базовый цвет как резерв.
Alt-тексты тоже можно стилизовать через inline-CSS: задать размер шрифта, цвет, отступы и выравнивание. Это полезно, если не хочется потерять CTA с картинки: alt-подпись может стать кнопкой или ярко передать сообщение, скрытое в незагруженном баннере. Например — в рассылке EMAILMATRIX alt-тексты стилизованы как кнопки.
По умолчанию alt отображается в виде серой подписи на месте картинки, но вы можете стилизовать его, задав базовые параметры: размер шрифта, цвет текста, отступы, выравнивание, фоновый цвет блока.
Такая стилизация поддерживается не всеми почтовиками: проблемы могут возникнуть с десктопными приложениями и — в некоторых случаях — с Gmail. Поэтому целиком полагаться на такое решение не стоит.
Браузерная версия письма — такой же must have, как кнопка отписки от рассылки. Это особенно актуально, если изображения не загрузились по техническим причинам, а не по воле пользователя. Кроме того, в Gmail и некоторых других почтовых клиентах длинные письма могут быть обрезаны — чаще всего, если вес HTML превышает 102 КБ.
Чтобы подписчик мог увидеть письмо полностью, дайте ему понятную и доступную альтернативу — ссылку на веб-версию. Её часто размещают внизу, но такой вариант не всегда работает: если письмо не отображается, пользователь может просто не дойти до футера. Поэтому ссылку стоит разместить в самом верху, до основного контента. Лучше использовать для оформления простые и понятные формулировки, например: «Не отображаются картинки? Посмотреть письмо в браузере».
Прежде чем нажать «Отправить», протестируйте письмо на себе. Откройте его в почтовом клиенте в режиме с отключёнными изображениями и посмотрите: остаются ли понятны структура, суть и действия, которые вы закладывали? Чтобы не упустить важное, собрали для вас чек-лист.
Читайте только в Конверте
No-code конструктор от Unisender. Простая интеграция, подробная аналитика, готовые шаблоны сценариев. 14 дней — 0 ₽.
Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.
Проверяйте почту — письмо придет в течение 5 минут (обычно мгновенно)
