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

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

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

• 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. Если размер кнопок будет меньше, попасть в них и выполнить целевое действие будет сложнее.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На чистом HTML. Как не странно, за два года в бесплатном доступе появилось не так уж и много бесплатных решений, но то, что удалось найти, значительно превосходит по качеству любой из старой статьи.
E-mail рассылки , несомненно, мощнейший инструмент маркетолога, но пользоваться им нужно очень осторожно. Наш народ никогда не был в восторге от рекламных писем в почтовом ящике, но если вы хороший маркетолог, то сумеете войти в контакт с получателем письма. Данная подборка не решит всех проблем, связанных с рассылками и даже не поможет их обойти, ведь обратит внимание получатель на ваше письмо, удалит или отправит его в спам, зависит не от того, какой красивый в будет дизайн, а от содержимого. Все, что я хотел сказать этой фразой - не шлите спам или каких-либо шаблонных предложений. Используйте эти html шаблоны с умом и без вреда окружающим.
Еще раз повторю, не рассылайте спам, лучше применить эти шаблоны для рассылки различных поздравлений для ваших клиентов с праздниками. Если у вас есть интернет-магазин и имеется база пользователей, которые действительно хотят получать от вас письма, можете на остове любого html шаблона сделать рассылку с оповещением о какой-либо акции или скидке.
Итак. К вашему вниманию 20 бесплатных E-mail шаблонов для рассылок . Пользуйтесь с умом.

Бесплатный HTML + PSD E-mail шаблон: PHStock Template

Современный HTML шаблон для E-mail рассылок с большой фоновой картинкой . Выполнен по подобию одностраничных сайтов / . В нем есть маленькая галерея изображений , исходя из этого можно предположить, что данный шаблон будет полезен фотографам или дизайнерам.
Приятным дополнением является наличие PSD исходника. Он вам понадобится, если вы решите существенно изменить внешний вид.
Фоновую фотографию можно с легкостью заменить. Не используйте ворованные фото, лучше найти что-то подходящее на бесплатных фотостоках, о которых я недавно писал в топике "Бесплатные фотостоки с легальными фото ".

Адаптивный E-mail шаблон для интернет-магазина

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

Бесплатный E-mail шаблон для мероприятия

Очень простой HTML шаблон для E-mail рассылок с крупной фоновой картинкой. Изначально заточен под рассылку с предложением посетить мероприятие, или напоминание о грядущем событии. В архиве есть PSD. Не могу сказать, что я от этого шаблона в восторге, но на безрыбье и рак рыба.

Green Village - хипстерский E-mail шаблон для блогера

E-mail шаблон Green Village выглядит немного по-хипстерски. Отлично подойдет для рассылки еженедельного дайджеста новостей или записей с вашего блога. В архиве вы найдете сам шаблон и его исходник в формате PSD.

Photon - E-mail шаблон для фотоблога

Хороший, современный шаблон для осуществления различных рассылок. Подходит для любых целей, но изначально позиционируется как E-mail шаблон для фотосайта .

KATAUSTRIA - адаптивный Email шаблон

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

Boxi - бесплатный E-mail шаблон в стиле Meto / Flat

Интересный шаблон, который совмещает два стиля: Meto и Flat . Состоит из блоков в виде сетки, которые выполняют разные задачи - блоки с тестом, блоки с социальными кнопками , блок с изображением и пр.

Miks Blogger Newsletter - универсальный E-mail шаблон для блогера

Чистый шаблон с откликами ушедшего в прошлое Retro стиля. Хотя дизайн мне очень нравится. Есть PSD.

Новостной HTML + PSD Email шаблон

Чистый шаблон для почтовых рассылок в светлых тонах, предназначен для рассылок новостей с новостного сайта или блога.
Автор шаблона заявляет, что его творение хорошо работает на:
Apple Mail 4, 5, 6
iPhone 5, 4S, 4, 3gs, iPad
AOL Mail Firefox, Explorer, Chrome
Hotmail Firefox, Explorer, Chrome
Gmail Firefox, Explorer, Chrome
Yahoo! Mail Firefox, Explorer, Chrome
Thunderbird текущая версия, Thunderbird 3.0
Outlook.com (Firefox), Outlook.com (Explorer), Outlook.com (Chrome)
Outlook 2011, 2010, 2007, 2003, 2002/XP, 2000
Lotus Notes 8.5, Lotus Notes 8, Lotus Notes 7

Бесплатный E-mail шаблон в зеленых тонах

Шаблон с довольно древним дизайном. Я бы его и не включал в данную подборку, но в нем есть несколько преимуществ, которые редко встретишь в бесплатных аналогах - это наличие версии для сервиса рассылок MailChimp .

Стоит признать: 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-стратегии, и отдельно – ведение рассылки по уже имеющейся у вас стратегии.

Изучила исследования аналитиков и мнения специалистов email-маркетинга и написала для сайт колонку с трендами в дизайне email-рассылок в 2017 году.

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

Тренды 2016 года, которые будут жить в 2017 году

1. Адаптивный дизайн

Смартфоны победили десктоп. Согласно исследованиям Litmus, 55% писем открывают на мобильных устройствах. В 2017 году тенденция сохранится, поэтому самое время проверить свои рассылки на адаптивность. Руководствуйтесь основными принципами:

Универсальность . Разработайте адаптивный макет, чтобы письмо корректно отображалось на всех устройствах.

Телефония . Используйте возможности смартфонов: добавьте призыв к действию «позвонить» или «заказать звонок».

Разные CTA для мобильных и десктопа

Юзабилити . Не мельчите: пользователи не смогут рассмотреть маленькие заголовки, например, в верхнем меню. Сделайте из горизонтального меню вертикальное и увеличьте шрифт. Получится меню, которым удобно пользоваться на маленьком экране:

Адаптивное меню

На что обращать внимание

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

2. Интерактивность

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

Интерактивные элементы работают на CSS3, а спроектированы могут быть, например, в Adobe Experience Design или Sparkbox . Задача таких инструментов - помочь сосредоточиться на контенте, а не на вёрстке.

На что обращать внимание

Сегодня существует множество почтовых клиентов - десктопные приложения (например, Microsoft Outlook, AOL, Thunderbird), веб-сервисы (Gmail, Mail.Ru Group), мобильные клиенты. В зависимости от того, какие технологии они используют, ваши дизайнерские изыскания в виде CSS-анимации будут работать или не работать в разных клиентах. Стоит предусматривать упрощенные варианты отдельных блоков и прописывать их в media queries.

К слову, в сентябре 2016-го Gmail, наконец, объявил о том, что клиент начинает поддерживать адаптивную верстку писем. Это большой шаг для индустрии почтовых клиентов в целом - переход на адаптивную верстку рассылок станет еще более массовым явлением.

3. GIF-анимация

Анимированные изображения - ещё один способ «оживить» рассылки. У них есть одно важное преимущество - простота производства. В то же время гифки способны наглядно продемонстрировать продукт в действии - поэтому, несмотря на то, что поклонники CSS предрекают скорейшую гибель GIF-анимации, та будет жить и процветать еще долго.

На что обращать внимание

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

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

4. Векторные изображения

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

На что обращать внимание

Пара полезных JS-библиотек для работы с SVG-анимацией: SnapSVG и GreenSock GSAP .

5. Покупка в письме

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

Тренды в email-рассылках 2017 года

1. Видео

Будущее контент-маркетинга за видео - пишет газета The Guardian. По прогнозам Cisco, к следующему году видео охватит 69% всего интернет-трафика. Оно выйдет за пределы YouTube и будет активно применять в email-маркетинге.

• Кликабельность увеличивается на 55%.
• Пользователя тратят на просмотр письма на 44% времени больше, чем обычно.
• На 41% увеличиваются расшаривания и публикации в социальных сетях.
• Конверсия растёт на 24%, ROI - на 20%.
• Средний чек увеличивается на 14%.

Несмотря на эти преимущества, видео редко встраивается в письма (обычно предпочитают давать ссылку на видеохостинг).

На деле вставить видео в рассылку нетрудно - большинство сервисов поддерживает вставку роликов по ссылке (тот же Mailchimp). Видео может быть и фоном для отдельных элементов или всего макета сразу. Для этого есть онлайн-редактор Mailigen .

2. Галереи изображений

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

3. Гибридная верстка рассылок

Насыщенные цвета помогают лучше структурировать контент.

5. Типографика и навигация

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

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

На что обращать внимание

Текст - главный инструмент в рассылках. Согласно исследованиям , 43% пользователей не используют просмотр изображений в почтовых программах. Чтобы выделить ключевые сообщения, применяйте стили для текста - цвет, начертание и размер кегля. Сам текст набирайте веб-шрифтами или подгружайте нужные с Google Web Fonts .

Как сделать макет plain-text динамичным? Используйте отступы. Они делают текст удобным для чтения, поэтому пользователи изучают такие письма тщательнее - это подтверждает исследование по психологии.

6. Интеграция с социальными сетями