Как сделать дизайн email рассылки
Рекомендации по дизайну email писем
Каждый человек, открывая сообщение, в первую очередь обращает внимание на визуал, а после уже на текст. Структура и наполнение email: графика, иллюстрации, цвета, шрифты — это все играет важную роль в прочтении письма до конца и влияет на выполнение пользователем нужного действия.
Шаблон
Оформление email-рассылки должно привлекать внимание, быть узнаваемым и повышать читаемость писем. Конечно, сообщение должно быть уникальным, но делать с нуля дизайн каждого письма очень накладно. Мы предлагаем решить этот вопрос с помощью готовых шаблонов, которых у нас более 300.
При выборе шаблона учитывайте наличие элементов, которые могут вам понадобиться (видео, карточка товара, текст и т. д.), — это сделает процесс наполнения письма еще проще. Недостающие блоки можно найти в библиотеке модулей и отредактировать под свой дизайн.
Добавив все блоки, которые могут понадобиться в ваших рассылках, вы получите мастер-шаблон — основу большинства будущих сообщений. Его нужно будет просто заполнять контентом, что займет минимум времени при подготовке рассылки.
Если вы решите сделать макет самостоятельно, не забывайте, что каждый элемент письма имеет свои правила верстки. Так, для отступов (между блоками, справа/слева/сверху/снизу) мы рекомендуем использовать одинаковые значения, например по 20, а для выделения элемента — 10 и 20 или 15 и 30 (второе значение кратно 2). В противном случае, если взять хаотичные значения (10,15, 25), письмо будет выглядеть неаккуратно.
Редактор eSputnik работает по принципу drag-and-drop — это позволяет добавлять любые блоки простым перетаскиванием в шаблон. Создавайте разные макеты в зависимости от типа рассылки, времени года, праздника и т. д. Но помните, что в каждом должен оставаться фирменный стиль. Придумайте свою изюминку в дизайне email-письма, которая будет выделять вас среди конкурентов и будет узнаваемой для подписчиков.
Адаптивный дизайн
Всегда думайте о том, как ваше письмо будет выглядеть в мобильной версии. Плохая адаптивность писем портит не только дизайн электронного письма, но и может сделать его бесполезным. Например, кнопки с призывом к действию 16×16 слишком мелкие для того, чтобы попасть на картинку пальцем с телефона.
Напомним оптимальные размеры шаблона для рассылки: десктоп — 600px, мобильная версия — 320px. Чтобы просмотреть письмо с большей шириной, подписчику нужно будет делать горизонтальный скролл, который просто непривычен для email.
С eSputnik вы можете не переживать о корректности отображения ваших рассылок. Наш адаптивный редактор позволяет выбрать любую из структур, настроить адаптивность каждого элемента — и письма будут правильно отображаться на всех устройствах.
Header
Хедер — шапка письма, находится над основной картинкой, в нем чаще всего размещают логотип и меню со ссылками на разделы сайта или контакты. Шапка помогает быстро идентифицировать бренд: получатель видит имя отправителя в поле «От кого», а когда открывает письмо, сразу обращает внимание на логотип. Не перегружайте этот блок данными, чтобы на первом экране поместилась основная мысль сообщения, давайте только важную информацию и используйте качественные изображения.
Footer
Подвал письма — элемент письма, до которого не все дочитывают, но тоже важный. Здесь обычно размещают общую информацию (подпись, юридический адрес, соцсети и др. контакты) и ссылку для отписки. Учитывайте, что почтовики могут обрезать футер, если письмо будет слишком длинным.
Тем более не стоит самому прятать возможность отписки, так как получатели будут перемещать письмо в спам, а это негативно скажется на репутации отправителя. Добавляйте в футер действительно важную для подписчика информацию, а ссылки группируйте и делайте удобными для чтения. Например, в нашем редакторе есть готовый блок с кнопками соцсетей, который можно отредактировать так, как вам нужно.
Варианты блока соцсетей
Текст
Важные мысли оформляйте в виде подзаголовков, выделяйте другим шрифтом или кегелем, но в меру. Особенно осторожными будьте с цветом. Иначе потеряется важность мысли, у читателя будет рябить в глазах, а почтовикам сие великолепие может показаться подозрительным. Не обводите и не выделяйте слова курсивом, подчеркиванием. Получатель может принять подчеркивание за ссылку и безуспешно пытаться по ней перейти.
Максимальная ширина текстового блока — 600px — этого достаточно для нормального восприятия абзаца в 3-4 строчки, где можно вместить 6-8 предложений. В одной строке обычно помещается до 80 символов. Текст с четкой структурой просто и приятно читать.
Цвет текста
Цвет текста в теле письма должен лаконично контрастировать с фоном, на котором он находится — это залог того, что пользователь без проблем прочтет сообщение. Чередуйте текстовые блоки с изображениями в соотношении как минимум 50/50 — это влияет на доставляемость сообщений.
Шрифт
Шрифты можно разделить на:
Для оформления текста email-письма, конечно, надежнее использовать безопасные шрифты. Если вам нужен шрифт типа антиква, с засечками и нестандартными символами или дизайнерский/собственный, обязательно прописывайте запасной в коде письма и тестируйте рассылку, чтобы убедиться в правильности отображения. Напомним, что с eSputnik вы можете добавлять кастомные шрифты в рассылку.
Стандарты оформления шрифтов для емейл-письма:
Совет: реагируйте на изменения в обществе. Например, в октябре этого года многие крупные компании («Яндекс», «Лента», «Почта России», «РБК» и др.) изменили написание своих логотипов в стиле доброшрифта — специального шрифта, приуроченного к Международному дню ДЦП. Это пример изменения оформления всего одного элемента, но действительно важного для привлечения внимания аудитории к острым проблемам.
Тема письма
Особое внимание уделите теме: она не должна быть скучной или провокационной. Этот текст должен показать подписчику пользу от прочтения емейла, дать понимание, о чем само сообщение, и мотивировать прочесть его именно сейчас. Без хорошей информативной темы письмо могут вовсе не открыть. А если речь идет о людях с ограниченными возможностями или тех, кто пользуется голосовыми помощниками, то не откроют наверняка. Получите больше инсайтов о доступности рассылок из нашего гайда.
Рекомендуемое количество символов в теме для десктопной версии — 70-150, для мобильных — 35-40. Чаще всего пользователи открывают сообщения, тема которых состоит из 6 слов. Эти цифры не нужно держать в голове: теперь наш редактор показывает рекомендации при создании письма.
Preheader
Прехедер дополняет тему и тоже влияет на Open Rate: 24% получателей на его основе принимают решение, открыть рассылку или нет. Пишите понятный и короткий прехедер. Например, Gmail покажет предложение в 100-120 символов, включая пробелы. Если вы не хотите, чтобы получателю пришлось читать дважды одно и то же, используйте для написания прехедера маленький кегль и основной цвет фона (его будет не видно). Чтобы у вас не возникло проблем с оформлением прехедера, в редакторе eSputnik уже все учтено, просто заполняйте поле «Скрытый предзаголовок».
Цифры, эмодзи, знаки
Используйте цифры, эмодзи и знаки (восклицания, вопроса и т. д.) как в теме письма, так и в общем тексте емейл-рассылки. Только в разумных пределах, т. к. нагромождение этих элементов может оттолкнуть получателя, если он, конечно, увидит их во входящих. Зачастую такие сообщения автоматически попадают в спам.
Изображения
Письмо не должно быть в виде одной картинки: оно может просто не отобразиться. Помимо этого, сообщения-картинки часто не пропускаются фильтрами почтовиков.
Баннер
Он задает тон письма, поскольку обычно размещен в начале сообщения. Иногда делают несколько баннеров для разных текстовых блоков. Каждый из них должен быть ярким, привлекательным, соответствовать стилю компании. В основную картинку можно включить логотип, если его нет в шапке. Также рекомендуем добавлять на большой баннер СТА. Оптимальные размеры баннера: высота — 300px, ширина — 600px.
Alt-текст
Любое сообщение должно хорошо выглядеть и без картинок, потому что у некоторых пользователей изображения не загружаются автоматически. В таком случае, чтобы получатель смог понять смысл, нужно прописать Alt-текст к каждой картинке.
Изображения для карточек товара
Всегда лучше увидеть товар, чем читать рассказ с его описанием. Поэтому товар нужно показать во всех ракурсах, а еще лучше — в действии. Для этого подойдут качественные фото деталей, анимации. Если у товара есть несколько вариаций цветов, моделей и т. д, можно использовать эффект «ролловер»: при наведении на картинку она будет меняться на другую.
Пытаясь добавить как можно больше товаров в письмо, подумайте о юзабилити и эффективности такого решения. Чем больше изображений в ряду, тем меньшего они размера и тем тяжелее что-то на них рассмотреть. Поэтому больше 3 карточек горизонтально размещать не принято. При этом лучше позаботиться о том, чтобы эти изображения были в одном размере или соотношении сторон. Альтернативой может быть нестандартное размещение товаров.
Dark Mode
Чтобы в темном режиме картинки выглядели так же корректно, как и в обычном, делайте следующие элементы с прозрачным фоном:
Так не будет выделяться стандартный белый фон. А если ваши изображения в черном цвете, то добавьте светлую тень или обводку, чтобы они не сливались в одно темное пятно. Больше рекомендаций для dark mode найдете в отдельной статье.
Восприятие одного и того же сообщения на разных фонах будет отличаться. У письма есть два фона: подложка (общий фон) и фон самого емейла. Подложка часто не показывается на мобильных устройствах. Ее лучше сделать в нейтральных оттенках или подобрать изображение, соответсвующее инфоповоду. Важно, чтобы она не уводила фокус от самого письма.
Фоновое изображение
Картинку для фона письма вообще не обязательно использовать. В некоторых почтовиках она заменяется сплошным серым или белым фоном. Например, Outlook не показывает фоновые изображения. Если вы все же решите его добавить: оно не должно отвлекать от текста, поэтому не стоит увлекаться узорами и яркими заливками. А для коварных почтовиков сделайте альтернативный однотонный фон, приближенный по цвету к выбранному изображению, чтобы сохранить концепт.
Негативное пространство
В дизайне писем для рассылки нужно использовать больше свободного пространства. Оно определяет не только границы элементов, но и создает эффективную визуальную композицию, помогает подписчику быстро сконцентрироваться на нужном объекте/месседже сообщения. Когда макет напичкан огромным количеством элементов, это перегружает читателя информацией, отвлекает и в результате он скорее закроет сообщение, чем будет пытаться понять, что же вы хотели донести.
На примере рассылки от Apple с использованием пустого пространства можно увидеть, как контраст с фоном, минимум текста, яркие цвета и свечения акцентируют внимание на MacBook.
Не забывайте оптимизировать графику: письмо с тяжелыми картинками загружается дольше, а никто не любит ждать. Каждое изображение должно весить до 1 Мб.
Цвета
Если корпоративный цвет компании очень яркий, например салатовый или красный, не применяйте его для фона, т. к. email будет трудно прочесть. А вот в кнопках призыва к действию их можно использовать. Помните, что большое количество ядовитых оттенков в дизайне письма рассылки отталкивает. Чтобы яркие цвета смотрелись гармонично, применяйте их дозированно для важных элементов, к которым хотите привлечь внимание.
Ссылки
Ссылки всегда должны быть с анкорами. Не вводите их слишком близко друг к другу: во-первых, это отвлекает от текста, во-вторых, в мобильной версии получателю будет трудно попасть пальцем для перехода по конкретной ссылке.
На изображения лучше также ставить ссылки, т. к. большинство пользователей часто кликает по ним. Кроме того, если в картинках не проставить ссылки, то Gmail будет предлагать пользователям их скачать.
Изображение без ссылки
Адрес электронной почты и номер телефона также оборачивайте ссылками. Если этого не сделаете вы, это сделает почтовый клиент (и со своими стилями, что может повлиять на корректность отображения). Например, часть цифр перенесет на следующую строку. Подробнее о работе со ссылками читайте в этом материале.
Кнопки призыва к действию оформляйте в стиле всего письма и бренда. Их можно выделить цветом логотипа компании или сделать контрастными, чтобы они не сливались с общим фоном. Есть также работающие цвета, которые протестированы маркетологами и психологами в ходе исследований. Например, на сайте кнопки могут быть черными, а в рассылке — красными, т. к. они более кликабельны.
Сам призыв кнопки должен быть согласован с заголовком письма. Если у вас всего одна СТА, поместите ее на первом экране, ведь не все пользователи пролистывают рассылку до конца. А в длинное сообщении лучше добавить несколько кнопок. В примере рассылки от Toptop.ru кнопки с разными призывами размещены на первом экране, в середине текста и в конце.
Главные и второстепенные кнопки можно сделать в разном дизайне: изменить цвет, свечение, размер, добавить изображения в кнопку, скрыть для десктопа или мобильной версии.
Понять, насколько удачно работает тема письма, использование эмодзи, цифр, изображений, цвета, шрифтов, ссылок, СТА и любых других элементов, поможет А/В-тестирование.
К выводам
При составлении дизайна и верстке писем для рассылки нужно учитывать все составляющие: каждый блок имеет определенную значимость и не должен нарушать общую структуру. Чем меньше отвлекающих факторов, тем выше шансы, что вас правильно поймут.
Не старайтесь добиться совершенства в дизайнерских фишках: то, что они понравились вам, не значит, что они понравятся всем. Точнее, обязательно кому-то они не понравятся и это нормально. Чтобы создать привлекательное во всех смыслах сообщение:
Каким именно будет оформление рассылки, решаете вы. Воплощайте даже самые смелые решения и создавайте стильные, узнаваемые емейлы с помощью широкого и удобного функционала eSputnik!
Email-дизайн: ТОП-8 рекомендаций для создания идеального письма
В погоне за креативностью и уникальным дизайном не стоит забывать о главной цели рекламных писем — достижении целей конверсии. Ни одному бренду не нужны просто красивые рассылки.
Помня об этой простой истине, можно создать правильный дизайн письма.
В нашей статье мы расскажем, как быть убедительным без потери эстетической привлекательности в любом письме.
Итак, начнем с главной рекомендации в нашем списке. Вы можете создать письмо, идеальное с т. з. дизайна, добавить в него интересный интерактив и написать броский текст. Но какой смысл в рассылке, если письмо отображается адекватно только на одном типе девайса с определенным размером экрана и только в конкретном почтовом клиенте? Не беря во внимание важность адаптивного дизайна, вся ваша работа может пойти насмарку.
Редактор Stripo позволяет скрывать некоторые элементы письма на мобильных устройствах и одновременно с этим прятать другие элементы на десктопах. Это значит, что вы можете выбирать, какие из элементов будут показаны только на мобильных гаджетах, а какие — только на ПК.
Конечно же, высота письма безгранична. Вы можете использовать столько строк, сколько необходимо для отображения всего нужного контента. Но стоит помнить: чем длиннее письмо, тем меньше шансы, что его дочитают до конца.
Общая высота веб-страницы составляет 960 px, и этого, как правило, недостаточно для предоставления всей необходимой пользователям информации, которую нужно донести через email-канал. Увы, от скроллинга не уйти. Обычно в среднем длина писем составляет порядка 1500-2000 px. Этого хватает для размещения контента, и юзерам при этом не трудно сделать 1-2 скролла. Также помните, что на мобильных устройствах, в связи с перестановкой блоков, длина email-шаблона может сильно увеличиться.
Важно отметить: во многих email-клиентах типа Outlook, Apple Mail, Thunderbird есть окно превью с ограниченным размером — 600 px в ширину и 300-500 px в высоту. Они не отображают уменьшенную копию всего письма, но захватывают верхнее его поле с соответствующим размеру окна превью. Поэтому вам следует убедиться, что первые 300-500 px содержат важную и вовлекающую информацию, которая заинтересует пользователя прочитать его до конца.
Не нужно говорить громких слов о важности маленького веса письма — даже в нашем современном мире множество людей сталкивается с проблемой плохого интернет-соединения.
Это не значит, что нужно отправлять только простые скучные письма. Просто делайте сжатие картинок.
Хочется также отметить, что вес кода для полного отображения в почтовом клиенте Gmail не должен превышать 102 KB, и этого стоит придерживаться.
Выше в статье уже упоминалось о том, что главной целью маркетинговых email-кампаний является убеждение ваших клиентов совершить целевое действие: купить продукт, зарегистрироваться на мероприятие, сделать благотворительное пожертвование и т. д. и т. п. Этой цели можно достичь с помощью четкого и убедительного призыва к действию в своей рассылке:
Так много способов сделать кнопки привлекательными! Не бойтесь использовать любую из перечисленных идей.
Вы можете развлечь свою целевую аудиторию благодаря разнообразной интерактивности. Сегодня геймификация является одним из самых известных способов использования технологии AMP для писем. И да, в редакторе Stripo для этого не требуется никаких скиллов в верстке.
Так что же можно сотворить с помощью технологии AMP?
Звучит прикольно, и это может повысить конверсию, не правда ли?
Только представьте, 285 миллионов людей по всему миру имеют проблемы со зрением, даже когда носят очки. Это равно более половине населения Евросоюза и 87% жителей США.
А вы знали, что люди со слепотой и проблемами со зрением используют так называемые скрин-ридеры (VoiceOver для Mac, Microsoft Narrator для Windows, и т. д.), когда хотят прочитать письмо?
Так что же нужно делать, чтобы помочь этой аудитории ощутить все совершенство ваших рассылок?
Давайте начнем с малого. Просто следуйте правилам ниже:
будут иметь преимущество над обычным текстом и будут считаны ридером первыми.
Если у вас возникают какие-либо сложности в процессе создания писем, отвечающим всем этим требованиям, всегда можно обратиться напрямую к специалистам Stripo на официальной странице компании в Facebook. Мы с радостью поможем вам создавать рассылки с любовью и заботой обо всех людях.
Не забывайте тестировать письма перед отправкой своим пользователям.
Да, вы вложили все силы и душу в рассылку. Да, она выглядит идеально. Но это же совсем не сложно — проверить ее в самом конце.
Особенно, когда в хороших редакторах есть специальная кнопка с такой функцией. Нажмите ее и точно убедитесь, что письмо вышло супер-пупер.
Большую часть времени компаниям нужно отправлять очень похожие письма, говорящие о скидках, новых коллекциях, информации о регистрации, о смене пароля и т. п. С большой коллекцией готовых к отправке шаблонов, такой как в Stripo, вы можете отредактировать письмо под себя буквально за пару минут — изменить картинки, описание, цену, — просто делайте все, что позволяет воображение и план продаж. Затем экспортируйте в свои ESP и почтовые клиенты и дайте миру увидеть ваши адаптивные, привлекательные и эффективные рассылки.