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