Каждый день нам приходят десятки писем, которые пестрят изобилием красок и разнообразием предложений. У одних мы отмечаем привлекательный дизайн, у других - читаем интересную информацию, а некоторые даже не открываем.
Сейчас в избытке разных примеров, шаблонов, каждый из которых краше другого. Чем дальше развивается поиск идей, тем больше возникает трудностей, неожиданностей, осложнений, из которых нелегко найти выход и, наконец, просто создать письмо. Итак, с чего начать?
О стандартах
Универсальной шириной считается диапазон 550-600 пикселей, но сейчас мы можем наблюдать даже 900. Почему это так важно и откуда берутся стандарты?
Более 10-ти лет назад Microsoft Outlook был ключевым почтовым сервисом и стандартные экраны мониторов были с низким разрешением. Маркетологи должны были подстраиваться под эти ограничения. Отсюда и пошло правило 600 пикселей и его широкое применение по всему миру.
Но многое изменилось с тех времен:
- 97% экранов с разрешением 1024×768 пикселей и больше
- 1366×768 самое популярное разрешение на данный момент
- 53% емейлов открываются на мобильных устройствах - только 26% на iPhone
Из-за такой статистики мы можем наблюдать революцию в емейл-маркетинге - революцию в дизайне. Больше и больше писем выглядят как веб-сайты. Самые эффективные емейл-кампании в мире полны больших, ярких и “на всю ширину” изображений. Как маркетологи это делают?
600 пикселей - тот размер, который корректно отобразит письмо, ведь мало кто будет пользоваться горизонтальным скроллом, который появляется, если оно слишком широкое. Пользователи предпочитают привычные действия. Не забываем о смартфонах и планшетах, которые адаптируют письма по-своему. Данная ширина обезопасит вас от множества неприятностей и покажет ваше письмо в том виде, который вы создали.
Какая ширина подходит именно для ваших емейл-кампаний? Многие маркетологи затрагивали этот вопрос только для того, чтобы получить запутанные ответы, которые кажутся пережитками прошлого. Давайте разберем подробно и пройдемся по всем возможным вариантам.
Ширина
Для принятия решения важно учитывать разные почтовые сервисы, устройства, размер дисплеев, тип шаблона.
Почтовые сервисы не используют полноэкранный режим показа писем. Место занимают меню, реклама, навигация, которые создают свои ограничения. Поэтому, если вы хотите, чтобы емейл хорошо отображался в почтовой программе, вы можете сделать его 550-640 пикселей. Если же вам хочется пойти дальше и создать письмо шире - делайте, но помните, что многие почтовые программы могут не отобразить фон или добавить горизонтальный скролл для просмотра всего содержимого. Просто проверьте свое письмо перед отправкой через такие службы, как Litmus или Email on Acid, которые дадут вам точное представление, как оно будет выглядеть в разных почтовых клиентах.
Важно:
- В письме шириной более 640 пикселей, Gmail покажет подложку только, если растянуть браузер шире 1200 пикселей
- В Yahoo Mail вы можете просмотреть электронную почту в максимальной ширине 650 пикселей
- Outlook 2007 максимальное значение 600 пикселей
- Outlook 2013 — 550 пикселей
На мобильных устройствах установлены ограничения в 320 пикселей для вертикального и 480 пикселей для горизонтального просмотров.
Если ваше письмо адаптивно, то это значит, что ширина будет разной для каждого устройства. Поэтому нужно брать в расчет максимальные размеры каждого.
Чтобы выбрать эти размеры нужно выходить из таких данных:
- С помощью каких почтовиков открывают письма ваши подписчики?
- Ваш емейл адаптивен для каждой программы или же он слишком широкий и появляется горизонтальный скролл страницы?
Зачастую компании, которые проводят эксперименты с шириной электронного письма в 640, 700 или 960 пикселей, используют адаптивные шаблоны, поэтому ширина автоматически настраивается под почтовый сервис и устройство получателя.
Есть компании, которые делают уклон на мобильные с самого начала и создают дизайн под них.
Например, у Nike оформление письма одинаково для всех устройств:
А Victoria’s Secret создают универсальную структуру шириной 520 пикселей:
Мы не рекомендуем применять этот способ. То, что корректно отображается на смартфоне или планшете, в десктопной версии может показаться странным и непонятным. Например, у Victoria’s Secret часто письма рвутся из-за экспериментов с шириной. Используйте возможность адаптивности, чтобы быть подходящими для всех девайсов.
Высота
Высота не ограничена и зависит от длины содержимого, но давайте подумаем о получателях. Чем длиннее емейл, тем меньше вероятность, что его дочитают до конца, перейдут на сайт и что-то купят. Основную мысль пишите в самом начале.
Общая высота веб-страницы составляет 960 пикселей, чего обычно недостаточно, чтобы ввести информацию для электронного письма. Наиболее часто используемая длина варьируется от 1500 до 2500 пикселей. Обычно этого достаточно для контента и легко прокручивается пользователями.
Но Gmail обрежет слишком длинное и тяжелое содержимое письма. А в конце, как мы знаем, находится ссылка отписаться, которую пользователь может не увидеть и, вероятнее всего, отправит вас в спам.
Вес
Если ваше письмо много весит, нет никаких гарантий, что оно будет корректно отображаться в почтовых клиентах Gmail и Yahoo! Mail. Как Gmail, так и Yahoo Mail уменьшают размер электронного письма, если он увеличивает эти значения:
- Предел размера для Gmail составляет 102 kb
- Для Yahoo! Mail лимит составляет 100 kb
Все остальные почтовые клиенты не уменьшают отправленное сообщение. Часто ограничение 100 кб слишком мало и недостаточно для создания шаблона электронного письма. Размер часто зависит от используемого вами редактора. Как правило, есть дополнительный код, который будет автоматически добавляться при создании шаблона письма. Вы можете удалить этот код вручную и значительно уменьшить размер емейла или просто выбрать редактор писем, который этого сделает.
Предзаголовок
В предзаголовке указывается информация, которая отображается вслед за темой и может действительно убедить открыть письмо. Добавляйте важную информацию, которая мотивирует прочитать все содержимое.
В самом письме это поле более техническое, вы не должны делать его большим или размещать там какие-либо дополнительные элементы. Высота должна составлять 50-65 пикселей.
Если предзаголовка нет - в письмо может подставиться что угодно - от альтернативного текста под первой картинкой до какой-то технической информации.
Рассмотрим несколько удачных примеров шапки письма, где предзаголовок не привлекает лишнее внимание, но в тоже время достаточно информативный:
Заголовок
Самая распространенная высота блока, который не содержит меню или массивного логотипа, составляет 70 пикселей. Для тех, у кого есть панель меню, заголовок может быть высотой 150-200 пикселей. Высота заголовка, которая 300 и более пикселей, не подходит для обзора.
Существуют тысячи возможных вариантов дизайна, но выбирают тот, который соответствует фирменному стилю сайта компании, поддерживает мобильное расширение и одновременно удобен пользователю. Классические варианты - это логотип и категории сайта, но иногда меню переносят в футер письма для экономии драгоценного первого скрина.
Например, популярные варианты использования:
Баннер
Наиболее часто используемый размер изображения составляет 640x480 пикселей. Массу вариантов с таким размером вы можете найти в Pinterest, Google или любой другой поисковой системой. Лучше брать картинку в хорошем качестве и немного больше, чем в письме. Так при адаптации, качество не изменится и общий вид письма не испортится.
Многие дизайнеры экспериментируют с размерами баннеров, ведь длина может быть различной. Ширина ограничена только размером шаблона, который вы выбирали.
Пример успешного бренда:
Основная часть
В этом блоке указывается та информация, ради которой открывалось письмо. Максимальная длина текстового контента должна быть около 500-600 пикселей. Этого достаточно, чтобы выделить любую тему с 5-7 предложениями.
Длина текста. Общая рекомендация - 45-75 знаков в одной строке. Если ваш шрифт в мобильной версии такой же как и в десктопной, то вы можете вложиться примерно в 45 знаков в строке, и 75 знаков в случае использования максимальной ширины в шаблоне 600 пикселей.
Электронная почта не является местом, где можно прочитать статью с длинными рассказами или исследовать новую область знаний. Пишите текст, если уверены, что он будет полезным целевой аудитории, но придерживайтесь одной темы. Письмо с разными посылами имеет низкие шансы на высокие конверсии.
Вы можете использовать столько текста, сколько вам нужно, не влияя на общий вес электронного письма. Но помните: чем длиннее контент вы используете, тем меньше шансов, что он будет прочитан пользователями. Лучше опубликуйте интригующее краткое описание с возможностью дочитать на вашем сайте, ведь цель любого бизнеса - продать, не так ли?
Размещение товаров. Размещайте не больше трех товаров в одной строке, чтобы получателю было легче их рассмотреть.
Существует негласное правило показывать не более 6-9 рекомендуемых товаров в одном электронном письме. Не используйте слишком много наименований, не будьте агрессивными. Никому не нравятся навязчивые промо. Скажите меньше, чем больше. Лучше всего опубликовать популярные предложения и предоставить ссылку на веб-сайт.
Если вы используете изображение с большими размерами, нет никаких гарантий, что оно будет в хорошем качестве и иметь оптимальный вес. Например, если вы используете адаптивный шаблон независимо от того, какие изображения вы загружаете в письмо, их качество не будет изменено, поэтому общий размер будет достаточно большим, чтобы повлиять на скорость загрузки.
Контролируйте вес картинок. Чем больше вес картинки, тем дольше будет загружаться. Половина пользователей не будет ждать и вы упустите покупателей. Упростите процесс просмотра письма, уменьшив изображение в нашем редакторе. Детальнее о работе с блоком картинки читайте по ссылке.
Создавайте блоки контента длиной не более 900 пикселей. Этого достаточно, чтобы сделать 3 различных информационных блока. Каждый раз, добавляя новый, спросите себя, подходит ли эта информация и обязательна ли она.
Рассмотрим расположение товаров у других компаний:
Призыв к действию. Это не только удачные заголовки и картинки, но еще и кнопки. Они как бы подсказывают читателю следующий шаг. Главное требование для кнопки - выделяться, но и соответствовать дизайну письма. Никаких ограничений в размерах нет. Чем более ясный призыв к действию вы разместите, тем больше конверсий получите.
Футер
Часто компании делают футер с меню и полным адресом, поэтому они больше, чем стандартные варианты этого элемента.
Некоторые маркетологи, для соблюдения правила “40% картинок и 60% текста”, включают политику конфиденциальности или любую другую дополнительную информацию. Это распространенная практика у зарубежных компаний, но чтобы все пользователи это не читали, а только те, кто действительно заинтересован, эта информация спускается вниз.
Еще один вариант дизайна футера — разместить длинный адрес компании. Не рассчитывайте, что кто-то отправит вам настоящее письмо или посетит вашу компанию после получения электронного письма. Лучшее решение — дать ссылку на страницу «О нас», где эта информация будет раскрыта в полном объеме.
Мы советуем использовать лаконичные, которые содержат самую нужную информацию. Классический футер должен содержать контакты, возможность отмены подписки и значки социальных сетей. Стандартный размер - 600x200 пикселей. Этого более чем достаточно, чтобы собрать всю перечисленную информацию.
Заключение
Правило 600 пикселей все еще актуально, но это не жесткое требование и его можно применять в зависимости от ваших предпочтений. Нет ограничений, которые будут определять размеры элементов электронного письма. Главное, чтобы контент был полезен и интересен вашей аудитории.
Как вы можете видеть из рекомендаций и примеров в этом посте, современные маркетологи - двигатели революции в емейл-маркетинге, все еще продолжают расширять границы возможного в дизайне писем, так можете и вы.
В eSputnik мы гордимся тем, что наши клиенты могут возглавить это движение, используя адаптивный редактор писем. Стандартные шаблоны eSputnik рассчитаны на 600 пикселей в десктопной версии и 320 пикселей мобильной, которые можно создать в несколько кликов без знания html, а также контролировать мобильную верстку каждого письма индивидуально.
А ещё с этим читают:
