Как сделать дизайн рассылки, если ты не дизайнер. Бесплатный E-mail шаблон в зеленых тонах. Интеграция с социальными сетями

Стоит признать: email-маркетинг уже не обладает такой эффективностью. Рассылок стало слишком много . Компании жалуются: с каждым годом Open Rate и Click Rate падают практически во всех тематиках. Пользователи просто не выдерживают того объема имейлов, что приходят в их почтовые ящики. И это при том, что на большинство из них они добровольно не подписывались.

Значит ли это, что email-рассылка больше не эффективна? Нет. Инструмент по-прежнему можно использовать с выгодой для бизнеса, просто теперь это стало сложней. Чтобы ваши подписчики читали рассылку, нужно соблюдать как минимум пять правил.

Пять самых важных правил в email-маркетинге

  • Ваши подписчики должны изъявить согласие на получение вашей рассылки. Если вы подпишете их обманным методом, попадете в спам. Если будете покупать готовые базы – итог тот же. Пользователи должны знать вашу компанию и ждать от вас писем.
  • Рассылка не должна быть слишком частой. Даже если вы рассылаете интересный контент и делаете выгодные акции, не частите с email-рассылками. Одного-двух писем в неделю будет достаточно.
  • База должна быть разбита на сегменты. Рассылать одно предложение всем подписчикам без исключения – просто, но малоэффективно. Если хотите добиться высоких показателей эффективности, сегментируйте базу (по полу, интересам, месту проживания и т. д.).
  • Ваш контент должен быть интересным/полезным. С помощью email-рассылки вы формируете ядро лояльной аудитории. Без хорошего контента этого добиться практически невозможно.
  • Ваши письма должны быть хорошо сверстаны. Внешний вид вашей email-рассылки – это лицо вашей компании. Вы же не ходите на встречу с клиентами в рваных шортах и грязной рубашке? Вот и с имейлами то же самое.

Продающая email-рассылка

Email-рассылка бывает нескольких видов. Продающей называют ту, в которой подписчикам предлагается что-то купить. Обычно люди подписываются на нее с конкретной целью – получать от компании скидки на товары или услуги, следить за обновлениями ассортимента и акциями.

Примеры продающих рассылок из нашего портфолио:

Информационная email-рассылка

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

Примеры информационных рассылок из нашего портфолио:

Кликните по картинке, чтобы посмотреть все письмо

Продающая + информационная

Очень часто эти два типа рассылок совмещают. Например, одно письмо в неделю информационное, а второе – продающее. Или в одном письме – и полезная информация, и призывы что-то купить.

Примеры смешанных типов рассылок из нашего портфолио:

Кликните по картинке, чтобы посмотреть все письмо

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

Как строят работу грамотные email-маркетологи

  1. Изучение особенностей бизнеса клиента.
  2. Разработка email-стратегии.
  3. Создание контент-плана.
  4. Работа с уже имеющейся базой подписчиков, их сегментация.
  5. Разработка дизайна.
  6. Создание и отправка email-сообщений.
  7. Сбор статистики.
  8. Внесение изменений.
  9. Параллельно привлекаются новые подписчики.

Email-маркетинг в «Текстерре»

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

Для создания email-сообщений мы пользуемся несколькими сервисами. Предпочтение отдаем Mailchimp, Unisender и Mindbox. Но по желанию клиента готовы взяться и за любой другой – работать умеем практически со всеми, что есть на рынке, т. к. функционал у всех примерно одинаковый.

Клиенты, для которых мы ведем (или вели) email-рассылку

Каких результатов мы добились, ведя email-рассылку для «Ароматного мира»

«Ароматный мир» – крупная сеть винных супермаркетов. Сложность работы с этим клиентом заключается в том, что он не может продавать алкоголь в интернете, т. к. это запрещено законом. Как мы вели для него email-рассылку и добивались продаж? Можете подробно почитать в нашем кейсе . За 5 месяцев работ мы смогли сделать так, что 9-10 % продаж от общего числа конверсий совершаются благодаря email-рассылке. А это довольно внушительная цифра, учитывая трафик и размер компании.

Сколько стоит email-рассылка?

Стоимость email-маркетинга в нашем агентстве:

  • от 90 тысяч рублей в первый месяц за создание email-стратегии и контент-плана (единоразовая выплата),
  • от 95 тысяч рублей в месяц в последующие месяцы . В эту сумму входит: создание и отправка одного письма в неделю (дизайн, верстка, написание текста), сбор и сегментация базы подписчиков, анализ статистики, проведение A/B-тестов, внедрение изменений.

Стоимость может быть выше в зависимости от: сложности бизнеса, количества писем, сегментов аудитории, размера email-базы и т. д.

Вы можете заказать у нас отдельно создание email-стратегии, и отдельно – ведение рассылки по уже имеющейся у вас стратегии.

Какую идею украсть, стоп, творчески позаимствовать, чтобы ваши письма узнавали с первого взгляда? Как привлечь внимание, если ваш подписчик читает письма клавишей Del? Что вообще делать, если контент уже идеален, но надо улучшать результаты рассылки?

18. Анимация

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

Вот здесь можно посмотреть инструкцию по созданию и оптимизации анимации для рассылок.

J Crew в своей летней рассылке «Summer Sale» используют … мороженое. Летом оно ассоциируется с удовольствием, прохладой, детством и счастьем. Цель рассылки - расположить читателей и подарить им ощущение радости. То, что мороженое быстро исчезает, как бы намекает, что акция или товар скоро закончатся. Не пропустите!

Еще одна летняя тема - мы видим арбуз. И семечки от него постепенно выкладывают нам дорожку к кнопке Call-to-action. Мы скроллим, видим волшебное слово для многих - Sale - и чуть ниже кнопку для перехода. Не заметить ее невозможно.

Здесь мы видим анимацию уже на самой кнопке «Купить». Чтобы не перегружать письмо многочисленными вариациями одного продукта, мы сделали сменяющиеся картинки с помощью GIF.

Думаю, на сегодня хватит трендов. Надеюсь, вам что-то приглянулось. Буду рада обсудить с вами вопросы. Можете присылать мне свои варианты рассылок. Возможно, они войдут в следующий обзор.

Email является одной из популярнейших форм общения между представителями организаций, фирм, компаний, частными лицами по самым разным вопросам. Каждый день отправляется множество писем, но не все задумываются: как правильно составлять письмо для рассылки? Соответствует ли содержание и оформление ожиданиям получателя? Зачастую, нам тяжело описать свои мысли. Мы, кажется, и знаем что хотим написать, а вот как это правильно сделать - не совсем понимаем.

10 правил эффективного составления писем

Прежде, чем составлять письмо, определитесь с целевой аудиторией, кому вы хотите написать. Если есть какие-то сомнения хотя бы по одному из кандидатов - не включайте его в рассылку. Задумайтесь о своей репутации и напрасно потраченном времени.

Чётко сформулируйте цель для отправки:

  • Определитесь с вашей целевой аудиторией: расслка будет по всей базе или определённому сегменту?
  • Каким будет письмо для рассылки: рекламным или информационным?
  • Выделите основную мысль, которую хотите донести в тексте.
Чем больше деталей вы продумаете вначале, тем проще будет скомпоновать письмо. Не бойтесь показаться смешными. Лучше быть творческим и интересным, чем стандартным и скучным.

Давайте рассмотрим 10 правил составления писем подробнее.

1. Отправитель должен быть узнаваем

Определитесь с полем «От кого», не обезличивайте его. Намного приятнее получать письмо от человека, нежели от какой-то организации, а ещё хуже просто от неизвестного адреса. Выбрав адрес отправителя однажды, не меняйте его часто. Ваш адрес и имя - визитка компании! Они должны соответствовать, легко узнаваться и запоминаться.

2. В поле «Тема» чётко отображайте основную идею письма

Читатель не должен быть обманут. Именно влияет на решение получателя: читать письмо полностью или удалить даже не просматривая. Постарайтесь заинтересовать читателя, но не раскрывать всю идею письма сразу. Одного короткого предложения вполне достаточно - откажитесь от длинных фраз, рекламных текстов и штампов. Также не стоит указывать в теме письма отправителя.

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

Например, темы рассылок отправленных в течение месяца:

3. Начните письмо с приветствия

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

Избегайте обращений вроде: Доброго времени суток, Дорогой (-ая), Уважаемый (-ая). Лучше использовать подстановку персонализации, которая доступна в редакторе любого сервиса рассылок.

4. Убедите читателя, что письмо адресовано ему

Составьте письмо так, чтобы получалось и каждый понимал, что обращаются именно к нему. Используйте в письме знания, полученные в процессе рассылки. Подавая общую информацию, постарайтесь учитывать всё, что вы знаете о клиенте, опыт предыдущих рассылок.

5. Минимум воды

Не загружайте текст ненужными деталями, описаниями. В то же время - сделайте текст ёмким и интересным. Лучше создать красивый , чтобы заинтересовать подписчика перейти на сайт и прочитать там более полную информацию.

6. Следите за целостностью письма

Придерживайтесь одной темы, не теряйте основную мысль. Если вы и хотите что-то добавить - пусть этот текст существенно не отличается, а ещё лучше отправить отдельное письмо. Излагайте мысли последовательно:

7. Избавьтесь от терминов

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

Например, сравните два текста:

  • Обувь с металлическими подносками защитит пальцы от ударов с энергией до 200 Дж. Проколозащитная прокладка должна уберечь от проколов и порезов, согласно ГОСТ 28507. Подошва из полиуретана обладает износостойкими свойствами - ГОСТ 12.4.137.
  • Полиуретановая подошва прослужит долго, а также защитит обувь от проколов и порезов.

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

8. Обязательно "прощайтесь" в футере

Можно не использовать стандартные фразы, а просто указать:

  • от кого адресовано письмо,
  • контактные данные,
  • ссылки на социальные сети,
  • адреса магазинов и т.д.

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

9. Оформляйте письмо правильно

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

10. Экспериментируйте

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

Проверьте эффективность вашего письма на мелочах. Например, изменив цвет кнопки «купить» с синего на красный (или наоборот) вы можете повлиять на продажи. Также, можете попробовать изменить её расположение в письме, цвет, шрифт, размер. и разошлите им письма с разным вариантами использования этой кнопки. После этого сравните результаты и выберите оптимальный вариант.

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

P.S.: Дополняйте емейл-кампанию , пуш-уведомлениями или СМСками. Так ваши электронные кампании будут ещё эффективнее.

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

Структура писем

Структура писем практически не отличается от структуры обычной веб-страницы:

Прехедер

В прехедере чаще всего располагается тема письма и ссылка на веб-версию.

Шапка письма (хедер)

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

Вот пример шапки письма от Амедиатеки, здесь просто логотип:

А вот письмо Ламоды, здесь и логотип, и информация по накопленным баллам, и меню:


Тело письма

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

Подвал письма (футер)


Адаптивный дизайн email-рассылки

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

Есть несколько вариантов адаптивной вёрстки письма.

С помощью «плавающих блоков»

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

адаптивная вёрстка

С подстраивающимся содержимым

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

С помощью медиазапросов

Mediaquery - это компонент языка CSS. Этот метод позволяет менять расположение объектов при помощи медиазапросов. Не самый лучший способ адаптации для писем, так как далеко не все почтовые клиенты с ними работают.

Клиенты, поддерживающие и не поддерживающие медиазапросы:

Десктопные Мобильные Браузерные
AOL Desktop Android 4.2.2 Mail AOL Mail
Apple Mail 10 Android 4.4.4 Mail G Suite
IBM Notes 9 AOL Alto Android app Gmail
Outlook 2000–03 AOL Alto iOS app Google Inbox
Outlook 2007–16 BlackBerry Outlook.com
Outlook Express Gmail Android app Yahoo! Mail
Outlook for Mac Gmail Android app IMAP
Postbox Gmail iOS app
Thunderbird Gmail mobile webmail
Windows 10 Mail Google Inbox Android app
Windows Live Mai Google Inbox iOS app
iOS 10 Mail
Outlook Android app
Outlook iOS app
Sparrow
Windows Phone 8 Mail
Yahoo! Mail Android app
Yahoo! Mail iOS app

Зелёным обозначены почтовые клиенты, которые поддерживают медиазапросы, красным - не поддерживают. Данные взяты отсюда: campaignmonitor.com

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

Ещё я бы посоветовала почитать книгу Люка Вроблевски «Сначала мобильные!» . В ней доступно рассказывают о проектирования сайтов с учётом отображения на мобильных и планшетах, приводятся примеры и рекомендации по вёрстке. Этот подход можно применять и в дизайне писем.

Ошибки в адаптивном дизайне писем

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

Например, в этом письме теги задумывались в два столбца:

Теги отображаются в два столбца

Но в результате письмо выглядело вот так:

Письмо с ошибкой в вёрстке

Дело в том, что между плавающими блоками (

…) не должно быть пробелов в коде. В этом примере в коде случайно добавили пробел или перенос строки. Получился отступ между блоками, и два столбца не поместились.

Шрифты в электронных письмах

Это боль дизайнера. В дизайне писем мы можем использовать только стандартные шрифты:

  • Arial
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana

Не самые красивые шрифты, но хорошо читаемые, и подписчик точно увидит весь текст в письме. Бонус «поиграть со шрифтами», как любят просить клиенты, не получится.

Кстати, стандартные системные шрифты на Android и iOS - это Helvetica и Roboto. Поэтому их тоже можно использовать, в случае чего они заменяются на родной всем Arial =) Так как они похожи по начертанию, это не сильно повредит макету и ничего не поедет.

Цвет текста

Цвет текста должен быть контрастным к фону. Некоторые дизайнеры считают, что лучше использовать тёмно-серый, например, #333333 к белому фону, так как чтение 100% чёрного текста утомляет глаза. Но это спорное утверждение. Можете , в которой автор рассказывает про удобочитаемость, контрастность цвета текста к фону, эволюцию шрифтов в вебе и приводит примеры.

Используйте несколько текстовых стилей для расстановки акцентов: главный заголовок, основной текст, ссылка, сноска. Важно не переусердствовать - большое количество шрифтов и цветов мешает восприятию информации. Заранее определите, сколько у вас должно быть текстовых стилей, и придерживайтесь их. Оптимально, если их будет три - четыре: заголовок, основной текст, текст в футере или сноски, ссылки.

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

Размер писем

Оптимальная ширина шаблона для писем - 600 -700px. Это ширина с учётом отступов. Почему 600px? В основном это связано с размером окна в почтовых клиентах и с адаптивной версткой. Самая распространённая ширина экрана на мобильных - 320 px.

Картинки в email-рассылках

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


Дизайн письма с персональным обращением

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

Вот в этом примере письмо свёрстано картинками, и они не загрузились:



а без картинок вот так:


Также не стоит увлекаться фоновыми изображениями. Не все почтовые клиенты поддерживают отображение фона картинкой, как в этом письме, открытом с аутлука - вместо фоновой картинки - серая заливка:


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

Письмо - это не фото на память, здесь не нужно высокое качество изображений. Поэтому оптимизируйте картинки для веба, иначе они будут тяжёлыми и не отобразятся. Чтобы уменьшить вес картинок, мы используем compresspng.com (там же можно сжать jpg или pdf) или www.iloveimg.com .

Сейчас в письмах модно использовать простую анимацию с помощью гифок:


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

Порой, когда вы открываете проморассылку на iPhone или Mac, изображение немного замылено. Это не значит, что картинки плохого качества. Просто дизайнер при подготовке рассылки не подумал о том, что вы будете смотреть его на устройстве с экраном Retina. Чтобы макет не «плыл», мы собираем его в х2 размере, то есть ширина контента не 600px, а 1200, текст не 16px, а 32.

Целевое действие в письме

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

Обычно к целевому действию ведёт кнопка. И, поскольку это самый важный элемент письма, она должна быть заметной. Во-первых, кнопка должна выглядеть как кнопка. Глядя на неё, получатель должен понимать, что на неё можно нажать и что после нажатия произойдёт определённое событие.

Во-вторых, кнопка должна быть заметной. Для этого лучше использовать контрастные к фону цвета. Также она должна быть достаточно крупной - минимальная рекомендуемая высота - 35 px. Средняя ширина указательного пальца 16-20 мм, это приблизительно 45 px. Пальцы у всех разные, но производители телефонов дают свои рекомендации. В гайде Apple тач-область - 44 px, Microsoft рекомендует размер 34px. Если размер кнопок будет меньше, попасть в них и выполнить целевое действие будет сложнее.

Как происходит работа над дизайном писем

Предварительное знакомство

В первую очередь, когда мы начинаем готовить дизайн, мы изучаем бизнес клиента: его отличия и преимущества перед конкурентами, фирменный стиль, сайт и предыдущие рассылки, если они были. Также смотрим статистику, какие кампании в прошлом сработали лучше, какие хуже. Иногда у клиента есть гайдлайн для писем, это совсем идеальный вариант. В большинстве случаев под рассылки нужно разработать дизайн-шаблон - это письмо со всеми элементами, которые когда-либо могут пригодиться. В будущем из этих элементов можно собирать рассылки. За основу для дизайн-шаблона берём сайт.

Обсуждение структуры письма с копирайтером

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

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

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

Набросали макет, показали менеджеру. Письмо оказалось длинным и малоинформативным. Текстовые блоки разные по объёму, иллюстраций нет:


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

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

Подготовка шаблона

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

Обратитесь к писателям. Если текст уже согласован, есть два варианта: продолжить работу, или попробовать согласовать с клиентом изменения в тексте. Если аргументировать изменения, клиент, как правило, не возражает.

Передача верстальщику и проверка вёрстки

Макет готов. Менеджер счастлив, клиент согласовал. Время передавать работу в вёрстку. Но на этом работа дизайнера не закончена.

Всегда нужно контролировать вёрстку. Не поленитесь, посмотрите вёрстку или попросите прислать вам тест. Бывает, что свёрстанное письмо незначительно отличается от макета, как в этом примере:


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

Из этой статьи вы узнаете, как сделать письмо для E-mail рассылки на онлайн-конструкторе Wilda. В чем отличие форматов Html и Jpeg, и какой формат подойдет вам больше.

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

  1. Создав html версию письма
  2. Отправив цельное изображение в теле письма.

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

Что такое Html письмо?

Html письмо – это письмо, созданное на языке Html (также, как и сайты в интернете). Если у вас нет достаточных навыков, то самостоятельно создать такое письмо у вас не получится. Для этого вам потребуется помощь профессионального верстальщика, который создаст такое письмо с помощью материалов, предоставленных ему вами: тексты, изображения, структура письма. После создания html письма вам понадобится специальное программное обеспечение для рассылки его адресатам.

Существует достаточно много сервисов, позволяющих самостоятельно создать электронное письмо с помощью готовых шаблонов или используя конструкторы Html писем, а затем отправить его. Минусом этого подхода может стать некорректное отображение вашего письма у некоторых получателей, так как при создании письма может генериться лишний код, либо шаблоны недостаточно хорошо адаптированы под различные почтовые клиенты – программы, собирающие и отправляющие почту, такие как Mail, Yandex, Gmail, Rambler, Outlook,Thunderbird или The Bat.

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

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

Чем Wilda может вам помочь?

На конструкторе Wilda вы можете:

Создать рассылку в виде изображения и вставить в тело письма

Для этого при создании нового документа выберите тип «E-mail рассылка» или воспользуйтесь подходящим шаблоном. Ширина документа будет 700 px – рекомендуемое значение для успешного отображения письма на мобильных устройствах, а высоту вы можете регулировать в зависимости от контента. После окончания редактирования просто сохраните ваше письмо в виде Jpeg файла.

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

Создать макет письма для последующей верстки в Html

Если обстоятельства требуют от вас создания Html письма, то с помощью конструктора Wilda вы можете создать макет письма для того, чтобы специалистам было проще понять, что вам необходимо. Вместе с макетом вам останется только передать специалисту исходники изображений и ждать результата!

Подробнее об оформлении электронных писем читайте в статье Как создать письмо для E-mail рассылки.

Создать элементы для Html рассылки

В любом Html письме есть необходимый набор элементов: шапка, подвал, фон или изображения. С помощью онлайн-конструктора Wilda вы можете создавать или редактировать эти элементы, сохраняя каждый в отдельности в виде файла Jpeg. Для этого в конструкторе предусмотрено создание документов любых размеров. Уточните у вашего специалиста необходимые требования к элементам и создайте их на конструкторе. Вы легко справитесь с этой задачей, особенно если уже создавали для себя какие-нибудь документы. При этом в конструкторе уже будут храниться ваши логотипы, изображения, фирменные цвета и т.д.
Резюмируя все вышесказанное, конструктор Wilda будет, несомненно, полезен всем, кому необходимо создать красивую и эффектную E-mail рассылку.