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

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

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

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

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

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

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

То есть 600 пикселей — скорее традиция, чем правило. И да, она гарантирует 100% правильное отображение. Неплохо, разве нет?

Взгляните на это замечательное HTML-письмо со стандартной шириной 600 пикселей. Да, пространства для нескольких колонок и нужного контента в нем действительно достаточно:

Мы слышали, что некоторые почтовые клиенты неправильно отображают письма с шириной более 650 пикселей.

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

А вот это письмо я только что получила:

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

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

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

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

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

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

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

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

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

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

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

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

• и установить необходимую ширину.

Попробуйте Stripo

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

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

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

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

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

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

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

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

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

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

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

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

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

Предварительный просмотр размеров письма

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

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

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

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

Попробуйте Stripo

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

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

(письмо от Adidas)

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

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

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

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

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

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

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

Попробуйте Stripo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот несколько примеров креативных и информативных баннеров:

Этот даже анимированный:

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

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

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

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

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

Так что читателям не придется нажимать именно на текст кнопки. Можно кликать куда угодно.

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

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

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

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

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

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

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

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

Попробуйте Stripo

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

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

И еще один популярный пример кнопки для баннера:

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

Поскольку типичная ширина письма составляет 600-640 пикселей (для всего шаблона), ширина изображения будет соответственно наследовать его размеры — когда речь идет о баннерах. Есть тысячи стоковых изображений, а также картинок на Pinterest с такой шириной. Stripo также предлагает более 10.000 бесплатных картинок, доступных в банке изображений. 

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

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

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

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

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

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

Как правило, блок контента состоит из текста, фрагмента изображения и кнопки.

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

Вот пример, где все сделано идеально:

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

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

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

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

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

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

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

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

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

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

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

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

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

• размера текста пунктов блока «Меню»;

• размера шрифта хедера;

• размера шрифта футера;

• размера шрифта элементов контента;

• размеров шрифта для заголовков 1-3;

• выравнивания заголовков;

• размера текста кнопки;

• и установить отображение ваших кнопок на мобильном экране — в полную ширину или нет.

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

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

Попробуйте Stripo

Размер всего письма

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

• лимит Gmail составляет 102 кб;

• ограничение Yahoo! Mail — 100 кб.

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

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

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

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

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

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

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