Важные нюансы и эталонные значения
От размера и веса email-письма зависит, как оно отобразится на компьютере и смартфоне, насколько быстро загрузится и увидит ли получатель весь контент.
В статье разберемся, что именно подразумевают под размером рассылки для почты: ширину шаблона, вес HTML-кода, размеры отдельных блоков или вложений. Расскажем, на что влияет каждый параметр и какие значения действительно важно соблюдать.
Иногда эти термины используют как синонимы, но это не совсем верно.
Вес письма — его объем в единицах измерения информации (как правило, килобайтах). На него влияет количество символов, причём учитывается как сам текст письма, и технические символы, которые видны только в режиме просмотра кода. К ним относятся, например, HTML-разметка, ссылки, в том числе и на изображения и другие служебные знаки.
Размер письма — это его параметры, измеряемые в пикселях, в первую очередь — длина и ширина. Как правило, их выбирает дизайнер и верстальщик рассылки при создании макета и переносе его в сервис рассылок. От размера зависит, как письмо будет отображаться на десктопе и при адаптации к мобильным устройствам.
И да, оба этих параметра связаны между собой: чем длиннее письмо, тем больше в нём знаков кода, тем, соответственно, больше вес — если речь не идёт о полотне текста с отсутствием форматирования.
Про вес письма у нас в «Конверте» есть отдельный подробный гайд — в нём мы разобрали, как измерить вес письма и оптимизировать его при необходимости. Поэтому в этой статье сосредоточимся именно на размерах письма и его отдельных элементов.
Ширина шаблона и размеры отдельных блоков определяют, как письмо отобразится на компьютере и смартфоне. От веса изображений зависит скорость загрузки, а от веса HTML-кода — покажет ли почтовый сервис письмо полностью.
Все почтовые сервисы защищают пользователей от опасных рассылок с помощью спам-фильтров. Большая ширина или высота письма не отправляют его в спам, однако слишком тяжелый HTML-код и крупные вложения могут повлиять на доставляемость.
Тяжелые изображения замедляют загрузку письма, а ошибки в размерах могут нарушить верстку. В результате получатель может закрыть рассылку или пожаловаться на нее.
Например, Gmail обрезает HTML-код письма весом более 102 КБ. В этом случае получатель видит только часть содержимого и кнопку «Показать полностью». Чтобы прочитать письмо до конца, ему приходится совершить дополнительное действие, на которое готовы не все пользователи. Письмо при этом считается доставленным, но пользователь может не увидеть письмо целиком. Из-за этого возникают следующие проблемы:
Снижение конверсии. Если предложение, условия акции или CTA-кнопка находятся ближе к концу письма, пользователь может их не увидеть и не выполнить целевое действие.
Увеличение количества жалоб на спам. Ссылку на отписку обычно размещают в футере. Если почтовый сервис покажет только часть письма, ссылка останется скрыта. Получатель может не найти способ отписаться и нажать «Спам». Жалобы ухудшают репутацию отправителя и доставляемость следующих рассылок.
Некорректное отображение показателя открытий. Если трекинг-пиксель расположен в нижней части письма и она оказалась скрыта, открытие может не зафиксироваться.
Важно помнить, что подписчики используют разные почтовые сервисы и читают рассылки на разных устройствах. Поэтому перед отправкой нужно проверять и десктопную, и мобильную версию, а также следить за размерами шаблона, весом HTML-кода, изображений и вложений.
Ключевые параметры шаблона — его длина и ширина. Ширина задается при верстке в пикселях, а длина зависит от содержания рассылки и меняется от письма к письму. Для веса HTML-кода и отдельных элементов тоже есть свои ориентиры. Собрали основные параметры элементов письма в таблице.
| Элемент письма | Рекомендуемый размер | Ограничение или рекомендация | Зачем учитывать |
| Шаблон | Обычно 550―660 пикселей по ширине | Рекомендация | Такая ширина подходит для большинства почтовых клиентов. На смартфоне письмо должно подстраиваться под экран |
| Высота письма | Обычно 1500―2500 пикселей, или 2―3 экрана | Рекомендация | Слишком длинное письмо могут не дочитать. Главный оффер и CTA лучше показать на первом экране |
| HTML-код | До 102 КБ | Ограничение Gmail | Gmail скрывает продолжение письма, если HTML-код весит больше 102 КБ |
| Тема | До 60 символов, главное — в первых 30―40 | Рекомендация | Часть длинной темы может не поместиться на экране смартфона |
| Прехедер | Главное — в первых 40―90 символах | Рекомендация | Видимая длина зависит от почтового сервиса, устройства и длины темы |
| Хедер и футер | Хедер — 50―70 пикселей, футер — до 200 пикселей по высоте | Рекомендация | Хедер не должен вытеснять оффер с первого экрана, а футер — занимать лишнее место |
| Баннер | При отображении — не шире шаблона, обычно до 600 пикселей; по высоте — 300―500 пикселей | Рекомендация | Более широкое изображение может выйти за пределы шаблона. Для четкости исходник можно сделать вдвое шире |
| Изображение | Не шире своего блока, до 1000 пикселей по высоте и до 100―200 КБ | Рекомендация | Тяжелые изображения дольше загружаются, особенно при медленном интернете |
| CTA-кнопка | Например, 175 × 35 или 46 × 46 пикселей | Рекомендация | По маленькой кнопке сложно попасть пальцем |
| Вложение | Лучше заменить ссылкой | Рекомендация | Вложения увеличивают общий вес сообщения и могут вызвать подозрение у почтовых сервисов |
Универсальный ориентир для ширины письма — 660 пикселей. Такой шаблон корректно отображается в большинстве почтовых сервисов. Часть экрана занимают меню, навигация и другие элементы интерфейса, поэтому письмо не открывается на всю ширину окна.
Если сделать шаблон шире, у пользователя может появиться горизонтальная прокрутка, а в некоторых версиях Outlook также может пропасть фон. Получателю придется двигать письмо вправо и влево, чтобы увидеть весь контент, поэтому рассылку будет сложнее читать.
Если вы хотите, чтобы сообщение корректно отображалось в разных почтовых программах, то делайте его ширину от 550 пикселей до 660 пикселей. Этот размер, как правило, поддерживают готовые шаблоны сервисов email-рассылок.
Адаптивный шаблон
Ширину около 600 пикселей поддерживают экраны большинства современных смартфонов и планшетов. Встречаются устройства и с меньшим разрешением — от 320 пикселей для вертикального просмотра. Поэтому всегда стоит использовать адаптивную вёрстку или адаптивные шаблоны, которые автоматически подстраиваются под почтовый сервис и устройство получателя.
Для высоты письма нет строгого ограничения. В среднем можно ориентироваться на 1500―2500 пикселей, или два-три экрана. Высота одного экрана обычно составляет около 700―1000 пикселей, но зависит от устройства и интерфейса почтового клиента. Например, в Gmail при стандартных настройках видимая область письма может составлять около 600 пикселей.
Главный оффер и первую CTA-кнопку лучше разместить в верхней части письма, сразу после хедера. Если второстепенная информация сильно увеличивает длину рассылки, ее можно перенести на сайт или лендинг.
У маркетинговых писем есть традиционная структура: они состоят из хедера, основной части и футера. Внутри могут находиться баннеры, изображения, карточки товаров, текст и CTA-кнопки. Еще до открытия письма пользователь видит тему и прехедер, поэтому их длину тоже стоит учитывать. Рассмотрим размеры основных элементов подробнее.
Тема письма отображается в списке входящих рядом с именем отправителя. Почтовые сервисы показывают разное количество символов, поэтому универсального ограничения нет. Важную информацию лучше поместить в первые 30―40 символов — тогда пользователь увидит ее и на смартфоне.
Прехедер — текст после темы, который дополняет ее и помогает понять содержание письма. Обычно достаточно 40―90 символов. Более длинный текст может скрыться за многоточием. Если не заполнить прехедер, почтовый сервис автоматически подставит начало письма, которое не всегда подходит для предпросмотра.
Шапка письма, или хедер, — это блок в самом начале письма. Обычно здесь размещают логотип, заголовок и ссылку на веб-версию. Интернет-магазины также могут добавить меню со ссылками на основные разделы сайта.
Высота хедера зависит от его наполнения. Если в нем есть только логотип и ссылка на сайт, можно ориентироваться на 50―70 пикселей. Хедер с меню и дополнительными ссылками может занимать 150―200 пикселей.
Хедер выше 300 пикселей займет значительную часть экрана смартфона, поэтому основной оффер окажется ниже. Ширина блока должна совпадать с шириной шаблона — обычно это 600 пикселей. В мобильной версии хедер должен подстраиваться под экран, а длинное меню лучше сократить.
Баннер в письме — это изображение или анимация, по клику на которые пользователь может перейти на сайт. Он может находиться в любой части письма и располагаться горизонтально или вертикально — это зависит от дизайна.
Размер баннера зависит от его места в шаблоне. Если он занимает всю ширину письма, то в шаблоне шириной 600 пикселей его ширина тоже должна составлять 600 пикселей. Если баннер находится в колонке, он не должен выходить за ее границы.
Высота баннера не ограничена, но он не должен вытеснять оффер и CTA за пределы первого экрана. Для горизонтального баннера можно ориентироваться на высоту 300―500 пикселей. В мобильной версии баннер должен уменьшаться по ширине экрана, а текст на нем — оставаться читаемым.
Кроме баннеров, в письме могут быть фотографии товаров, иллюстрации и иконки. Для каждого файла важно учитывать размеры в пикселях и вес, а картинка не должна выходить за границы своего блока. По высоте можно ориентироваться на значение до 1000 пикселей: более длинную вертикальную иллюстрацию придется долго прокручивать, а это может снизить дочитываемость.
Перед загрузкой изображение лучше уменьшить до нужного размера шаблона и сжать. Оптимальный вес одного изображения — до 100―200 КБ. Более тяжёлые изображения дольше загружаются, далеко не каждый пользователь готов ждать полной загрузки письма. При этом высокое разрешение никто не оценит, поскольку почтовые клиенты «съедают» качество.
Не размещайте важную информацию только на изображении. Некоторые пользователи отключают автоматическую загрузку картинок, поэтому оффер, условия акции и CTA должны быть в письме.
Постарайтесь не использовать много изображений в одном письме. Суммарный вес картинок не позволит контенту быстро загрузиться.
Картинки не загрузились: как спасти рассылку и не потерять подписчиков
Основная часть письма — это содержание, ради которого создавалась рассылка. Ширина внешнего блока соответствует ширине шаблона — до 600 пикселей. Сам текст обычно занимает меньше места из-за отступов по бокам.
Для комфортного чтения текста можно ориентироваться на 75 символов в строке на десктопе и 45 — на смартфоне. Более длинная строка не сломает верстку, но ее будет сложнее читать. В адаптивном письме длина строки автоматически уменьшается вместе с шириной экрана.
Высота основной части зависит от содержания, можно ориентироваться на два-три экрана, или примерно 1500―2000 пикселей. Второстепенные подробности можно перенести на сайт, а в письме оставить краткое описание и ссылку.
Для верстки письма лучше использовать распространенные шрифты и указывать запасные варианты. Если выбранного шрифта нет на устройстве пользователя, почтовый сервис заменит его стандартным, а из-за разницы в размере символов расположение элементов может измениться.
Ширина CTA-кнопки зависит от текста, а ее высота должна быть достаточной для нажатия на смартфоне. Например, прямоугольная кнопка может быть размером 175 × 35 пикселей, а квадратная — 46 × 46 пикселей.
Кнопка должна полностью помещаться на экране, а текст — оставаться в одну или две короткие строки. Основной CTA лучше разместить в верхней части письма, чтобы пользователь увидел его без долгой прокрутки. В длинной рассылке кнопку можно повторить после основного содержания.
Основное правило — кнопка должна быть полностью видна на экране вместе со всем текстом на ней. И учитывайте, что в мобильной версии кликать по маленькой кнопке не очень удобно.
Подробнее о том, как делать кнопки в рассылках не только красивыми, но и стабильными, читайте в нашем гайде.
Футер, или подвал, — это нижний блок письма. В нем размещают контакты, ссылки на соцсети, юридическую информацию и ссылку на отписку.
Ширина футера совпадает с шириной шаблона — до 600 пикселей. Строгого ограничения по высоте нет: простой футер обычно занимает до 200 пикселей, но может достигать 1000 пикселей, если в нем много дополнительной информации.
При этом футер не стоит перегружать. Ссылка на отписку должна быть заметной, а ссылки и иконки — достаточно крупными для нажатия на смартфоне. Также важно следить за весом HTML-кода: если Gmail скроет продолжение письма, вместе с ним может исчезнуть и футер.
Если письмо создано в конструкторе рассылок, найдите в редакторе настройки шаблона — там обычно указана ширина письма. Если его верстал специалист, проще уточнить размер у него. При самостоятельной верстке ширина задается в HTML-файле письма с помощью параметра width или max-width. Например, значение width="600" означает ширину 600 пикселей.
Чтобы проверить вес HTML, сохраните письмо в формате .html и посмотрите размер файла в его свойствах. Изображения и вложения обычно хранятся отдельно, поэтому их вес нужно проверять дополнительно.
Высоту письма по коду определить не получится: расположение блоков меняется в зависимости от устройства и почтового клиента. Поэтому перед отправкой нужно открыть предпросмотр и отправить тестовое письмо.
Проверьте рассылку по следующим пунктам:
В Unisender можно собрать письмо на основе адаптивного шаблона и проверить его отображение перед отправкой.
Разберем частые ошибки в размерах и верстке письма и покажем, как их исправить.
Шаблон шириной больше 1000 пикселей. Слишком широкое письмо может не поместиться в окне почтового сервиса. Тогда появится горизонтальная прокрутка или весь шаблон уменьшится вместе с текстом и кнопками.
| Плохо | Лучше |
| Использовать фиксированный шаблон шириной 1000 пикселей | Ограничить ширину 600 пикселей и настроить адаптацию под смартфоны |
Слишком длинное письмо. Большая высота сама по себе не считается ошибкой. Проблема возникает, если главный оффер и CTA находятся после нескольких экранов или письмо заполнено второстепенными подробностями.
| Плохо | Лучше |
| Начинать рассылку с длинного вступления | Показать предложение и первую кнопку в верхней части, а подробности перенести ниже или на сайт |
Тяжелые изображения. Картинка весом несколько мегабайт будет долго загружаться, особенно через мобильный интернет. Пользователь может увидеть пустой первый экран и закрыть письмо.
| Плохо | Лучше |
| Загружать тяжёлый исходник весом и уменьшать его средствами редактора | Заранее изменить размер и сжать изображение до 100―200 КБ |
Большой HTML-код. Gmail может скрыть продолжение письма, если HTML-код весит больше 102 КБ. Вместе с ним за кнопкой «Показать полностью» могут оказаться CTA, условия акции и ссылка на отписку.
| Плохо | Лучше |
| Оставлять в коде ненужные стили, комментарии и скрытые элементы | Очистить разметку и перенести второстепенный контент на сайт |
При покупке или продлении тарифа «Стандарт» в Unisender добавляем крутые бонусы:
Для шаблона можно ориентироваться на ширину 600 пикселей. Строгого ограничения по высоте нет, а HTML-код лучше снизить до 102 КБ.
Стандартная ширина на компьютере — 600 пикселей. В адаптивном шаблоне на смартфоне письмо уменьшается до доступной ширины экрана.
Для HTML-кода важно не превышать 102 КБ: после этого Gmail может скрыть продолжение письма. Изображения и вложения в этот вес не входят и проверяются отдельно.
Gmail скрывает продолжение письма, если его HTML-код весит больше 102 КБ. Пользователь видит кнопку «Показать полностью» и должен дополнительно нажать на нее, чтобы прочитать оставшийся контент.
Отображаемая ширина картинки не должна превышать ширину блока, в котором она находится. Для изображения на всю ширину письма это 600 пикселей, а рекомендуемый вес файла — до 100―200 КБ.
Для баннера на всю ширину шаблона подойдет размер до 600 пикселей. Строгого ограничения по высоте нет, но горизонтальному баннеру обычно достаточно 300―500 пикселей.
Ширина и высота письма сами по себе не приводят к попаданию в спам. На доставляемость могут повлиять слишком тяжелый HTML-код, крупные вложения и жалобы получателей, например если из-за скрытого футера они не нашли ссылку на отписку.
Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.
