element-s-width-and-height
17 марта 2023

Размер шаблона письма: ширина и высота элементов

Создавайте уникальные письма в минимальные сроки
Оглавление
  1. Какая ширина оптимальна для шаблона рассылки?
  2. Какая высота оптимальна для шаблона рассылки?
  3. Размеры письма в режиме предпросмотра
  4. Размер прехедера
  5. Размер хедера
  6. Размер баннера
  7. Размер кнопки
  8. Размер изображения
  9. Размер блока контента
  10. Количество блоков контента
  11. Размер футера
  12. Размер шрифта в письмах
  13. Адаптивность
  14. Общий размер («вес») письма
  15. Подведем итоги
1.
Какая ширина оптимальна для шаблона рассылки?

Существуют ли идеальные размеры для шаблонов рассылок? Как выбрать ширину и высоту писем, чтобы они отлично отображались на любом устройстве и были удобны для чтения подписчикам?

Эта тема весьма сложная и не может быть раскрыта в нескольких абзацах.

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

Какая ширина оптимальна для шаблона рассылки?

В блоге Litmus есть статья, в которой говорится о том, что стандартный размер 600 пикселей — это миф. Мы полностью согласны с этим, потому что сегодня существует множество альтернатив 600-пиксельному формату, но тем не менее он остается самым оптимальным. Так почему же появилась эта ширина? И почему именно 600 пикселей?

Были времена, когда разрешение экрана было далеким от идеала. А многие девайсы — намного слабее, чем сейчас. Именно в эту «доисторическую» эпоху и появилась ширина 600 пикселей. С тех пор многое изменилось, поэтому 600 пикселей — скорее дань традиции, чем практически обоснованное правило.

Посмотрите на это замечательное HTML-письмо со стандартной шириной 600 пикселей:

Ширина письма 640 пикселей_M&M's

(Источник: письмо от M&M’s. Ширина 600 пикселей. Gmail, macOS)

Некоторые почтовые клиенты не отображают полностью письма шириной более 650 пикселей. Согласно исследованию, проведенному компанией Email on Acid, несмотря на то что разрешение экранов стало больше, такие почтовые клиенты, как Yahoo Mail и Outlook, по-прежнему испытывают проблемы с отображением широких писем. Это связано с тем, что большинство пользователей этих почтовиков используют трехколоночную структуру, и для просмотра писем остается менее 50% экрана.

Тесты, проведенные Email on Acid, показали, что максимальная ширина письма, которое может поместиться на экране в Outlook и Yahoo, составляет примерно 650 пикселей. Поэтому, если значительная часть ваших подписчиков использует указанные почтовые клиенты, мы рекомендуем не превышать 650 px или просто использовать распространенную ширину в 600 px.

Я сделала письмо с шириной 860 пикселей. Все правильно работало во всех основных почтовиках, хотя в Microsoft Outlook не отображался фон.

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

Ширина письма _740 пикселей

(Источник: письмо от MailNinja. Ширина 740 пикселей. Gmail, macOS)

Также есть мнение, что Gmail не отображает фоновое изображение и цвет, если ширина вашего шаблона превышает 640 пикселей. Тем не менее многочисленные эксперименты в нашем инструменте тестирования, а также целый ряд писем, которые я открыла в своем аккаунте Gmail, доказали обратное — письма отображаются отлично, включая фон.

Ширина письма_800 пикселей и фон

(Источник: письмо от Forbes Daily Dozen. Ширина 800 пикселей. Gmail, macOS)

Еще один миф — для Yahoo! Mail максимальная ширина письма не должна превышать 650 пикселей. Однако моё письмо шириной 860 пикселей вполне себе отображалось в полноразмерном виде.

Если вы решили предпочесть не 600 пикселей, а какую-то другую ширину, просто проверьте письмо перед отправкой с помощью нашего встроенного инструмента тестирования — он даст вам точную картину того, как письмо будет отображаться разными почтовиками и девайсами.

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

Ширина письма 640 пикселей от Banana Republic

(Источник: письмо от Banana Republic. Ширина 640 пикселей. Gmail, macOS)

Как настроить ширину шаблона в Stripo?

По умолчанию уже установлено 600 пикселей.

Но если вы хотите настроить свою ширину, вам нужно:

  • кликнуть вкладку «Оформление» в редакторе;
  • затем перейти в «Общие настройки»;
  • и выставить необходимую ширину.

Настройка ширины письма с помощью Stripo

Настройте собственную ширину, которая будет идеально соответствовать вашему дизайну
Присоединиться к Stripo

Какая высота оптимальна для шаблона рассылки?

Разумеется, высота у письма неограниченная. Вы можете использовать столько строк, сколько нужно, чтобы показать весь ваш контент. Но помните — чем длиннее письмо, тем меньше вероятность, что его прочитают до конца.

Общая высота веб-страницы составляет 960 пикселей, и этого обычно мало для показа всей информации, которой вы хотите поделиться в письме. Поэтому скролла избежать вряд ли удастся. Наиболее типичная длина письма — от 1500 до 2000 пикселей. Этого обычно достаточно для контента — а получателям будет легко скроллить.

Интересный факт: письма в сфере туризма — самые длинные по сравнению с рассылками любой другой индустрии. В eCommerce письма тоже достаточно длинные, хотя карточки товаров обычно очень компактные и не требуют много места: просто маркетологи любят добавлять как можно больше товаров в одно письмо.

Вот пример письма высотой 2550 пикселей:

Ширина письма_высота 2500 пикселей

(Источник: письмо от Violet Grey, высота 2500 пикселей)

Важно отметить:

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

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

Как скрыть элементы письма для мобильных?

  • кликните нужный элемент в шаблоне письма, чтобы активировать настройки;

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

  • нажмите иконку мобильного телефона;

Размер письма_Скрытие элементов на мобильных устройствах

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

Размеры письма в режиме предпросмотра

Некоторые почтовые клиенты, например Thunderbird, имеют следующие размеры окна предварительного просмотра: 600 пикселей в ширину и 300-500 в высоту. Они не показывают уменьшенную копию всего письма, но захватывают только верхнюю часть.

Убедитесь, что в этих 300-500 пикселях (половина первого скролла) содержится ценная информация, мотивирующая получателей открыть и прочитать ваше письмо. Первое впечатление работает лучше, чем тысяча лайков.

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

Вот как выглядит панель предпросмотра в почтовике mail.com:

Панель предварительного просмотра 1024x585

(Источник: письмо от Bored Panda, mail.com)

Размер прехедера

Прехедер — это элемент строки/письма, который находится вверху шаблона, также его можно увидеть в области предпросмотра во входящих. Здесь мы поговорим о первом. Он состоит из короткого вступительного сообщения, которое появляется вместе с возможностью открыть письмо в браузере (или увидеть веб-версию в случае каких-либо проблем с отображением). Некоторые бренды добавляют в прехедер очень важную информацию — например, о бесплатной доставке.

Размер предварительного заголовка письма

(Источник: письмо от Adidas)

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

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

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

Как получить ссылку на веб-версию при помощи Stripo?

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

Ширина письма_Ссылка для предварительного просмотра

  • в новом окне нажмите кнопку «Скопировать»;

Ширина письма_Получение ссылки на веб-версию

  • готово — ссылка сохранена в ваш буфер обмена.

Вам также может понравиться

Предварительный просмотр и отправка тестовых писем в StripoStripo Sending Test Emails Featured Image

Важно отметить:

Здесь мы говорили о прехедере как об элементе письма. Кроме него, есть также текст прехедера, который вы, к слову, можете добавить при помощи Stripo. Текст прехедера отображается во входящих только в режиме предварительного просмотра.

Размер письма

Тогда как прехедер-элемент отображается и в самом письме.

Размер хедера

Наиболее распространенная высота хедера, в котором нет меню или массивного логотипа, составляет 70 пикселей. Если же хедер содержит панель меню, его высота может достигать 150-200 пикселей. Хедер выше 300 пикселей неудобен для чтения.

Существуют сотни и тысячи стилей, которые используются в дизайне хедеров. Но вам нужно выбрать такой, который будет удобным для пользователей и при этом адаптивным для мобильных устройств. Кроме того, следует выбрать стиль и цветовую схему, которые подчеркнут идентичность вашего бренда.

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

Большой заголовок

(Источник: письмо от Bentalls)

Заголовок_Geekbrains

(Источник: письмо от GeekBrains)

Заголовок_Semrush

(Источник: письмо от SEMrush)

Важно отметить:

Обычно меню письма содержит 3-5 пунктов. Если вы добавляете больше, не забудьте скрыть излишние пункты для мобильной версии.

Рекомендации по ширине письма в формате HTML_Скрытие элементов меню

Подробности о создании хедера при помощи Stripo вы найдете в специальной статье нашего блога.

Присоединиться к Stripo

Размер баннера

Баннер — это именно то место, где вы можете реализовать свой креатив, и здесь не стоит заморачиваться по поводу размеров. Чем меньше лишнего контента, тем лучше результат. Чем чётче призыв к действию, тем выше показатели конверсии.

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

(Источник: письмо от BHLDN)

Здесь вы можете поэкспериментировать с размером шрифта. Самый популярный вариант — баннер с изображением в качестве фона, находящийся сразу после хедера.

Оптимальные размеры баннера

Самые типичные размеры баннера — 600x300 и 400x400 пикселей. Многие дизайнеры экспериментируют с размерами, хотя ширина ограничена размером шаблона — но длина при этом может быть очень разной.

Важно отметить:

Stripo позволяет выбрать форму баннера. Эта опция называется форм-фактор. Баннер может быть вертикальным, когда высота больше ширины, квадратным или горизонтальным, когда ширина больше высоты.

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

Ширина письма_Ориентация баннера

Самый распространенный форм-фактор баннера — горизонтальный.

Подробности о создании баннеров при помощи Stripo вы найдете в статье «Виды баннеров: как создать баннер в Stripo Email Builder за считанные минуты» нашего блога.

Размер кнопки

Для кнопок не существует какой-то стандартной ширины. Базовое правило заключается в том, что кнопка должна контрастировать с остальными элементами письма и при этом органично вписываться в дизайн.

Чтобы сделать кнопку заметной и кликабельной, нужно поработать над ее дизайном и размером.

Если текст призыва к действию слишком короткий, то сделать кнопку шире помогут отступы. В Stripo эта опция называется «Внутренние отступы».

Ширина письма для кнопок_Настройка пробелов для кнопок

Не беспокойтесь, благодаря нашей уникальной верстке кнопок эти отступы тоже будут кликабельными :).
Так что читателям не придется нажимать именно на текст кнопки. Можно кликать куда угодно.

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

Иногда бывает трудно даже найти кнопку или прочитать её CTA-текст, потому что она имеет слишком мелкий размер, а шрифт едва различим.

Как сделать шрифт кнопки крупнее, а саму кнопку — полноразмерной на мобильных?

Чтобы настроить крупный шрифт кнопок при отображении на мобильных, вам нужно:

  • перейти во вкладку «Оформление»;

  • зайти в «Адаптивность»;

  • выбрать нужный размер текста кнопки;

  • и включить «Кнопки на всю ширину экрана».

Стандартная ширина письма для кнопок

Настройте кастомную ширину ваших кнопок для мобильной версии
Присоединиться к Stripo

16 пикселей — самый распространенный размер для текста кнопки.

Вот пример, когда контраст решает всё:

Баннер с призывом к действию

(Источник: письмо от Jobvite)

И еще одно популярное решение — кнопка на баннере:

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

(Источник: письмо от Forbes)

О том, как разместить кнопку поверх баннера, читайте в статье «Виды баннеров» нашего блога.

Размер изображения

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

Что касается карточек товаров, здесь вообще нет никаких стандартов размера.

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

Ширина письма_Ширина редактирования изображений

Присоединиться к Stripo

В Stripo вы можете обрезать и редактировать изображения при помощи нашего встроенного фоторедактора Pixie. Чтобы войти в режим редактирования, нажмите кнопку «Редактировать» рядом с изображением на панели настроек.

Ширина письма_Редактирование изображений

Важно отметить:

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

Tinypng

(Источник: сайт TinyPNG, домашняя страница)

Размер блока контента

Как правило, блок контента (также известный как карточка товара) состоит из текста, изображения товара и кнопки.

Мы уже говорили о размерах изображений и кнопок. Что касается текста, ограничений здесь нет, так как он всегда наследует ширину строк или контейнеров/блоков. Вы можете добавить текст поверх изображения, ниже или выше — все на ваше усмотрение.

Ступенчатый порядок блоков контента

(Источник: письмо от White Room)

Количество блоков контента

Скажем так: «Лучше меньше, но качественней». Используйте изображения, но не перегружайте письмо фото, не содержащими полезной информации и не имеющими отношения к теме.

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

Ширина письма_Блоки контента в письмах

(Источник: письмо от Madewell)

Лучше делать блоки контента не длиннее 900 пикселей. Этого достаточно, чтобы сделать три разных информационных блока. 

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

Размер футера

Некоторые компании добавляют в футеры меню — и эти элементы становятся крупнее, чем обычно.

Я предпочитаю лаконичные футеры, где есть только та информация, которая стопроцентно должна там быть. Классический футер должен содержать контактную информацию, включая ваш физический адрес, ссылки для отписки, иконки соцсетей и причину обращения к получателям. Вот и все, поэтому стандартных 600x200 пикселей более чем достаточно для всей этой информации.

Нестандартный нижний колонтитул письма с иконками

(Источник: письмо от All Good)

Подробности о дизайне футера вы найдете в специальной статье нашего блога. 

Размер шрифта в письмах

Размер шрифта в письмах — еще один важный момент, который необходимо учитывать при создании шаблона. Необходимо выбрать такой размер и тип шрифта, который будет удобен для подписчиков — не слишком мелкий, но и не очень крупный.

Здесь тоже нет строгих стандартов, а скорее рекомендации и лучшие практики:

  • размер шрифта для заголовков и подзаголовков — 22-24 пт;
  • размер шрифта для основного текста — 12-16 пт;
  • для более мелких элементов, таких как хедер и футер, можно использовать 10 пт.

Если выбрать для основного текста шрифт больше 16 пт, он будет выглядеть громоздким и может искажаться в некоторых медиа. Слишком мелкий шрифт, особенно в сочетании со слишком длинным полотном текста, заставит подписчиков скроллить страницу вниз, даже не прочитав ее. Кстати, рекомендуемый объем текста — около 20 строк.

Используйте высоту строки в 1,4-1,5 раза больше, чтобы обеспечить читабельность текста.

Адаптивность

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

Чтобы войти в режим настроек, перейдите во вкладку «Оформление», а затем в раздел «Адаптивность».

Здесь вы можете установить специальные параметры для:

  • размера текста пунктов блока «Меню»;
  • размера шрифта хедера;
  • размера шрифта футера;
  • размера шрифта элементов контента;
  • размеров шрифта для заголовков 1-3;
  • выравнивания заголовков;
  • размера текста кнопки;
  • и выбрать отображение кнопок — в полную ширину мобильного экрана или нет.

Подробности о настройке специальных размеров для десктопной и мобильной весии читайте в статье «Новая эра адаптивного дизайна» нашего блога.

Ширина письма_Десктопная версия

(Десктопная версия)

Ширина письма_Мобильная версия

(Мобильная версия, кнопки во всю ширину экрана)

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

Общий размер («вес») письма

Если ваше письмо имеет большой вес, у вас нет никаких гарантий, что оно будет отображаться в полном размере, особенно в таких почтовых клиентах, как Gmail и Yahoo! Mail. И Gmail, и Yahoo Mail взвесят HTML-код вашего письма — и обрежут его, если вес превысит такие значения:

  • лимит Gmail составляет 102 кб;
  • ограничение Yahoo! Mail — 100 кб.

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

Как взвесить письмо

Вы можете взвесить письмо при помощи инструмента mail-tester. Это абсолютно бесплатно.

Также в Stripo можно скачать шаблон в формате HTML-файла и посмотреть его свойства или информацию (соответственно для Windows/macOS).

Загрузка писем в виде HTML-файлов

Если размер файла превышает упомянутые 100 КБ, вы можете оптимизировать его перед экспортом шаблона в ваш ESP:

Минимизация HTML-кода ваших писем

Взвешивайте письма перед отправкой получателям
Присоединиться к Stripo

Подведем итоги

Мы проанализировали ширину и высоту шаблона в целом, а также каждого элемента по отдельности. Ширина 600-640 пикселей наиболее популярна среди брендов.

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

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

Установите кастомную ширину и высоту для всех элементов и создавайте уникальные письма в минимальные сроки
Была ли статья полезна?
Tell us your thoughts
Спасибо за ваш отзыв!
14 комментариев
Data Knowledge 1 год назад
Hola! es muy útil y de gran ayuda aclarando muchas dudas esta información; Pero me gustaría que profundizaran en relación al tema del texto de vista previa de la comunicación que se hace, este ¿se puede editar y hacerlo personalizado? o simplemente es el texto que va como pre-encabezado... ¡Gracias!
Анна Кузнецова 1 год назад
Hola, Gracias por su pregunta. Lo siento por esta respuesta tardía. En cuanto a la personalización en el preencabezado del correo electrónico... Si hablamos de direcciones por nombres, entonces sí, puedes hacerlo con Stripo o con tu ESP. Si estamos hablando de una personalización más profunda, como algunos datos personales sobre los usuarios (el número de su pedido o la oferta basada en el historial de compras de los usuarios), le sugerimos que pregunte a su ESP si tienen soporte para ello. Deseándole feliz y eficaz correo electrónico. Gracias.
Fernando Be 3 года назад
¡Muchas gracias, información solvente y utilísima!
Анна Кузнецова 3 года назад
Fernando Be, Muchas gracias por sus comentarios de apoyo.
Duke Duke 3 года назад
Hola! una consulta, que código tengo que agregarle al código para ocultar bloques en un dispositivo móvil?
Анна Кузнецова 3 года назад
Hola, Duke Duke. Gracias por su pregunta Si desea ocultar algunos elementos para dispositivos móviles, simplemente haga clic en el icono Ocultar para dispositivos móviles en la barra de herramientas. https://prnt.sc/rqad55 En caso de preguntas adicionales, envíenos un correo electrónico support@stripo.email Estaremos encantados de ayudar ?
Duke Duke 3 года назад
Hola! escribí al mail de soporte y me dijeron que no me pueden responder, solo en inglés o ruso. lo que quisiera saber es como agregar esa opción directo desde el código, o si tienen un ejemplo de como quedaría en el código esa funcionalidad
Анна Кузнецова 3 года назад
Hola ... En el código, cambia así: Debe seleccionar el bloque / contenedor que desea ocultar en el móvil. Después de eso, abra el editor de código. Luego inserte tr class = esd-mobile-hidden especialmente para la unidad deseada. (Ver captura de pantalla https://prnt.sc/rrbe6p) La siguiente clase debe estar cerrada: https://prnt.sc/rrc9zd Por lo tanto, puede ocultar varios elementos de la carta utilizando nuestro editor de código. Desafortunadamente, no podemos decir si este código es universal o adecuado para otros editores de cartas.
Manuel Garcia 4 года назад
Muy util, toda la información. muchísimas gracias.
Анна Кузнецова 4 года назад
Manuel, Muchas gracias. Estamos muy contentos. Me alegra estar de servicio ?
Lorena Barahona G. 4 года назад
Hola, fantástico, ha sido muy útil como información. Gracias
Анна Кузнецова 4 года назад
Lorena, Muchas gracias Estamos muy contentos Si tiene preguntas, por favor hágalas. Estaremos encantados de responder a todas sus preguntas.
Philippe Saudemont 4 года назад
Bonjour. Je pense qu'il y a une erreur sur la troisième ligne, ce n'est pas pour largeur ordinateur 60 mais 600 pixels. Cordialement.
Анна Кузнецова 4 года назад
Bon après midi Oui, c'est une faute de frappe. 600 pixels pour l'ordinateur. Merci beaucoup d'avoir remarqué et d'avoir dit. Passez une bonne journée
Тип
Индустрия
Сезоны
Интеграции
Редактор Stripo
Упростите процесс создания писем.
Плагин Stripo
Интегрируйте Drag-n-Drop редактор Stripo в свое веб-приложение.
Заказать шаблон
Наша команда может разработать и сверстать его для вас. Просто заполните бриф, и мы свяжемся с вами в ближайшее время.