В этой статье мы расскажем о всех тонкостях создания баннеров для писем. Вы узнаете о типах баннеров для писем, их идеальных размерах и о том, как украсить email-дизайн с помощью баннеров в Stripo.
Баннеры — это отличный инструмент, который поможет сделать письма более систематизированными, привлечь внимание получателей к важным элементам сообщения и выделиться среди множества писем в почте читателей. Однако неправильный размер баннера может сломать структуру контента и свести на нет все ваши усилия.
В этой статье вы узнаете больше об идеальной ширине и высоте изображения баннера, а также о том, что нужно учитывать при его создании для email-маркетинговых кампаний. Мы также дадим несколько полезных советов, как создать привлекательный баннер в Stripo за несколько минут.
Что такое баннер в письме?
Это высококачественное изображение, расположенное в верхней части письма, чтобы подчеркнуть его основную цель и тон. На баннерных изображений могут быть название бренда, логотип компании, призыв к действию, предложение и фото продуктов. На баннер можно добавить краткие и понятные тексты, например «Скидка 15% на выбранные товары» или «Флеш-распродажа на выходных», чтобы максимально четко донести идею письма.
(Источник: шаблон Stripo)
Важность размера баннера в письме
Изображение баннера передает уникальное ценностное предложение (UVP, unique value proposition) и компоненты, связанные с брендом, такие как логотип, CTA, корпоративная цветовая гамма и графика. Эти функции отличают вас от сотен промописем, которые заваливают почту получателей, и мотивируют подписчиков открывать и читать именно ваши сообщения.
Неподходящий размер баннера в письме может испортить всю структуру контента. Слишком широкий баннер заставит почтовый клиент включить функцию горизонтального скроллинга, а слишком маленький баннер заставит получателей прищуривать глаза, чтобы разглядеть контент.
Идеальные размеры шаблона письма
Наиболее часто используемый размер баннера для письма составляет 600-700 пикселей по ширине для десктопов, что обеспечивает правильное отображение на всех устройствах. При этом высота баннера часто составляет 350-500 пикселей.
Придерживаясь размеров баннеров для писем, которые мы привели ниже, вы сможете создавать визуально привлекательный и адаптивный дизайн для экранов ПК и мобильных устройств, избегая ошибок при выборе размера баннера.
В рассылке можно использовать различные типы баннеров, чтобы достичь разных целей. Сейчас мы обсудим идеальный размер для адаптивных баннеров, хедеров и футеров в теле письма.
Размер баннера для хедера письма
Яркое и запоминающееся изображение в хедере мотивирует читателей продолжать скроллинг. В хедере можно разместить логотип компании, краткий текст с объяснением основной цели письма и CTA. Мы рекомендуем ограничить размер баннера в письме шириной 600-700 пикселей и высотой 90-200 пикселей для компьютеров.
На мобильных устройствах при создании баннеров для писем следует использовать современные email-редакторы, которые поддерживают адаптивные изображения. Адаптивный подход позволяет изображению автоматически изменять свой размер в зависимости от размера экрана, на котором оно отображается. Адаптивные изображения избавят вас от головной боли, так как вы не можете точно знать, на каком мобильном устройстве будет открыто письмо, поэтому главная цель — обеспечить одинаковый опыт просмотра писем, и адаптивные изображения — подходящий инструмент для этой задачи.
В других случаях можно следовать приведенному выше совету Романа.
Вот пример хедера письма размером 650 пикселей (ширина) и 200 пикселей (высота):
Размер баннера для тела письма
Запоминающийся баннер в тексте письма может передать основную идею сообщения, не перегружая читателей длинными абзацами текста. Здесь можно раскрыть больше деталей о вашем предложении и объяснить, какие проблемы клиент может решить, воспользовавшись им.
Для экранов ПК мы рекомендуем создавать баннер шириной 650-700 пикселей и высотой 350-500 пикселей. На мобильных устройствах ситуация аналогична. Учитывайте популярные размеры экранов, как мы упоминали ранее, или используйте современные редакторы писем с функциями, позволяющими создавать динамические изображения, которые автоматически подстраиваются под размер экрана.
(Источник: шаблон Stripo)
Размер баннера для футера письма
Размещенный внизу рассылки футер может содержать контактные данные вашей организации для любых запросов, ссылки на аккаунты в соцсетях и опцию «Отписаться». Эти данные помогут избежать попадания в папку «Спам» и гарантируют, что письмо дойдет до почты адресатов.
Ширина футера письма должна составлять 650-700 пикселей, а высота — до 150 пикселей для экранов ПК. Для мобильных устройств рекомендуем следовать нашим советам по использованию заранее заданных размеров изображений, которые соответствуют наиболее популярным размерам экранов, или создавать письма в редакторах, поддерживающих адаптивные изображения, чтобы упростить себе жизнь как email-маркетологу. Посмотрите наш пример футера письма (ширина 700 пикселей, высота 150 пикселей):
(Источник: шаблон Stripo)
Размер баннера для подписи письма
Подписи также часто размещаются внизу писем и могут быть созданы с помощью баннеров. Размеры баннера для подписи практически такие же, как и для обычного футера, поэтому для десктопной версии письма можно установить ширину от 650 до 700 пикселей и высоту до 150 пикселей.
(Источник: шаблон Stripo)
Что касается мобильных устройств, используйте заранее определенные размеры изображений или адаптивный подход к изображениям, если email-редактор поддерживает аналогичные функции, которые позволяют создавать части писем с динамическими изображениями.
Что нужно учитывать при создании баннера для письма
Теперь, когда вы знаете все об идеальных размерах для различных типов баннеров в письмах, давайте рассмотрим еще несколько важных моментов, которые следует учитывать в процессе дизайна, чтобы придать баннерам привлекательный вид:
Размер кнопки
Кнопки на баннерах в письмах должны быть достаточно заметными, поэтому очень важно, чтобы они не сливались с фоновым изображением и другими элементами сообщения.
(Источник: шаблон Stripo)
Текст на изображении баннера
Типичный баннер письма состоит из изображения и наложенного на него текста. Здесь очень важно правильно подобрать шрифты и сочетание цветов, чтобы текст был читаемым и ярким. Например, текст, набранный коричневым шрифтом на черном изображении, трудно разглядеть. То же самое касается светлых цветов: белый текст на светло-сером фоне — плохая идея.
Мы рекомендуем поэкспериментировать с шрифтами, цветами, размерами и расположением текста, чтобы он был заметным и читаемым. На изображениях ниже видно, что баннер с нечитаемым шрифтом и серым текстом на коричневом фоновом изображении выглядит неаккуратно, а первый вариант с более читаемым шрифтом и контрастным цветом гораздо легче заметить.
Размер изображения
Также очень важно обеспечить хорошую скорость загрузки. Чем меньше времени требуется для загрузки письма, тем лучше. Обязательно сжимайте изображения баннеров перед добавлением их в письма, чтобы не увеличивать размер файла баннера.
Работая на платформе Stripo, вы можете автоматически сжимать все добавляемые изображения. Просто включите функцию «Сжатие изображений» и выберите нужный процент сжатия в настройках рабочей среды.
Оптимизация устройств
Баннеры в письмах с праздничными изображениями требуют оптимизации для различных устройств, чтобы гарантировать доступность и эффективность шаблона на всех гаджетах. В праздничный сезон, когда люди находятся в спешкe, они в основном используют мобильные устройства или планшеты. И здесь очень важно убедиться, что шаблон оптимизирован вместе со всеми кнопками CTA и иллюстрациями.
Брендинг
Создав праздничный баннер для письма с брендированными изображениями, можно повысить узнаваемость бренда и привлечь новых клиентов, что очень важно для бизнеса. Убедитесь, что праздничный баннер выглядит гармонично с другими материалами бренда; добавьте брендированный шаблон и настройте дизайн баннера в соответствии с визуальной идентичностью бренда. Благодаря этому праздничные email-кампании будут легко узнаваемы. Логотип, типографика и цветовая гамма помогают потребителям и компаниям укреплять доверие и лояльность, что приводит к повышению вовлеченности, продаж и ROI.
Создание ссылок
Убедитесь, что изображение праздничного баннера содержит ссылку на нужный лендинг! Добавить ссылку к любому изображению очень просто. Например, ссылка на страницу продукта может быть отличным выбором, если вы продвигаете конкретный товар. Получатели кликают и взаимодействуют с контентом напрямую. Благодаря этому повышается CTR и конверсия прямо в этом же праздничном баннере.
Создание баннера в Stripo
В нашем редакторе можно начать создавать баннеры для писем за считанные минуты. Мы подобрали несколько советов, которые упростят этот процесс:
Подготовка баннера
Для начала нужно добавить баннер в шаблон письма. У нас есть специальный блок «Баннер», который нужно перетащить в шаблон.
После этого кликните на добавленный баннер, чтобы открыть это меню. Прежде чем настраивать размеры и другие параметры, нужно прикрепить изображение баннера для письма. Есть несколько вариантов: можно просто загрузить изображение со своего устройства или использовать стоковые картинки, а можно сгенерировать уникальную иллюстрацию с помощью нашей функции AI-изображение.
В нашем примере выбрана опция «Фотосток». Все, что нужно сделать, — это кликнуть на нужную картинку (если вы сразу не видите подходящих изображений для своих дизайнерских идей, введите поисковый запрос в соответствующее поле), и она автоматически прикрепится к баннеру.
После этого можно приступить к настройке параметров баннера письма.
Изменение ширины и высоты для десктопа
Чтобы установить правильный размер баннера для письма, перейдите на вкладку «Настройки». В разделе «Размер» можно установить необходимые параметры.
Для настройки правильного размера баннера используются несколько кнопок (слева направо):
- подгоняет изображение под размер контейнера;
- восстанавливает фактический размер изображения;
- режим настройки ширины;
- режим настройки высоты;
- кнопки настройки размера (работают отдельно для режимов настройки ширины и высоты).
Просто задайте нужные размеры с помощью этих кнопок, и все готово.
Также можно задать форму обрезки в соответствующем разделе, выбрав один из предустановленных вариантов ориентации (вертикальный или горизонтальный).
Изменение ширины и высоты для мобильных экранов
Чтобы баннер письма правильно отображался на экранах мобильных устройств, кликните на опцию «Мобильный просмотр», чтобы открыть настройки мобильной версии в Stripo.
По умолчанию у нас включена опция «Адаптивная картинка», поэтому в большинстве случаев ничего делать не нужно, так как эта опция гарантирует, что изображение баннера автоматически подстроится под размеры экрана.
Эту опцию можно отключить, но мы не рекомендуем этого делать, так как после отключения изображение баннера будет оставаться статичным независимо от разрешения экрана, на котором оно отображается. Это может привести к плохому отображению картинок и контента на баннере.
Изменение формы обрезки аналогично действиям в версии для десктопов.
Добавление изображений и ссылок
Для добавления кнопки на баннер у нас есть опция, которая позволяет разместить еще одно изображение поверх баннера. Можно комбинировать подходящее фоновое изображение с другим, что позволяет создавать уникальный дизайн для писем или акцентировать внимание на баннере.
Для этого кликните на опцию «Изображение» в настройках блока «Баннер».
Вы увидите то же меню для добавления изображения, что и ранее для всего баннера. Просто выберите нужный вариант для добавления изображения, чтобы продолжить.
После добавления картинка появится в центре баннера, а вы увидите небольшое меню с опциями для настройки прозрачности картинки, ее поворота, отражения в нужном направлении и применения визуальных фильтров.
Для изменения размера этого дополнительного изображения необходимо перетащить углы рамки, и изображение изменит свой размер. Также можно перетаскивать изображение в пределах границ баннера, кликнув по нему и перетащив, и даже вручную поворачивать его, касаясь точки над рамкой.
Ваше изображение с CTA привлекает внимание. Теперь нужно сделать баннер кликабельным. Для этого достаточно вставить ссылку в соответствующее поле, и после добавления ссылки весь баннер превратится в одну большую кнопку CTA, которая перенаправит получателя на нужную страницу.
Добавление текста и его настройка
Если вам нужно больше возможностей для оформления баннера, можно добавить на него текст. Кликните на опцию «Текст» над баннером.
Текстовый узел автоматически появится в центре баннера, и вы увидите вкладку с различными вариантами текста.
Чтобы ввести текст, просто дважды кликните на текстовом узле, выберите текст по умолчанию и введите новый.
Что касается настроек, то их здесь целый набор. Можно вручную изменить положение, размер и поворот, перетаскивая углы рамки узла «Текст» или перетаскивая весь узел, как вы делали с изображением.
Касательно самого текста можно:
- выбрать шрифт текста, его размер и цвет;
- выбрать выравнивание текста;
- настроить стили, такие как жирный, курсив, подчеркивание или зачеркивание;
- изменить регистр букв на верхний или нижний;
- настроить прозрачность, поворот и отразить текст нужным образом.
Вот как выглядит наш текстовый узел после применения большинства опций. Легко адаптируйте текст под свои потребности в email-дизайне.
В завершение
Правильный размер баннера в письме позволит сохранить структуру сообщения и привлечь внимание подписчиков к его основным элементам. Теперь, когда вы знаете, какие ширина и высота баннера в письме являются идеальными, и понимаете, как создать его с помощью Stripo, у вас есть все необходимое, чтобы сделать предстоящую кампанию успешной!