Как разработать PSD шаблон для почтовой кампании

  1. Предварительные приготовления:
  2. Базовый скелет:
  3. При разработке для мобильного макета:
  4. Советы по дизайну, применимые ко всей электронной почте

Монахи считают, что электронное письмо с соответствующим контентом и дизайном, с которым ваш подписчик может связаться, имеет больше шансов на открытие. Изучение Pro-советы по созданию шаблона электронной почты может помочь вам создать функциональный дизайн электронной почты, и в этом блоге Monks предоставит вам советы по поиску PSD для кампании по электронной почте.

Предварительные приготовления:

Все начинается с понимания типа письма для отправки. Все типы электронных писем могут быть разделены на две широкие категории: а) информационный бюллетень электронной почты; б) рекламная электронная почта о товаре / услуге.

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

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

Одна из лучших практик в дизайн шаблона электронной почты должен иметь максимальную ширину шаблона 800px или 600px. Для мобильного макета ширина должна быть уменьшена до ~ 320 пикселей. Чтобы предотвратить какое-либо искажение или смещение вашего содержимого электронной почты, важно обеспечить отступ с обеих сторон. Следовательно, вам нужно настроить контент в пределах 500 пикселей для макета рабочего стола и 300 пикселей для мобильного макета.

Базовый скелет:

Любое письмо имеет 3 основных раздела:

Заголовок. Несмотря на то, что ваши подписчики должны открывать электронную почту, распознавая строки «От имени» и «Тема», важно, чтобы в заголовке был элемент бренда для новичков в ваших электронных письмах.
Из-за проблемы совместимости с различными почтовыми клиентами ваша электронная почта должна иметь возможность просматривать отчетливо видимую электронную почту.

Из-за проблемы совместимости с различными почтовыми клиентами ваша электронная почта должна иметь возможность просматривать отчетливо видимую электронную почту

Некоторые почтовые клиенты, такие как Apple mail, Gmail и нативные почтовые клиенты, извлекают первые несколько символов из вашей электронной почты в качестве текста предварительного просмотра. При разработке вашего шаблона заголовок может иметь предварительный текст, который можно скрыть во время кодирования, чтобы подписчики не перечитывали текст после открытия электронного письма. Если у вас есть меню навигации, заголовок - лучшее место для его размещения.

Если у вас есть меню навигации, заголовок - лучшее место для его размещения

Тело: Как только ваш подписчик откроет электронное письмо, на первый взгляд решит, будут ли они двигаться дальше или удалят (или откажутся от подписки, если пользователь iOS 10) электронное письмо. Таким образом, наиболее важная информация должна быть предоставлена ​​в пределах верхних 250-400 пикселей (называемых: выше сгиба) в зависимости от ширины экрана устройства. Это может быть богатый образ героя, баннер или даже приветствие.

Это может быть богатый образ героя, баннер или даже приветствие

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

Независимо от размещения, кнопка CTA должна быть хорошо выделена и нажиматься большим пальцем

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

Кроме того, убедитесь, что соотношение текста и изображения основано на лучших практиках, применяемых в вашей отрасли. Для электронных писем с большим количеством изображений можно демонстрировать несколько изображений с помощью интерактивных элементов, таких как Rotational Banner или Slider, и предоставлять запасной вариант в формате GIF.
Основываясь на шаблоне движения глаз, макет контента также играет роль обработки информации. Существуют различные макеты для демонстрации вашего контента для удобства сканирования. (нажмите на каждый макет для легкой визуализации)

При разработке для мобильного макета:

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

Прежде чем вы сможете назвать это днем, в нижний колонтитул необходимо добавить еще одну вещь. CAN-SPAM act 2003 гласит, что электронное письмо, отправляемое в список рассылки, должно иметь ссылку или кнопку, чтобы читатель мог свободно отписаться вместе с физическим почтовым адресом отправителя. Несмотря на то, что большинство ESP теперь добавляют ссылку для отмены подписки, ее лучше добавить с точки зрения дизайна.

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

Советы по дизайну, применимые ко всей электронной почте

  • Шрифты должны быть в пределах 12-14 пунктов для удобства чтения и должны быть безопасными для электронной почты шрифтами. (Для информации следите за блогом).
  • Общая высота шаблона должна быть ограничена 1800-2000 пикселей, иначе она должна быть вырезана в Gmail.
  • Более того, если это не новостная рассылка, подписчики не предпочитают длинную электронную почту.
  • Дизайн должен соответствовать цвету бренда и логотипам.
  • В целом, электронная почта должна иметь отдельные разделы, разделенные пробелом.
  • Чтобы облегчить кодирование вашей электронной почты, если у вас есть редактируемый контент, вам следует избегать добавления фонового изображения в этот раздел.

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

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