Письмо для рассылки html: бесплатные инструменты для маркетолога — Журнал Mindbox о разумном бизнесе

Верстка html-писем для рассылки: разбираем основные ошибки

Создавать красивое адаптивное письмо бывает сложнее, чем верстать лендинг — это связано с тем, что почтовики, в отличие от браузеров, ещё не пришли к единым правилам отображения кода. Некоторые почтовые клиенты поддерживают HTML и CSS хуже, чем браузеры. 

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

К чему приводит неправильная вёрстка письма

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

• письмо будет отображаться по-разному в почтовых клиентах: какой-то блок может исчезнуть, какой-то окажется не на своем месте;
• фоновое изображение может пропасть;
• рукописные и нестандартные шрифты превратятся в безопасные Arial или Times New Roman;
• письмо будет долго загружаться в почтовике;
• какие-то элементы письма могут отличаться от макета. Некоторые почтовики, накладывают свои стили поверх прописанных, удаляют или игнорируют стили.

На что обращать внимание при вёрстке писем, чтобы избежать проблем

Лучше не использовать <div>

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

Пример расположения колонок в табличной вёрстке письма

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

Пример одноколоночного макета

Ограничить размер макета

Ширина макета не должна превышать 700px, чтобы письмо могло полностью отобразиться в Яндекс.Почте на ноутбуках, диагональ которых равна или меньше 15″. Если макет будет шире, он не поместится и частично скроется из-за колонок по бокам экрана. Читать такое письмо неудобно.

Быть готовым, что нестандартные шрифты отобразятся не на всех устройствах

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

• Arial,
• Courier,
• Georgia,
• Helvetica,
• Lucida Sans,
• Tahoma,
• Times New Roman,
• Trebuchet MS,
• Verdana.

Не сокращайте стили и не встраивайте их через внешние ссылки

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

<div>Пример текста</div>

Использовать встроенные стили не так удобно. Но чтобы не прописывать рядом с каждым элементом код, можно воспользоваться специальными сервисами, например:

• Premailer.io;
• inlinestyler.torchbox.com.

Они автоматически переведут все внешние стили во встроенные. Помимо внешних, проблемы могут возникнуть и с сокращенными стилями. Например, лучше не использовать:
padding: 1px 2px 3px 4px. 

А заменить код на:  padding-left: 1px; padding-right: 2px; padding-top: 3px; padding-bottom: 4px.

Сокращайте длину кода

Если размер письма превысит 100Кб, Gmail и Yahoo обрежут письмо. Тогда у пользователя на экране появится кнопка-ссылка с предложением открыть полную версию письма. Читатель может не понять, что происходит, и закрыть письмо.

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

Осторожно используйте фоновые изображения

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

Письмо с фоновой картинкой и текстом сверху

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

Телефоны и адрес почты прописывайте ссылкой

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

Что можно использовать при вёрстке писем

Картинки 

Изображения помогают запоминать до 65% информации, в то время как текст — только 10% — согласно исследованиям Hubspot. Вот несколько советов, как вставить картинки в письма и не испортить макет:

• баннер — не больше 700px, чтобы он вписался в шаблон по ширине;
• кнопки — заметные и удобные для нажатия, поэтому не стоит их делать меньше 40-50рх;
• отступы вокруг картинок и изображений — обязательные, чтобы пользователь мог без проблем кликнуть по ним;
• размер картинок — небольшой, не более 200 Кб;
• атрибут alt тега <img> — у каждой картинки, альтернативный текст картинки не более 30 символов;
• для Outlook ширина изображения — задаётся с помощью атрибута width, иначе сервис отобразит реальный размер картинки, а не тот, что нужен вам.

  Читайте также:

  Как ресторану запустить email-рассылку. Примеры лучших рассылок в ресторанном бизнесе

Gif-анимация

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

Не забывайте следить за размером gif. Чем больше файл анимации, тем дольше он загружается у пользователей. Делайте анимацию до 3 Мб, максимум — 5 Мб.

Прехедер

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

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

Как протестировать письмо автоматически

Расскажем о сервисах, которые помогут с вёрсткой писем.

EmailOnAcid

Особенности:
Сервис позволяет проверить отображение письма в 112 почтовиках: мобильных версиях, десктопных и веб. Минимальная подписка обойдётся 73 доллара за месяц.

Достоинства:

• Тестовый период. Прежде, чем купить подписку, сервисом можно бесплатно пользоваться неделю, чтобы изучить возможности и функционал.
• Неограниченное количество превью. После внесения изменений в код, можно сразу же загрузить улучшенный вариант и проверить снова. И так сколько угодно раз.
• Подробный отчет после проверки. Все замечания будут собраны в одном отчёте. 
• Библиотека подсказок и решений. Обращайтесь к ней, если что-то не получается. Библиотека пополняется с 2008 года и уже собрала множество полезной информации для верстальщиков.

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

Litmus

Особенности:
Сервис позволяет проверить письмо в 90 почтовых сервисах. Из дополнительных функций — веб-ide, который позволяет редактировать код, система аналитики email-рассылки, функции тестирования производительности, проверка на «спамность». Минимальная подписка обойдётся 80 долларов в месяц.

Достоинства:

• Инспектор обработанного кода. Выделяйте любой участков письма, просматривайте код и сразу же его правьте.
• Тестовый период. Доступен в течение 7 дней. Можно проверить большую часть функционала сервиса.
• Анализ кода и предложения по его улучшению. Сервис проверяет код по 1000 правил, которые нацелены улучшить его совместимость с почтовыми клиентами.
• Отчёт проверки. С подробными пояснениями и визуальным оформлением.

Недостатки:
Некоторые функции доступны только в подписках Pro и Enterprise. Например, советы, как избежать спам-фильтра и попасть в папку «Входящие».

Вёрстка писем: подведём итог

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

Как создать html письмо для рассылки

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

Но желание — есть, поэтому стал копаться дальше. Может быть и на блоге, скоро заменю подписку по email от feedburner (под статьями) на какую-нибудь другую, где можно сделать ее более симпатичной. Главное учесть все нюансы верстки под почтовые клиенты, а их поверьте не мало.

Актуальность создания html писем для почтовой рассылки

Почтовая рассылка один из самых эффективных способов продать товар, донести новости до клиентов, рассказать об акциях и дополнительных услугах. Кроме того, когда у вас есть база клиентов, вы можете вернуть “старых” покупателей и осуществить еще одну продажу.

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

Ну и конечно же тут работает теория больших чисел. Если разослать предложение о продаже чего-то 20000 подписчиков, 1000 из них ознакомилась с предложением и хоть 10 да купит, а затрат – 0. Вы просто отправили письмо!

Но кто-то не открыл письмо, кто-то открыл и не стал читать его, потому, что там портянка текста, у кого-то не открылись картинки, а у кого-то поехала верстка. Так бывает. Из-за того, что почтовые программы не так хорошо поддерживают сss, как браузеры. А о javascript – я вообще молчу.

И существует масса проблем для верстальщиков, которые занимаются созданием html писем.

Но сегодня я постараюсь рассказать вам о том, как создать html письмо, которое бы открывалось одинаково хорошо во всех браузерах (в том числе мобильных) и почтовых программах, для того, чтобы ваши письма выглядели привлекательно, и вы не теряли клиентов. Это не последний пост, если возникнут проблемы с отображением, то позже либо поправлю этот, либо напишу продолжение. Так же буду признателен всем, кто поможет протестировать и выявить проблемы.

Проблемы при верстке html писем

Из-за того, что у почтовых сервисов нет общих правил отображения html писем, верстальщику приходится использовать правила верстки 90 годов. Некоторым к этому привыкать не нужно, но я, признаться, ни разу не прописывал стили внутри html документа, причем не просто внутри html документа при помощи <style></style>, а именно inline, для каждого элемента отдельно.

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

Еще одним сюрпризом оказалось то, что не многие почтовые сервисы не поддерживаю float и отступы margin и padding. Как вам? Представляете вы сверстали классное трехколоночное html письмо на основе div (ов), а у пользователя такая белиберда пришла, что он тут-же удалил его, так и не поняв, что от него хотят.

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

Как написали на одном из сайтов:

Придется вспомнить такие страшные вещи, как: Cellpadding, cellspacing, colspan

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

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

Еще, для меня стало проблемой то, что приходится постоянно обнулять многие значения, например, border у картинок, если она задана как ссылка.

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

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

Как создать html письмо

Для начала, я создал каркас-таблицу для всего содержимого письма, шириной в 100% и голубым фоном. В нем разместил две дочерние  таблицы. Одну для шапки (id=»header»), вторую для контента (id=»content»):

<!doctype html>
<html>
      <head>
         <meta charset="utf-8"/>
         <title>Рассылка новостей от Smartlanding.biz</title>
      </head>
<body>
      <table cellpadding="40" cellspacing="0" align="center" bgcolor="cee5f1">
         <tr>
            <td>
               <table cellpadding="20" cellspacing="0" align="center" bgcolor="ffffff">

               </table><!-- header -->
        
               <table cellpadding="0" cellspacing="15" bgcolor="ffffff" align="center">

               </table><!-- content -->
            </td>
         </tr>
      </table>
</body>
</html>

Как вы уже заметили, я задал cellpadding=»40″ для таблицы-обертки. Это внешний отступ. Отступ в 20px задал таблице, которая отвечает за шапку. И добавил внутренний отступ таблице, в которой будет располагается контент. Также, все таблицы выровнял по центру. Идем дальше…

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

<tr>
   <td><img src="https://smartlanding.biz/wp-content/themes/simply-vision/images/mail-logo.png" alt="логотип"/>
   </td>

   <td>
      <table cellpadding="0" cellspacing="0" align="right">
         <tr>
            <td align="right"><a href="https://twitter.com/smartlanding" target="_blank" title="Твиттер"><img src="https://smartlanding.biz/wp-content/themes/simply-vision/images/twitter1.png" alt="Я в Твиттере"/></a>
            </td>

            <td align="right"><a href="https://plus.google.com/104541820587912901962" target="_blank" title="Твиттер"><img src="https://smartlanding.biz/wp-content/themes/simply-vision/images/googlePlus.png" alt="Я в Google+"/></a>
            </td>

            <td align="right"><a href="http://vk.com/smartlanding_biz" target="_blank" title="Твиттер"><img src="https://smartlanding.biz/wp-content/themes/simply-vision/images/vk.png" alt="Я во Вконтакте"/></a>
            </td>
         </tr>
      </table><!-- social -->
   </td>
</tr>

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

Этим кодом я добавляю строку с одним столбцом, в таблицу «content» и помещаю в него картинку, с надписью «Smartlanding»:

<tr>
   <td>
      <img src="https://smartlanding.biz/wp-content/themes/simply-vision/images/mail-banner.png" alt="smartlanding" />
   </td>
</tr>

Сейчас письмо выглядит так:

Идем дальше. Сейчас нам нужно реализовать такую структуру:

Все это делается чтобы были отступы между контентом. Html код с контентом выглядит так:

<tr>
   <td>
      <table cellpadding="0" cellspacing="0" align="center">
         <tr>
            <td valign="top">
               <table cellpadding="0" cellspacing="0">
                  <tr>
                     <td bgcolor="d0d0d0"><img src="https://smartlanding.biz/wp-content/uploads/2014/09/skrytie-ssylki-javascript.jpg" /></td>
                  </tr>
                </table>
            </td>  

            <td></td>  

            <td valign="top">
               <h3><a href="#">Как закрыть внешние ссылки от индексации</a></h3>
            </td>
         </tr>
      </table><!-- Slogan -->
   </td>
</tr>

Теперь необходимо реализовать анонс статьи, делается это достаточно просто. 1 строка, 1 столбец и текст в нем:

<tr>
   <td>
      <table cellpadding="0" cellspacing="0" align="center">
         <tr>
            <td>
               <p>Привет ребята. Сегодня речь пойдет о том, как надежно закрыть внешние ссылки на своем лендинг пейдж для того, чтобы с нее не передавался вес, а оставался на вашей странице. Как вы, наверное, знаете, теперь, даже если вы закрыли ссылку атрибутом rel="nofollow", статический вес все равно передается, а следовательно убывает с вашей страницы.</p>
<a href="#" title="читать продолжение на smartlanding">Читать дальше</a>
            </td>
         </tr>
      </table><!-- TextBody -->
    </td>
</tr>

Теперь нужно создать структуру из 3 колонок. Так как мы не можем пользоваться float(ами), то придется сделать 5 колонок. 3 под контент с картинками (150px), а 2 — для того, чтобы задать отступ между ними (60px).

<tr>
 <td>
  <table cellpadding="0" cellspacing="0" align="center">
   <tr>
    <td valign="top">
     <img src="https://smartlanding.biz/wp-content/uploads/2014/10/utm-metki.png" />
    </td> 

    <td></td> 

    <td valign="top">
     <img src="https://smartlanding.biz/wp-content/uploads/2014/10/smart-novosti.png" />
    </td> 

    <td></td> 

    <td valign="top">
     <img src="https://smartlanding.biz/wp-content/uploads/2014/10/script-dlya-ab-testirovaniya.png" />
    </td>
   </tr>
  </table><!-- pageImages -->
 </td>
</tr>

Точно такую же разметку делаю для текста, заголовков:

<tr>
 <td>
  <table cellpadding="0" cellspacing="0" align="center">
   <tr>
    <td valign="top">
     <a href="#"> Как сделать UTM метки и для чего они нужны</a>
    </td>  

    <td></td>  

    <td valign="top">
     <a href="#"> Обновления на блоге и мини-отчет об оптимизации</a>
    </td>  

    <td></td>  

    <td valign="top">
     <a href="#"> Скрипт для АБ тестирования</a>
    </td>
   </tr>
  </table><!-- pageText -->
 </td>
</tr>

И теперь остается последний шаг, сделать footer. Я не стал создавать под него новую таблицу, а разместил в content, просто добавив новую строку и столбец:

<tr bgcolor="797979">
 <td>
   <p align="center"><a href="https://smartlanding.biz" title="Smartlanding">Smartlanding</a> | 2014</p>
 </td>
</tr>

Вот такое письмо получилось. Теперь предстоит куча тестов. Я планирую протестировать верстку в следующих почтовых сервисах и программах:

• gmail
• yandex
• rambler
• mail
• mozilla thunderbird
• outlook 2007
• outlook 2013
• the bat

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

Если у вас есть опыт создания html писем, напишите пожалуйста ваш комментарий и укажите на ошибки. Буду вам очень признателен. А на сегодня — все. Пока!

(Ознакомиться с предварительными тестами html письма в разных поисковых системах можно здесь)

О чем нужно подумать перед версткой HTML письма – Convead

Первое и самое главное – отписка от рассылки.

По Российскому (и не только) законодательству, в каждом письме обязательна должна быть возможность отписаться от рассылки. Отправка сообщений получателю, пожелавшему отписаться, должна быть немедленно прекращена.

Для этого в Convead есть специальный механизм отписки. Если вы создаете рассылку на основе стандартных шаблонов, то можете вообще об этом не думать – ссылка «Отписаться» зашивается в письмо автоматически. Для любителей собственной HTML-верстки писем в Convead предусмотрен механизм отписки. В каждое сообщение обязательно должна быть вставлена ссылка «Отписаться» с тегом *|UNSUB|* вместо которого при отправке автоматически подставляется ссылка на стандартную страницу отписки. Выглядеть в коде это может так:

<a href="*|UNSUB|*">Отписаться от рассылки</a> 

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

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

Корректное отображение в почтовых клиентах

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

Кодировка. Чтобы раз и навсегда избавиться от проблем с кодировкой, верстаем в UTF-8. В шапке прописываем:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

А про то, что символы в юникоде типа копирайта, длинного тире или кавычек-ёлочек нужно экранировать в сущности знают даже школьники 🙂

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

<table style=”border-collapse:collapse;” cellspacing=”0”>...</table> 

В отличие от cellspacing, cellpadding прекрасно работает во всех почтовиках. Именно им задается большинство отсупов в таблицах. В хитрых и сложных случаях их можно эмулировать при помощи изображений-распорок 1×1 px. С прозрачностью gif-распорок может возникнуть проблема в старых версиях The Bat! если вас это смущает – используйте gif-ки цвета фона.

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

Абзацы. Здесь есть варианты. Можно использовать стандартный тег абзаца <p>, но при этом отступы в разных почтовиках будут разными. Если вас это не смущает – используйте абзацы. Если размер отступов критичен, то можно эмулировать абзацы либо таблицей, либо тегом <span> с полуторной высотой строки. Делается это так:

Для таблицы:

<table cellpadding="0" cellspacing="0">    <tr>        <td>Текст абзаца</td>    </tr>    <tr>        <td><img src="blank.gif" alt=""></td>    </tr>    <tr>        <td>Текст абзаца</td>    </tr>        <td><img src="blank.gif" alt=""></td>    </tr>    <tr>        <td>Текст абзаца</td>    </tr></table>

Для <span>:

<span>    Текст абзаца    <br><br>    Текст абзаца    <br><br>    Текст абзаца</span>

Цвет, размер, шрифт и др. настраиваем опять же в самом HTML для каждого элемента текста. Никаких общих тегов в шапке. Важный момент – если после верстки письмо может попасть в WYSIWYG редактор и его будет редактировать неподготовленный человек, то лучше заворачивать текст в тег <span>. Тег <font> не стоит использовать, т.к. HTML-редакторы его все равно превратят в <span>, причем каждый – на свой вкус, и результат будет непредсказуемым.

Универсальные атрибуты CSS. Используйте только поддерживаемые всеми (ну или самыми популярными) почтовиками атрибуты CSS. Не лишним будет свериться с табличкой campaignmonitor

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

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

Во-вторых, если картинка осмысленная, например, логотип или фото товара, то ей лучше прописать alt, чтобы при отключенных изображениях пользователь смог понять, что там нарисовано и при желании его загрузить и посмотреть. Если картинка чисто оформительская, оставьте атрибут пустым alt=»». Совсем убирать alt у картинок не нужно. Отсутствие этого атрибута – негативных признак для спам-фильтров.

В-третьих, обтекание картинки текстом. Во многих почтовиках обтекание при помощи align, vspace и hspace работать не будет. Спасаемся таблицами.

В-четвертых, фоновые изображения. Последние новости из мира верстки писем говорят, что Gmail наконец-то научился адекватно отображать фоновые картинки. Ура! Но все равно, лучше ими не злоупотреблять. Еще живы старые почтовики, которые не любят фоновые изображения.

Цвета. Шестнадцатеричные коды цветов нужно указывать полностью. Т.е. #bbbпочтовики не понимают, нужно писать #bbbbbb. То же самое касается всех сокращенных конструкций типа border: 3px solid #bbb; Нужно писать так:

border-width: 3px; border-style: solid; border-color: #bbbbbb;

Ссылки. Всегда указывайте target = ”_blank” чтобы ваш сайт (или куда вы там хотите уводить пользователя из рассылки) не начинал открываться во вкладке почтового клиента. Определяя цвет ссылки, добавляйте important! чтобы почтовик не перекрашивал ссылку по своему усмотрению при наведении или клике. Если ссылка оформлена картинкой, установите border = ”0” для <img>, а для самого <a> пропишите text-decoration:none;

Мобильные почтовики. Чем дальше, тем чаще люди читают письма с мобильных телефонов. И ваши получатели тоже не исключение. Поэтому, при верстке писем нужно учитывать особенности мобильных почтовых клиентов.

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Во-вторых, для того, чтобы письмо адекватно смотрелось на маленьком экране смартфона, используется адаптивная верстка. Например, если в десктопной версии есть табличка с тремя товарами в ряд, то в мобильной (для разрешения экрана до 600 px) они должны выстраиваться один под другим. Не подходящие по размеру элементы можно скрывать при помощи медиа-запросов (Media Queries):

@media only screen and (max-width: 600px){    img[class=hidden], table[class=hidden], ui[class=hidden] {        display: none!important;    }}

Media Queries понимают только стандартные почтовики iOS Mail, Android и Windows Phone. Любители нестандартных клиентов Mail.ru, Gmail и т.д. увидят неадаптивную верстку.

Резюме

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

Наш совет – здравый смысл, минимализм и тестирование. И не забывайте про ссылку «Отписаться».

Полезные статьи по теме

Как создать html письмо для рассылки

Как сделать html-письмо для рассылки — Лидзавод

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

Чтобы успеть заинтересовать пользователя за 5-6 секунд, ваше письмо должно быть идеальным во всех планах, для чего важно тщательно подойти к созданию и верстке письма для рассылки. Но перед тем как начинать работать с кодом, познакомьтесь с проблемами, которые будут вас ждать.

Как избежать ошибок и не наделать глупостей

Если вы гуру верстки и знаете все современные фишки, мы вас огорчим — тут все это не работает. У сервисов рассылок просто нет единого формата отображения писем, поэтому использовать тот же float и отступы margin и padding не выйдет. Да, в теории вы получили красивое письмо из нескольких столбцов, но у получателя все эти столбцы смешаются и получится каша, которая быстро отправится в спам.

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

Поэтому создание html-письма для рассылки проводится по устаревшим уже таблицам с cellpadding и colspan.

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

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

Читай, как оформить рассылку в инструкции от LEADS.

• Создайте HTML-шаблон с помощью обычного блокнота (нужно сменить формат файла на html) или через специальное ПО, например, Dreamweaver от Adobe;

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

• Не забываем про общие правила: ширина письма не должна превышать 600 px, изображения должны быть сжаты (например, используй TinyPNG), чтобы письмо быстро загрузилось, а шрифт сделай больше 13, так как на «яблочной технике» могут быть проблемы с отображением.
• Заполняем ячейки текстом, одновременно форматируя каждый блок.
• Не забываем про верстку адаптивных писем.

Читайте также:  Как отказаться от контекстной рекламы и начать жить

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

При тестировании рассылки с Яндекс Почты сделайте следующее:

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

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

25 советов по созданию html email рассылки

Обновлено: 2 года назад

Разработка HTML шаблона письма — один из самых ключевых моментов в подготовке рекламной email рассылки. Ваше сообщение должно одинаково хорошо выглядеть в различных браузерах и почтовых клиентах, которые могут отличаться системой обработки HTML и CSS.

Хорошо отформатированное HTML письмо принесет значительно лучший результат, чем обыкновенный текстовый формат. Но когда письмо выглядит криво, нечитаемое, не функциональное, то отклика не будет как такового, так как фильтры и триггеры могут заблокировать письмо.

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

Я не буду расписывать зачем использовать тот или иной пункт, если это очевидно. Если у вас возникнут вопросы – пишите в комментариях.

ФОРМАТИРОВАНИЕ

1. Создавайте письма вручную.

Дизайнерские программы для работы с HTML, такие как FrontPage, DreamWeaver, HomeSite и различные «WYSIWYG» (What You See Is What You Get) редакторы полны недостатков. Практически все из них вставляют лишний html код (особенно FrontPage), который далее может по-разному отображаться в различных email программах. Поэтому по возможности пишите весь код вручную или чистите его вручную после использования специальных программ. Естественно это требует от вас хороших знаний HTML.

1. Избегайте вложенных таблиц
2. Не используйте фоновых рисунков, практически во всех email клиентах они не отображаются
3. Располагайте картинки на своем сервере, вместо включения их в письмо

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

1. Избегайте использования картинок 1х1 пикселей (для подгона размера элементов таблиц).
2. Не используйте CSS

CSS значительно упрощает работу со стилями для вебсайтов, но в случае HTMLписем это может повлиять на корректное отображение письма. Не используйте стили из отдельно прикрепленного файла. Наилучший вариант включить стили в headerчасть письма.

1. Не делайте ширину сообщений более 650 пикселей в ширину

В некоторых почтовых программах пользователям придется использовать горизонтальный скроллинг для чтения письма.

1. Размер сообщения должен быть не более 100 кб

USABILITY

1. Проверяйте HTML код на корректность. Для этого существует масса всевозможных отдельных утилит, встроенные чекеры в программах для работы с HTML и, естественно, W3C Validator.
2. Не используйте скрипты в письмах.

Письма могут быть заблокированы фильтрами.

1. Вставляйте в письмо ссылку на Web версию сообщения

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

1. Используйте alt теги для изображений.

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

1. Форматируйте верх письма таким образом, чтобы самая важная информация поместилась в первых 10 см
2. Используйте горизонтальное расположение текста, не используйте вертикальное
3. Объедините в письме текст и HTML, лучше использовать цвета и стили вместо картинок.

ФУНКЦИОНАЛЬНОСТЬ

1. Вставляйте большое количество ссылок на информацию на вашем сайте.
2. Навигация по вашему email сообщению должна совпадать с типом навигации на вашем сайте.
3. Вставляйте функциональность вроде «Отправить другу» с осторожностью

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

1. Добавьте возможность управления подпиской в письмо

Об этом я уже неоднократно писала.

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

Читайте также:  Email маркетинг vs Спам. В чем разница?

Многие получатели могут не иметь соответствующего ПО, поддерживающего данные форматы

ОФОРМЛЕНИЕ

1. Используйте в оформлении html письма корпоративные цвета.

Если у вашей компании есть фирменный набор цветов, то используйте именно их. Если нет, то выбирайте не более 2-3 оттенков, но помните, что читать черное на белом намного удобнее, чем наоборот.

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

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

1. Подбирайте максимально удобные для чтения шрифты

Желательно, чтобы кегель был 12-14 размера. Например, Verdana 12, Calibri 14.

1. Отредактируйте текст письма: выравнивание основного текста по ширине или левому краю, заголовков — по центру; подзаголовки выделяйте полужирным шрифтом и выравнивайте по левому краю; следите, чтобы между абзацами была пустая строка.
2. Не забывайте делать акценты на ключевых моментах письма

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

Для создания и отправки email рассылки рекомендую использовать ePochta Mailer, который обладает собственным WYSIWYG редактором, возможностью ручного редактирования HTML кода и просмотра полученного результата с помощью встроенного браузера.

(29 votes, average: 0,86 out of 5) Загрузка…

Как создать HTML шаблон для e-mail рассылки?

Продолжаем тему e-mail маркетинга и рассылок.

1. Самое сложное — это создание HTML шаблона письма для своей e-mail рассылки.
2. Сложность заключается в том, что Ваше письмо должно одинаково хорошо выглядеть (отображаться) во всех самых распространённых браузерах и почтовых клиентах.

Чем отличается письмо в HTML от письма обычным текстом? Текст обычного электронного письма может содержать только ASCII-символы.

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

Получается, что использование HTML шаблонов в e-mail маркетинге имеет ряд преимуществ:

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

Общие советы создающим e-mail рассылку в HTML

1. Примите и осознайте, что HTML шаблона письма для рассылки — это не сайт. Не нужно пихать туда флешки, огромные картинки, анамашки и проч проч.
2. Ширина сообщений должна быть 620 — 800 пикселей. Иначе некоторым получателям придется пользоваться горизонтальным скроллингом для чтения Вашего письма.
3. Создавайте письма вручную. Не нужно использовать все подряд «WYSIWYG» (What You See Is What You Get) редакторы. Практически все из них вставляют лишний html код, который далее может по-разному отображаться в различных email программах. Я рекомендую использовать http://bluegriffon.org/
4. Для разметки не стоит использовать DIV, используйте таблицы.
5. Не вставляйте важную информацию картинками, так как по умолчанию они могут не показываться многими почтовыми сервисами и клиентами.
6. Всегда указывайте ширину и высоту картинок.
7. Указывайте alt текст у всех картинок. Если у пользователя будет заблокировано отображение изображений в письмах, то он увидит альтернативный текст.
8. Не делайте вложенных таблиц.
9. Не используйте фоновые рисунки, обычно они не отображаются.
10. Выкладывайте картинки на своём сервере, не нужно включать их в письмо. Укажите в шаблоне письма ссылки на изображения.
11. Желателен небольшой размер сообщений (40 — 100 кб не больше).
12. Не используйте скрипты в письмах. Они не будут работать.
13. Можно вставить в письмо ссылку на полную версию сообщения. Если у адресата письмо не откроется, он всегда сможет его посмотреть на Вашем сервере.
14. Создавайте своё письмо из расчёта того, что наиболее важная часть информации должна попасть в первые 7 — 10 см.
15. Не бойтесь ставить ссылки на свой сайт.
16. Добавьте возможность «Отправить другу».
17. Обязательно добавьте возможность управления подпиской в теле письма.

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

Исчерпывающее руководство по составлению почтовых рассылок

Несмотря на то, что большая часть общения онлайн перешла в социальные сети, почтовые рассылки по-прежнему остаются важной частью любой маркетинговой кампании. Говоря о маркетинговых рассылках, первое, что приходит на ум, это не простые сообщения, а HTML-письма. Создание писем во многом похоже на создание простых веб-страниц, но следует учитывать некоторые ключевые различия. Также не забывайте о том, что электронное письмо это в большей степени средство навязывания, чем привлечения. Люди часто получают огромное количество электронных писем, и не всегда они приходят в удобное время (в отличие от вебсайта, который пользователи посещают в определенное время). А это значит, что у вас есть всего доля секунды, чтобы привлечь их внимание прежде, чем они перейдут к следующему письму. Не забывайте, что у вас есть всего лишь мгновение, чтобы привлечь внимание читателя, и составление эффективных электронных рассылок будет легче и приятнее.

Мобильные решения или провал

Поскольку большинство людей сегодня проверяет почту со своих мобильных устройств (почти половина всех писем читаются через мобильные приложения), бессмысленно тратить время на создание красивых рассылок, если они будут отображаться некорректно. В конце концов, если письмо выглядит плохо или совсем не читается, когда ваши подписчики проверяют почту со своего мобильника, то каковы шансы, что они проверят его позже за рабочим компьютером? Готов поспорить, ничтожно малы. В действительности большинство из них скорее всего удалит письмо, или, что гораздо хуже, отпишется от рассылки. Есть два решения для мобильных устройств. В первом случае вы можете создать письмо, изменяющее свои размеры и размеры элементов внутри в соответствии с размерами экрана пользователя. Этого будет вполне достаточно для простых дизайнов. Либо вы можете создать «отзывчивый дизайн» (responsive design), адаптирующийся к различным размерам экранов. Каждое из решений имеет свои преимущества и недостатки. Первый подход достаточно легко реализуем в плане кода, и вероятнее всего будет работать практически на любом устройстве. Но он подходит только для очень простых шаблонов, хорошо различимых даже при значительном уменьшении размеров экрана. Отзывчивый дизайн гораздо сложнее в разработке, и поддерживается не всеми мобильными браузерами (хотя, поддержка вероятнее всего будет улучшаться со временем).

Отзывчивый дизайн

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

1. Ваш макет должен быть достаточно узким, примерно в диапазоне от 500 до 600 пикселей. Это обеспечит правильное отображение письма и на настольных, и на мобильных устройствах и уменьшит вероятность того, что оно разъедется при изменении размеров.
2. Убедитесь, что выбран достаточно крупный шрифт. Обращайте внимание на минимальные размеры шрифтов для различных платформ, иначе ваш текст может оказаться больше задуманного размера и испортить макет. Например, минимальный размер шрифта для iOS-устройств – 13 пикселей.
3. Элементы по которым можно «тапнуть» должны быть пригодны для этого. Это значит, что вы должны сделать их достаточно большими и изолированными от других ссылок, чтобы пользователь мог легко активировать их с первой попытки (потому что, возможно, у вас не будет второй).
4. Не стесняйтесь использовать display:none чтобы скрыть ненужные элементы. То, что удобно на экранах настольных компьютеров или даже планшетов становиться раздражающим мусором на экране смартфона. «Меньше – лучше» – девиз для маленьких экранов.

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

Типографика

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

Для различных целей различные письма

Существует разнообразное множество видов писем которые вы можете отправлять вашим подписчикам (или разрабатывать для ваших клиентов в случае веб студии например). Каждое из них имеет собственное предназначение и каждое должно быть сделано так чтобы наилучшим образом удовлетворять ему.

Новостные рассылки

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

Например, рассылка от Plastyk с отличным притягательным дизайном.

Уведомления

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

Как пример письмо от Proper Labs. Объявление о запуске новой версии сайта.

Письма с транзакциями

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

Хороший пример письма с транзакцией – One Eyed Cat. Также оно отлично показывает, как оффлайновая компания может использовать email маркетинг.

Маркетинговые письма

Маркетинговые письма отправляются тогда, когда компания хочет наладить сотрудничество с вами. Они могут содержать в себе «специальное предложение», новый продукт или что-то подобное. Зачастую эти письма значительно отличаются от тех которые компания отправляет в других случаях. Эти письма предназначены специально для того чтобы подписчик совершил какое-либо действие. Это может быть например подписка, покупка или что-то подобное. Призыв к действию – основной и самый важный элемент такого письма, но другие элементы, естественно, должны поддерживать этот призыв, чтобы побудить читателей сделать нужное действие.

У Community просто отличное рекламное письмо, которое к тому же еще один хороший пример как традиционные бизнесы могут использовать email рассылки для привлечения клиентов.

Лучшие практики

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

Содержание важнее всего

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

Четкий призыв к действию

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

Тестируйте заблаговременно, тестируйте часто [прим. по аналогии с release early, release often]

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

Используйте текст «предварительного заголовка»

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

Указывайте ссылку на веб-версию

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

Не усложняйте

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

Шаблоны и фреймворки

Написание кода для HTML писем «с нуля» конечно возможно (посмотрите нашу предыдущую статью “How to design a responsive HTML email” чтобы узнать технические подробности), но использование фреймворка или заготовки может значительно ускорить процесс и сделать его более доступным для начинающего разработчика.

Cerberus

Cerberus это набор отзывчивых шаблонов для писем которые нормально отображаются как в мобильном Gmail так и в настольном Outlook. Вы можете использовать блоки кода по отдельности или объединяя их. Есть две версии: одна использует CSS3 Media Queries, а другая нет.

Ink

Ink это заготовка от Zurb для дизайна отзывчивых писем. Рассылки созданные на основе Ink работают на любых устройствах и клиентах. Даже в Outlook. Ink достаточно простой чтобы начать работать с ним, а также полностью документирован.

Набор шаблонов сделанных при помощи Ink

Страница Responsive email templates built on Ink – отличное место чтобы начать знакомство с данным продуктом. Там вы найдете четыре шаблона: простой одноколоночный, с большим баннером картинкой (hero-image), макет с боковой панелью (sidebar) и гибрид из последних двух (sidebar-hero).

Шаблоны отзывчивых писем

В дополнение на сайте Zurb есть раздел Responsive Email Templates, где можно найти шаблон новостной рассылки с большим баннером картинкой и полезную информацию по использованию шаблонов.

Образцы элементов для отзывчивых писем

Responsive Email Patterns – это набор образцов и модулей для создания отзывчивых писем. Он включает в себя шаблоны для макетов, навигации, списков и другого.

Действительно простой шаблон HTML письма

Really simple HTML email template является именно тем о чем говорит его название. Это супер простой шаблон HTML письма с очень простым дизайном. Это один столбец со встроенным призывом к действию и четкой целью.

Мастер Шаблонов

Template Builder от CampaignMonitor позволяет бесплатно создавать HTML шаблоны писем буквально за минуты. Результат будет полностью протестирован и подготовлен для мобильных. Вы сразу можете начать использовать его на сайте CampaignMonitor или просто скачать для любых дальнейших действий.

Бесплатные шаблоны

Free Email Templates от той же самой компании – это огромный набор бесплатных шаблонов которые можно скачать и использовать на свое усмотрение.

HTML Email Boilerplate v 0.5

HTML E-mail Boilerplate является хорошей отправной точкой для создания писем. Он не содержит дизайна или макета, что позволяет избежать многих проблем рендеринга в почтовых клиентах.

E-mail Boilerplate

E-mail Boilerplate от Emailology включает в себя все основы, необходимые для создания HTML писем. Исходный код содержащий CSS и HTML очень подробно документирован и даёт все нужные инструкции по использованию.

Antwort

Antwort предлагает вам идеально отзывчивые макеты для писем, которые адаптируются к самым различным экранам. Он поддерживает все основные почтовые клиенты, включая Outlook, и Gmail.

Новостные шаблоны от GraphicMail

GraphicMail предлагает около 100 бесплатных шаблонов. Для использования необходимо зарегистрировать бесплатный аккаунт.

Шаблоны от ThemeForest

ThemeForest предлагает множество премиум шаблонов. Стоимость колеблется от $6 до $19. Премиум шаблоны иногда бывают проще в использовании, а также могут содержать дополнительные функции, которые трудно найти в бесплатных.

Stamplia

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

Инструменты

Плагин e-Newsletter для WordPress

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

«Пуленепробиваемые» фоновые изображения

Bulletproof background images еще один сервис от CampaignMonitor. Это простой инструмент получения кода для фонового изображения ваших писем. Просто укажите URL желаемого фонового изображения, резервный цвет и то должно ли это правило быть применено ко всему телу письма или только для одной ячейки таблицы. В результате вы получите готовый HTML код который нужно вставить в свой шаблон.

«Пуленепробиваемые» кнопки

Еще один «пуленепробиваемый» сервис от той же самой компании. Bulletproof email buttons позволяет создавать красивые кнопки для ваших писем. Они идеально подходят в качестве элемента призыва к действию.

Litmus

Litmus представляет из себя набор инструментов для отслеживания и тестирования ваших рассылок. Он включает инструменты для предпросмотра писем, аналитики и тестирования на спам. Стоимость начинается от $79 за месяц, есть скидки при оплате за год.

Litmus Scope

Litmus Scope позволяет легко создать веб-версию любого электронного письма, которой, в последствии, вы можете поделиться с другими. Сервис доступен в виде приложения для Mac или букмарклета который может работать с любым почтовым веб-интерфейсом.

Примеры для вдохновения

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

Whalers

St. Theresa Auction

Online Store Guys

Inspirations Point

Everywhere

Sphere

Form Function & Class

Boden

Bon Appetit

Sevenly

Path

Zombie Survival Guide for Email Marketers

Fooda

Designer News

Charity: Water

EwerkNews

Interworld Plastics

Zehno

PSD Freebies

WalkieTalkie

Еще больше галерей для вдохновения

Really Good Emails сборник дизайнов по темам, многие из которых снабжены комментариями о том почему они хороши.

Email-Gallery дает вам возможность просматривать дизайны фильтруя их по цвету, типу и другим параметрам.

CampaignMonitor’s Email Inspiration позволяет делать выборку по количеству колонок, типу письма (объявление, рассылка, или приглашение).

Look What You Can Do – сайт от MailChimp. Содержит множество писем для вашего вдохновения отправленных при помощи этого сервиса когда либо.

HTML Email Gallery – галерея дизайнов в хронологическом порядке.

The Email Design Gallery – блог на Tumblr который собирает примеры отличных дизайнов из различных источников.

Beautiful Email Newsletters – разбитая по категориям галерея с функцией поиска.

Сервисы рассылок

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

ConstantContact

В ConstantContact цены начинаются от $20 за месяц для простых email кампаний. В эту цену входят возможности управления контактами и социального обмена. Более дорогие тарифные планы включают в себя дополнительные функции такие как отслеживание.

MailChimp

MailChimp предлагает бесплатный план “Entrepreneur” (предприниматель) который поддерживает отправку до 12 000 писем для 2 000 подписчиков. На платных тарифах вы сможете работать с куда более большими объёмами.

ActiveCampaign

В ActiveCampaign тарифы начинаются от $9 за месяц для 500 контактов. Есть специальные планы для предприятий с бухгалтерской отчётностью и другими сервисами.

GetResponse

Тарифы GetResponse стартуют от $15 в месяц для 1000 подписчиков. Есть скидки при оплате за год.

AWeber

Сервис AWeber позволяет начать работу всего с $1 за первый месяц. Далее $19 в месяц с неограниченным количеством сообщений для 500 подписчиков.

Amazon SES

Amazon SES (Simple Email Service) это почтовая служба только для отправки сообщений. Если вы уже являетесь пользователем Amazon EC2, то вы можете отправлять до 2000 писем в день бесплатно. В противном случае, сообщения тарифицируются по $0,10 за тысячу, с дополнительными сборами за передачу данных и вложений. Такие цены делают этот сервис одним из наиболее доступных.

Emma

Цены в Emma начинаются с $45 за неограниченный объем писем для 2500 абонентов. Также есть скидка в 20% для некоммерческих организаций и при годовой предоплате.

HubSpot Email

HubSpot Email предлагает множество инструментов для отслеживания и для получения еще большего количества подписчиков. Компания является частью большого сервиса HubSpot цены в котором начинаются от $200 в месяц за первые 100 контактов (плюс $100 в месяц за каждую 1000 контактов сверху), и выше.

GraphicMail

Тарифы в GraphicMail основываются либо на том сколько писем вы отправляете либо на том сколько у вас подписчиков. В первом случае цены начинаются менее чем с $10 за месяц, во втором с 25$.

Заключение

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

Изображение iPhone взято со страницы Kārlis Dambrāns.

Теги:

• адаптивный дизайн
• email маркетинг
• рассылки

Где находятся HTML-шаблоны писем?

HTML-шаблоны находятся в Блочном Email-конструкторе. GetResponse предоставляет десятки шаблонов в более чем 20 отраслевых категориях. Шаблоны обладают профессиональным дизайном и позволяют отправлять красивые рассылки и автоматические сообщения.

Как попасть в блочный конструктор:

1. Перейдите Главная панель>>Email-маркетинг.
2. На странице Управление рассылками нажмите Создать рассылку. Откроется страница, на которой можно выбрать Блочный Email-конструктор и Редактор HTML кода.
3. Выберите Блочный Email-конструктор.
4. В боковом меню нажмите Готовые шаблоны и выберите нужную категорию. Нажмите на шаблон, чтобы начать редактировать письмо.

Можно ли создавать собственные шаблоны без готового дизайна?

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

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

Можно ли использовать собственный HTML-шаблон для письма?

Для писем можно использовать собственный HTML-шаблон. Доступны три способа импорта шаблонов: вставка кода, из ZIP-архива и по URL-адресу.

1. Перейдите Главная панель>>Email-маркетинг и выберите Рассылки или Автоответчики.
2. Укажите основную информацию на начальном экране и нажмите кнопку Следующий шаг внизу, чтобы перейти к этапу Шаблон.
3. В боковом меню нажмите Импорт. Здесь можно импортировать собственный шаблон в систему GetResponse — вставить код, импортировать zip-файл или загрузить шаблон по URL-адресу.

Все сохраненные шаблоны можно найти на вкладке Мои шаблоны.

Примечание: Не вставляйте код из документов MS Word, Wordpad или любых других текстовых документов, кроме файлов Notepad. Это может привести к серьезным проблемам с редактором писем и дизайном письма.

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

Шаблоны для email-рассылок: как эффективно и быстро отправлять письма

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

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

Заранее подготовленный дизайн — это удобно. Можно разработать брендированный мастер-шаблон письма самостоятельно или обратиться в агентство [например, в Mailfit 🙃], но об этом мы уже рассказывали. Ещё вариант — использовать готовые шаблоны писем в платформах для отправки, адаптируя их под свой бренд. 

Зачем нужны шаблоны

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

1. Быстро собрать любую рассылку, ведь достаточно взять шаблон и поменять его наполнение.
2. Сэкономить время как email-маркетолога, так и других специалистов. Время и силы, потраченные на подготовку каждой новой рассылки, можно использовать куда эффективнее.
3. Минимизировать ошибки вёрстки. С шаблонами уже известно, как письма будут выглядеть при открытии — их уже протестировали в разных почтовых сервисах. 
4. Адаптировать рассылку к мобильной версии. В большинстве готовых шаблонов уже заложена адаптивная вёрстка и письма всегда будут корректно отображаться на смартфонах и других устройствах.
5. Поддерживать идентичность бренда. Это важно, потому что единый стиль коммуникации с подписчиками повышает лояльность.

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

Из чего состоит шаблон

Пазл, из которого сложится картина письма, состоит из стандартного набора блоков:

— шапка;

— баннер;

— контентные блоки;

— товарные блоки;

— СТА-кнопки;

— соцсети;

— подвал;

— техническая информация и ссылка отписки. 

Их можно комбинировать между собой, чтобы собирать бесконечное число писем под разные цели. А как именно будут выглядеть блоки и сколько их будет — зависит от компании и стратегии продвижения.

Например, для онлайн-журнала можно сделать несколько вариантов текстовых блоков: 

А интернет-магазину важнее иметь несколько товарных блоков:

Главное — адаптировать шаблон под фирменный стиль компании, чтобы сохранить идентичность бренда: добавить цвета, логотип, элементы и кнопки в стиле основного сайта.

Шаблон играет важную роль в построении имиджа бренда и успешном продвижении через email-маркетинг. Люди привыкают к тому, как устроены и выглядят письма, где располагается информация и кнопки. Так им проще сориентироваться, визуально быстрее считать важную информацию и принять решение о том, кликнуть на ссылку в письме или закрыть его.

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

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

Как и где сделать 

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

Если нужно быстрее — стоит обратиться в агентство. Или выбрать один из готовых в платформе для отправки рассылок — так называемом конструкторе писем.

Где ещё можно собрать рассылку

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

— сколько вариантов уже готовых шаблонов есть в сервисе;

— легко ли изменить дизайн шаблона;

— можно ли загрузить собственный;

— удобство редактора по созданию письма;

— есть ли встроенные проверки на ошибки;

— количество интеграций с платформами для отправки;

— наличие техподдержки и обучения по работе с сервисом.

А теперь расскажем подробнее об этих платформах.

ESP-платформы

Для работы с шаблонами прямо внутри сервиса для отправки рассылок. 

GetResponse

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

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

eSputnik

Сервис массовых и автоматических рассылок с поддержкой омниканальных сценариев, обширным email-функционалом и возможностями. База из 300+ шаблонов регулярно пополняется, а благодаря работе редактора по принципу drag-and-drop шаблон можно видоизменять под свой дизайн и нужды. 

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

SendPulse

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

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

Unisender

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

Что классно: есть возможность персонализировать письма и сделать всё сразу в одном сервисе. 

Специализированные сервисы и конструкторы

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

Stripo

В базе из 750+ готовых адаптивных HTML-шаблонов можно найти варианты как для регулярной рассылки, так и под особые случаи и праздники. Большинство шаблонов интерактивные и с поддержкой AMP. Это позволяет редактировать нужные элементы шаблона, а потом добавить свой интерактивный контент.

Что классно: экспорт готового письма в 40+ ESP и почтовиков, в том числе Mailchimp, GetResponse, Campaign Monitor, UniSender, eSputnik и другие. 

Letteros 

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

Что классно: интеграция с ESP, экспорт готового шаблона, проверка адаптивов и дополнительные инструменты — проверка орфографии, типограф и оптимизатор картинок — уже встроены в платформу.

Как работать с шаблонами и собирать письмо в Letteros

Остановимся подробнее на последнем варианте сервиса по работе с шаблонами и расскажем принцип сборки на примере модульного редактора email-писем. 

Кстати, вот ещё кое-что из возможностей платформы:

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

А дальше — всё просто. В панели администратора находите вкладку «Шаблоны», наводите курсор на неё и нажимаете кнопку «Создать письмо».

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

Редактор работает по принципу drag-and-drop: выбираете нужный блок из списка и перетаскиваете его в рабочее поле. Таким же перетаскиванием можно менять порядок блоков в письме. Вёрстка при этом никуда не «поедет», так как всё уже адаптировано.

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

Когда макет письма собран, рекомендуем воспользоваться двумя полезными встроенными инструментами: проверкой ссылок и текста. 

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

Как видите, ничего сложного — даже не нужно владеть какими-то специальными знаниями. 

Советы напоследок

Без рекомендаций здесь не обойтись, поэтому вот вам несколько полезных советов о том, как создать хороший шаблон для рассылок.

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

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

Добавьте блоки, релевантные деятельности компании. Например, для e‑commerce важно добавить товарные блоки и заточить рассылку под продукт. А для онлайн-журналов или IT-компаний больше понадобятся текстовые и контентные блоки, чтобы давать подписчикам максимально информативную пользу. 

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

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

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

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

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

ПОЛУЧИЛОСЬ!
Скоро вы начнете получать нашу рассылку

Гайд по созданию шаблонов писем для рассылки

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

Знаете ли вы, что в июне пользователи искали шаблоны писем для рассылки 12 100 раз? Это демонстрирует, что многие email-маркетологи хотят отказаться от шаблонов email по умолчанию, которые им предлагают ESP платформы в своей библиотеке.

Ребята из Uplers подготовили честную статью-ответ на вопросы email-маркетологов, связанные с созданием email шаблонов в 2020 году. Надеемся, после прочтения ваши проблемы исчезнут. Мы перевели этот гайд специально для вас.

Цель статьи

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

Что такое шаблон для email-рассылки

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

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

Разве это не восхитительно?

Давайте начнём с текстовой версии email-письма и поймём её значение в современном email-маркетинге.

Что такое текстовая версия email-письма

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

Особенности текстовых версий писем заключаются в следующем:

• В некоторых почтовых клиентах, таких как Outlook и Gmail, необходимо наличие обычных текстовых версий HTML-писем.
• Некоторые почтовые клиенты не поддерживают HTML-письма, поэтому нужна текстовая версия, чтобы подписчики получили необходимую информацию.
• Некоторые люди до сих пор предпочитают обычные текстовые email-письма. Текстовым письмам не хватает блеска HTML-писем, и поэтому им приходится полагаться на сильную тему для улучшения показателя Open Rate.

Теперь давайте посмотрим, что из себя представляют HTML-письма и как создать HTML письмо.

HTML-письмо: что это такое и какие варианты существуют

HTML-письмо — это усовершенствованная версия обычного текстового email-письма. Независимо от того, какую вёрстку вы используете, табличную или div’ами, структуру HTML-письма можно легко менять. За счёт этого реально создавать привлекательные email-рассылки, подобные этой от бренда Uniqlo:

Преимущества HTML-писем:

• Большинство брендов любят создавать веб-сайты, email-рассылки и даже лендинги в едином стиле. HTML-вёрстка помогает им в этом.
• Можно прикреплять на кнопки гиперссылки.
• В HTML шаблонах писем можно использовать изображения.
• Если вы отправляете письмо в HTML-формате, вы можете отслеживать эффективность своей email-кампании.
• Если соблюдать все правила, HTML-письма скорее всего обойдут спам-фильтры.

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

Готовый шаблон электронного письма против шаблонов на заказ: что выбрать

ESP платформы имеют библиотеку с готовыми шаблонами email-писем, которые вы можете использовать в своих рассылках. Для начинающих маркетологов это полезно. Кроме того, готовые шаблоны для писем — это отличная возможность быстро подготовить материалы для email-кампаний к отправке. Такие шаблоны чаще всего бесплатны или доступны за небольшую плату — это отличный способ снизить общую стоимость email-канала.

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

Теперь, когда мы разобрались в основных понятиях электронных писем, давайте перейдём к реальным действиям.

Начало работы с шаблонами для email рассылки

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

Определите, какой тип email-писем вы хотите рассылать и какие цели вы планируете достичь с их помощью

Есть как минимум пять типов шаблонов для писем для формирования customer journey, а для e-commerce сферы как минимум шесть.

1. Приветственное письмо

Это электронное письмо-благодарность, которое отправляется подписчику в ответ на его подписку. Текст email-письма должен представлять ваш бренд, а call-to-action должен сподвигнуть подписчика заполнить свой профиль или обновить свои интересы в личном кабинете.

2. Информационная рассылка

Это периодическое email-письмо, которое обучает и информирует подписчиков о вашем бренде и его продуктах или услугах. Цель таких писем – побудить подписчиков совершить покупку у вас.

3. Рекламные или продающие рассылки

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

4. Транзакционные рассылки

Транзакционные письма направлены на подтверждение покупки, которую оформил подписчик. Оно отправляется в момент оплаты заказа. Такая рассылка может быть использована для продвижения соответствующих продуктов. По нашим наблюдениям, в подобных рассылках соотношение транзакционного контента и рекламного было 80% к 20%.

5. Реактивационная рассылка

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

6. Рассылка для e-commerce «Брошенная корзина»

Существует много причин, из-за которых даже самый горячий подписчик может отказаться от своей покупки на полпути. Наличие «отказников» не самый лучший сигнал для вашего бизнеса. Чтобы уменьшить количество брошенных корзин, нужна рассылка подобного типа. Она будет привлекать внимание «отказников» и возвращать к оформлению заказа. Такой тип рассылки обязателен для сферы e-commerce.

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

Где найти примеры email-писем и получить вдохновение

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

Из чего состоит email-письмо

В то время как дизайн email-рассылки должен визуально очаровывать вашего подписчика, наполнение email-письма — это то, благодаря чему они узнают о главной мысли, которую вы хотите им передать. Знаете ли вы, что ваши рассылки на самом деле творят волшебство ещё задолго до того, как письмо открывается? Мы говорим сейчас о «сюжетных линиях».

Email-письмо содержит следующие элементы:

• Прехедер и тема письма: это первое, что видят ваши подписчики. 80% сообщений электронной почты открывается в зависимости от темы. Тема письма намекает на то, о чём пойдёт речь в письме, т. е. цель рассылки должна быть отражена здесь. Убедитесь, что вы не вводите подписчиков в заблуждение.
• Тело письма: разговор, начатый по теме, продолжается в разделе «тело письма». Ваша рассылка предоставляет жизненно важную информацию и направляет подписчика на сайт или лендинг для получения дополнительных сведений. Тело письма должно быть коротким и чётким.
• Раздел с call-to-action: заключительный раздел, в котором проверяется эффективность вашего письма. Кнопка с call-to-action имеет эффективный текст и привлекательный дизайн. CTA должен подталкивать к действиям, например: «Попробуйте бесплатную версию», чтобы читатель захотел щёлкнуть по кнопке и совершить то, что от него требуется.
• Футер: нижняя часть email-письма или, проще говоря, ваша подпись. Футер – это часть, где небольшое количество маркетинга может оказаться эффективным. Правда, большинство email-маркетологов не используют футер должным образом.

Форматирование и выравнивание текста важны, так как они помогают подписчикам читать ваши письма.

Персонализация в email-рассылках

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

Как создать шаблон email-письма: предварительный этап

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

• Гайдлайн вашего бренда
• Изображения ваших продуктов
• Целевая аудитория и портрет покупателя
• Будете ли вы проводить A/B-тестирование своих рассылок
• Будет ли мобильная версия
• Будет ли веб-версия (обсуждается позже)
• Гиперссылки на сайт или лендинги
• Будет ли письмо интерактивным. Если да, что в нем будет.

Как создать шаблон для письма

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

Что включает в себя дизайн email-письма

Любой дизайн электронной почты состоит из пяти элементов:

• Макет письма: он диктует размещение и иерархию различных элементов в вашем письме. Хороший макет помогает подписчику проще воспринимать содержимое письма и передаёт суть послания. Есть два популярных стиля макета: с одним столбцом и с двумя. Одностолбцовый макет — элементы письма помещаются в один столбец для минимального напряжения глаз. Этот макет предпочтителен при создании мобильной версии email-писем, так как при его конструировании используется небольшая ширина экрана. Это делается для того, чтобы разместить все элементы письма без помех.

Макет из двух столбцов имеет элементы email-письма, разделенные на два разных столбца. Как правило, элементы письма размещаются по зигзагу, поскольку подписчики читают контент по форме «F», и зигзагообразный макет в сочетании с большим количеством пробелов направляет взгляд подписчика.

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

• Шрифты и типографика: текст в email-письме передает основную мысль, и то, как вы преподносите сообщение, также играет важную роль. Поэтому внимание к типографике и форматированию необходимо. Разные шрифты вызывают разные эмоции в нашем сознании, следовательно, необходимо выбрать правильный шрифт, который с большей вероятностью установлен у ваших клиентов.
• Цвет: как и типографика, разные цвета передают различные эмоции. Цвета фона, кнопки call-to-action, гиперссылок, изображения являются частью гайдлайна бренда и определяют индивидуальность рассылки.
• Образы и визуальные носители: изображения зачастую порой передают намного больше информации, чем текст. Используя текст и визуальные эффекты в письмах, вы подталкиваете подписчиков больше взаимодействовать с брендом, так как email-письма не теряются за большим количеством слов. Это особенно важно для онлайн-ритейла и e-commerce, где визуальное изображение продукта усиливает его описание.
• Кнопка call-to-action: красивая точка, которая позволяет измерить эффективность вашего письма. Кнопка с call-to-action эффектно завершает ваше послание. Обычно у письма ограниченный формат и не всегда получается передать, что вы планировали, и как раз для этого нужна кнопка с call-to-action. Она перенаправляет подписчика на соответствующую страницу сайта, поэтому никогда нельзя упускать её из внимания при разработке дизайна письма.

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

Почему необходимо придерживаться гайдлайна

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

Email-рассылки, при создании которых придерживаются гайдлайна бренда, являются более узнаваемыми. Подобные письма формируют доверие у подписчиков к компании. К сожалению, не все маркетологи соблюдают это правило. По опросу Litmus 38% опрошенных брендов не придерживались своего гайдлайна.

Почему внедрение визуальной иерархии поможет увеличить конверсию?

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

В этом примере от inVision видно, что правильное форматирование текста и семантические теги создают текстовую иерархию, которая помогает правильно визуализировать письмо.

Давайте рассмотрим два элемента, которые иногда располагаются вместе, а иногда и в крайних точках.

1. Изображение-герой — стоковое фото или иллюстрация

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

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

Заглавные фотографии в основном используются в онлайн-розничной торговле, e-commerce, в гостиничном и туристическом бизнесах.

Иллюстрации в качестве изображения героя в основном используются в отраслях, предоставляющих IT услуги, SaaS или digital-агентств.

2. Размещение кнопки с call-to-action

Теперь переходим к самому важному. Как мы уже говорили ранее, кнопка call-to-action является показателем того, насколько хорошо у email-письма получилось превратить подписчиков в клиентов. Большинство маркетологов считают, что ни один подписчик не захочет нажать кнопку call-to-action, не узнав подробности предложения, которые указаны в письме. Однако в этом присутствует и свой недостаток — есть вероятность того, что не все люди дочитают письмо до конца, и не все вернутся к началу, чтобы нажать на кнопку. Из-за этого показатель CTR может сильно упасть, особенно если в нижней части письма нет повторной кнопки с call-to-action. Для того чтобы убедиться, правильно ли вы расположили кнопку с призывом к действию, проведите A/B-тестирование.

С другой стороны, маркетологи получили очень высокие показатели CTR от расположения кнопки с call-to-action в первой половине письма.

Мы считаем, что если ваше email-письмо длиннее, чем два прокручивания вниз, то следует добавить еще одну кнопку с call-to-action в нижней части письма.

Вместо заключения

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

Пошаговое руководство по созданию собственного электронного письма в формате HTML

< o: PixelsPerInch> 96

Образец тестового письма | Просмотреть в Интернете < td class = «em_hide» style = «line-height: 1px; min-width: 700px; background-color: #ffffff;»> Это образец электронного письма, который должен быть помещен в один абзац & nbsp; Это абзац 2 с размером шрифта 18 пикселей и цветом шрифта # fbeb59 с межстрочным интервалом 15 пикселей & nbsp; Это абзац 3 с размером шрифта 18 пикселей и цветом шрифта # fbeb59 с межстрочным интервалом 25 пикселей и прописными буквами & nbsp; & nbsp; ЗАЯВЛЕНИЕ О КОНФИДЕНЦИАЛЬНОСТИ | УСЛОВИЯ ОБСЛУЖИВАНИЯ | ВОЗВРАТ © 2017 Название компании.Все права защищены. Если вы не хотите больше получать от нас электронные письма, отказаться от подписки & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Как работает электронная почта в формате HTML | Справочник по дизайну электронной почты Перед тем, как приступить к разработке, кодированию и отправке электронной почты в формате HTML, вы должны ознакомиться с тем, как это работает, в том числе с инструментами, необходимыми для его правильной работы.Вот некоторая справочная информация, которую должен знать каждый дизайнер электронной почты и маркетолог. Составной / альтернативный формат MIME Самое важное, что нужно знать об электронной почте в формате HTML, — это то, что вы не можете просто прикрепить HTML-файл и несколько изображений к сообщению, а затем нажать кнопку «Отправить». В большинстве случаев приложение электронной почты получателя нарушает все пути к файлам изображений, перемещая изображения во временные папки на жестком диске получателя. Вы также не можете просто вставить весь свой код в свое почтовое приложение.Большинство почтовых приложений по умолчанию отправляют сообщения в текстовом формате, поэтому HTML не обрабатывается. Ваши получатели просто увидят весь этот необработанный исходный код, а не красивое электронное письмо, которое вы им сделали. Вместо этого вам нужно отправить электронное письмо в формате HTML с вашего сервера в альтернативном формате MIME, состоящем из нескольких частей. Это означает, что ваш агент передачи почты объединяет ваш HTML-код и текстовую версию сообщения в одно электронное письмо. Таким образом, если получатель не может просмотреть ваше красивое электронное письмо в формате HTML, будет отображаться старая добрая надежная текстовая версия вашего сообщения.Это занудная штука, поэтому многие люди портят ее, когда пытаются сами отправить электронное письмо в формате HTML. Вам нужно либо запрограммировать сценарий для отправки электронной почты в многоэлементном альтернативном формате MIME, либо использовать внешнего поставщика (например, Mailchimp) для доставки электронной почты для вас. Доставка электронной почты в формате HTML Многие новички в области электронного маркетинга совершают ошибку, создавая списки пересылки или отправляя копии сообщения всем своим клиентам. Это вызывает всевозможные проблемы, особенно когда клиент нажимает «ответить всем».«Во-первых, нет возможности отслеживать или персонализировать такую ​​большую группу. И самое главное, это выглядит непрофессионально и безлично, когда получатели могут видеть весь ваш список других получателей. (И все это без упоминания проблем конфиденциальности, связанных с раскрытием таких адресов электронной почты.) Вот почему, когда система электронного маркетинга, такая как Mailchimp, отправляет вашу кампанию, мы берем ваше сообщение и отправляем его по одному каждому получателю в вашем списке (действительно, очень быстро).В отличие от вашего рабочего компьютера, подключенного к вашему местному интернет-провайдеру, который, вероятно, имеет стандартный месячный лимит пропускной способности, поставщики услуг электронного маркетинга используют выделенные почтовые серверы, способные отправлять сотни тысяч электронных писем в час. Рекомендации по доставке электронной почты При массовой рассылке электронной почты необходимо учитывать ряд факторов, связанных с доставкой. Например, если вы отправляете сообщения со своего собственного сервера, ваш интернет-провайдер может ограничить количество исходящих писем или закрыть вашу учетную запись, если вы отправите слишком много сообщений слишком быстро. Они также могут отключить вас, если вы превысите свой месячный лимит пропускной способности. Брандмауэры электронной почты и интернет-провайдеры, которые получают ваши кампании, не любят получать тонны писем с одного IP-адреса одновременно (если они обычно не получают тонны писем с этого IP-адреса). Поэтому, если вы отправляете только случайные рассылки по электронной почте со своего IP-адреса, вы можете ограничить доставку или распределить их по нескольким IP-адресам, чтобы избежать случайной блокировки. Сервисы электронного маркетинга обычно разбивают вашу кампанию на части и рассылают ее по множеству разных IP-адресов, чтобы избежать этой проблемы. Если вы отправляете электронные письма из почтовой программы на компьютере, скорее всего, вы подключаетесь через местного интернет-провайдера. Если у вашего интернет-провайдера не настроен выделенный IP-адрес, вы, вероятно, отправляете электронные письма с динамического IP-адреса. Интернет-провайдеры и фильтры спама не любят получать много писем с динамического IP-адреса, потому что он выглядит как взломанный домашний компьютер. Если вы не пользуетесь услугами такого поставщика услуг электронной почты, как Mailchimp, вам всегда следует отправлять сообщения с выделенного IP-адреса. Использование CSS в электронных письмах HTML: Реальная история Стоит ли вообще отправлять электронные письма в формате HTML? Это, безусловно, дискуссионный вопрос, но в конечном итоге я говорю, что если у вас есть сообщение, которое, по вашему мнению, будет полезно от красиво оформленного электронного письма, вы должны пойти на это.Если вы просто хотите сделать это, потому что все остальные в вашем квартале тоже это делают, не делайте этого. Если вы решите это сделать, то это то, что я считаю пятью золотыми правилами электронных писем в формате HTML: Отправляйте электронные письма только тем, кто решил их получать. Обязательно создайте его так, чтобы он выглядел как можно лучше во всех почтовых клиентах. Не переусердствуйте. Еженедельно, наверное, слишком часто. Отправить альтернативный текст в виде обычного текста. Предложите и откажитесь от ссылки и соблюдайте ее. Обновление: этой статье около десяти лет, когда я ее обновляю. Наверное, уже не лучший источник информации. Хорошим источником информации о CSS в HTML-письме является руководство Campaign Monitor. НАПИШИТЕ свой адрес электронной почты, прежде чем создавать его Первое, что вам нужно сделать, это написать текстовую версию вашего электронного письма. Если вы сделаете это в первую очередь, пока вы еще свежи, это приведет к лучшему тексту, лучшему плану дизайна и, в конечном итоге, лучшему электронному письму. Вам все равно нужно будет это сделать, поскольку одно из золотых правил — отправлять текстовую альтернативу электронным письмам в формате HTML.Отправка как обычного текста, так и электронного письма в формате HTML в одном комбинированном электронном письме называется составным / альтернативным форматом электронной почты или MIME . Большинство почтовых клиентов поддерживают его, это то, что появляется, когда вас спрашивают, хотите ли вы отправить его в виде обычного текста, HTML или того и другого, как на этом снимке экрана Thunderbird: Пара быстрых советов по работе с обычным текстовым электронным письмом: жестко заключите строки в 60 символов и напишите полный URL вместо использования тегов привязки. Сначала рассчитайте наименьший общий знаменатель. После того, как текстовая версия вашего электронного письма будет готова, начинайте думать о дизайне. Каждый почтовый клиент, читающий вашу электронную почту, будет иметь свои собственные правила работы с электронными письмами в формате HTML, поэтому вам придется проектировать с наименьшим общим знаменателем. Думаете, вам сложно тестировать сайты в 4-5 разных браузерах? С электронной почтой дела обстоят намного хуже. Вот неполный список: AOL (несколько версий), Comcast, Earthlink, Gmail, Hotmail, Lotus Notes, Mail.com, Outlook (несколько версий), Thunderbird, Windows Live, Yahoo !, Mail.приложение. Не говоря уже о мобильных клиентах. Предполагая, что у вас есть довольно большой список, который вы отправляете, и вы не знаете, какие типы почтовых клиентов они используют, вам нужно подумать о том, что вы не можете сделать больше, чем то, что вы можете. Чего нельзя делать: Включите раздел с Видео в тесте электронной почты Видеоконтент Резервное содержание Альтернативы видео в электронном письме Вполне возможно использовать мощь видео без фактического встраивания видеоконтента в электронное письмо. Вот несколько наиболее распространенных способов решения проблемы ограниченной видеоподдержки специалистами по электронной почте. 1. Изображение с ложной кнопкой воспроизведения Самый простой способ воспроизвести впечатление от реального видео в маркетинговом письме - просто использовать изображение с изображением кнопки воспроизведения поверх него.Это может быть так же просто, как сделать снимок экрана самого видеоплеера. Дизайнер также может создать собственную графику для более изысканного вида. Ложные кнопки воспроизведения в электронных письмах не должны вводить в заблуждение. Они являются визуальным индикатором видео или аудиоконтента на другом конце клика. Компания Packlane использовала яркую красочную кнопку воспроизведения, чтобы побудить подписчиков щелкнуть и просмотреть видео в своих сообщениях электронной почты. Через Really Good Emails 2. Анимированные GIF-файлы Вместо статического изображения многие маркетологи электронной почты используют GIF в качестве заполнителя для видео.Это дает возможность привлекать внимание к вашей электронной почте гораздо более надежным способом, чем встроенное видео. В отличие от встроенных видео, большинство почтовых клиентов поддерживают анимированные GIF-файлы. Итак, один из вариантов - превратить важный сегмент вашего видео в GIF с помощью программного обеспечения, такого как EZGif или Adobe Spark. Но даже на GIPHY.com есть бесплатный инструмент для превращения видео в GIF. Команда подкаста The Lifelong Customer использовала короткий отрывок интервью с включенными подписями , который создавал ощущение видео и побуждал подписчиков щелкать мышью и просматривать контент.В качестве бонуса на GIF-изображении также есть ложная кнопка воспроизведения. При использовании GIF в почтовом маркетинге следует помнить о нескольких вещах. Они могут вызвать медленную загрузку, если они слишком велики или вы используете слишком много в письмах. Кроме того, в некоторых случаях файлы GIF в Outlook могут быть проблематичными. 3. Анимированные кнопки Еще одна опция для добавления движения и индикации видеоконтента - это анимированная графика кнопки воспроизведения. Их можно размещать поверх миниатюр видео или использовать как отдельные графические элементы с призывом к действию, как показано ниже. Кнопка воспроизведения может исчезать, двигаться или вращаться, но не становитесь слишком сложными или яркими. Вам нужно ровно столько, чтобы привлечь внимание, но не быть неприятным. Вы также можете добавить анимированную кнопку, стрелку или другой символ, указывающий прямо на видео. Есть масса творческих способов сделать это. Например, Rentalcars.com включил пунктирную стрелку, указывающую на их видео, давая подписчикам знать, что они могут «нажать, чтобы воспроизвести». Они также сделали видео супер визуально привлекательным, заправив его в праздничную открытку. Via Really Good Emails Стоит ли встроенное видео в электронную почту? Многие маркетологи по электронной почте хотят сделать свои кампании более интерактивными. По мере развития электронной почты становится возможным делать больше в почтовом ящике. Это включает в себя все: от опросов и заполнения форм до добавления товаров в корзину. Хотя использование видео в электронных письмах HTML все еще не пользуется широкой поддержкой, быть пионером в этой области может иметь свои преимущества. Все сводится к вашей стратегии, а также к времени и ресурсам, которые вы хотите потратить на встраивание видео в электронные письма. Когда вы используете Email on Acid Email Analytics, вы можете видеть, какие клиенты используют подписчики для просмотра ваших кампаний. Если достаточно большая база ваших подписчиков использует почтовые клиенты, поддерживающие видео, возможно, стоит немного поработать. Но если нет - есть еще множество способов воспользоваться видеоконтентом и усилить его с помощью электронного маркетинга. Независимо от того, что вы решите сделать, критически важно проверять электронную почту и просматривать ее на основных клиентах и ​​устройствах. Платформа Email on Acid предназначена для того, чтобы помочь вам в совершенствовании электронной почты.Узнайте, работают ли ваши резервные копии, и посмотрите, что видят подписчики, когда вы вставляете видео в электронные письма. Plus, Campaign Precheck включает в себя множество других функций, которые помогут вам совершенствовать каждое электронное письмо перед отправкой. Попробуй сам! Последний раз статья обновлялась в сентябре 2021 года. Ранее она обновлялась в августе 2018 года и декабре 2017 года. Впервые она была опубликована в 2013 году. Автор: Электронная почта от Acid Team В отдел контента Email on Acid входят специалисты по цифровому маркетингу, создатели контента и ценители электронной почты.Присоединяйтесь к нам в LinkedIn, подписывайтесь на нас в Facebook и пишите в Твиттере на @EmailonAcid в Twitter, чтобы узнать больше о приятных вещах и интересных новостях по электронному маркетингу. Автор: Электронная почта от Acid Team В отдел контента Email on Acid входят специалисты по цифровому маркетингу, создатели контента и ценители электронной почты.Присоединяйтесь к нам в LinkedIn, подписывайтесь на нас в Facebook и пишите в Твиттере на @EmailonAcid в Twitter, чтобы узнать больше о приятных вещах и интересных новостях по электронному маркетингу. Фонд для электронной почты | Адаптивная электронная почта от ZURB Заставить электронную почту меньше сосать Мы знаем, что создавать электронные письма в формате HTML сложно, особенно если они являются адаптивными.Вот почему мы создали Фонд электронной почты. Избегайте сложной разметки таблиц и противоречивых результатов. Используйте Foundation for Emails, чтобы тратить меньше времени на программирование писем и больше времени на другие вещи, например на создание потрясающих продуктов. Электронный маркетинг полезен для вашего бизнеса. На самом деле это своего рода товар с выплатой 44 долларов за каждый потраченный 1 доллар. А с таким мощным и простым в использовании инструментом, как Foundation for Emails, вы сможете добиться потрясающих результатов. 54% всех писем открываются на мобильном устройстве, поэтому вам нужны шаблоны, которые будут оптимизированы как для настольных, так и для мобильных почтовых клиентов. 75% из 900 миллионов пользователей Gmail получают доступ к своим аккаунтам через мобильные устройства. Создавайте адаптивные электронные письма, которые отлично смотрятся на любом устройстве и во всех основных почтовых клиентах, даже в Outlook! Делаете маркетинговое или рекламное письмо? Капельная кампания? Транзакционная электронная почта? Foundation for Emails - это фреймворк, который поможет вам легко создавать электронные письма для любого случая использования.Выберите один из 10 адаптивных HTML-шаблонов, которые протестированы на мобильных и настольных версиях Outlook, Gmail, Apple Mail и других. Узнайте, как можно использовать Foundation for Emails для: Адаптивная сетка для любого макета Делайте больше с сеткой, предназначенной для работы на любом устройстве. Сделайте сетку подходящей для вашего контента, а не наоборот. Теперь вы можете кодировать электронные письма, как вы кодировали веб-сайты, с сеткой, предназначенной для работы на любом устройстве.Создавайте блоки контента одинакового размера, которые отлично подходят для галерей изображений или списков продуктов. Ваш макет аккуратно складывается, поэтому ваш контент доступен на небольших экранах. Такие вещи, как отступы и ширина строки, автоматически масштабируются, чтобы соответствовать мобильному устройству. Общие шаблоны пользовательского интерфейса для более быстрого создания Вы можете использовать эти шаблоны пользовательского интерфейса в своих проектах, чтобы быстро привести электронную почту в форму. Мы добавили кнопки, меню, сетки блоков, выноски, типографику и миниатюры.В дополнение к этому такие помощники, как Visibility и alignment, помогут вам быстрее приблизиться к готовому продукту, чтобы вы могли тратить меньше времени на кодирование. Быстро создавайте стильные электронные письма с Sass От цветов и размеров шрифта до интервалов и количества столбцов, Sass позволяет вам полностью контролировать общие стили и устраняет необходимость в повторяющемся и трудоемком CSS. Изменив несколько переменных Sass, вы можете получить нужный внешний вид всего электронного письма за считанные минуты, что позволит вам тратить больше времени на копирование или воронки конверсии. ZURB MASTER CLASS Адаптивные электронные письма В этом онлайн-курсе вы узнаете, как быстро разрабатывать и разрабатывать адаптивные электронные письма, которые красиво смотрятся практически на любом экране, браузере и почтовом клиенте, даже в Outlook. Learn Foundation для электронной почты Посмотрим правде в глаза, почтовые клиенты сильно отстали от времени. Разметка электронной почты с помощью таблиц требует в 3 раза больше разметки и может очень быстро усложняться.Что, если бы разметка электронной почты была больше похожа на Интернет? С помощью Inky вы напишете теги вроде и , чтобы выделить шесть тегов таблицы, необходимых для того, чтобы просто собрать скелет вашего электронного письма. Вы сможете быстрее кодировать электронные письма, меньше разочарований и лучше организовать, что даст вам больше времени, чтобы тратить на лучшее, например на создание продукта. <контейнер> Это столбец. <таблица>
<таблица>
<таблица>
Это столбец.

письма, которые работают во всех основных клиентах, даже в Outlook

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

Посмотреть нашу таблицу совместимости →

ZURB Email Stack сделает вам электронную почту pro

Обновите рабочий процесс электронной почты, чтобы сэкономить время и повысить эффективность. Наряду с системой сборки Gulp, шаблонами Inky, автоматическим встраиванием, CSS и сжатием изображений, ZURB Stack включает поддержку шаблонов Handlebars, чтобы вы не повторялись.Делитесь общими элементами, такими как верхний и нижний колонтитулы, для нескольких писем, позволяя изменять только то, что имеет значение.

Узнать больше о ZURB Email Stack →

Встраивание CSS

в было проблемой

Раньше было так, что каждый раз, когда вам приходилось вносить изменения в электронную почту, вам приходилось копировать содержимое, открывать инлайнер в вашем браузере, вставлять его и встраивать. Затем вам нужно было скопировать и вставить его обратно в свой шаблон. Это безумие! Foundation for Emails 2 автоматически встраивает ваш CSS (версия Sass).Он разделяет ваш «незавершенный» HTML-код и встроенную версию, поэтому вы можете легко продолжать вносить изменения по мере необходимости.

Посмотрите наш веб-инлайнер →

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

• Боковая панель Hero
• Маркетинг
• Информационный бюллетень

• Заказать
• Сброс пароля
• Добро пожаловать

Перейти к шаблонам электронной почты

Скачать все шаблоны

Понимание медиа-запросов в электронной почте в формате HTML

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

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

Что такое медиа-запрос?

Медиа-запросы - это компонент каскадных таблиц стилей (CSS), языка, используемого для стилизации веб-сайтов и почтовых кампаний. На самом базовом уровне медиа-запросы действуют как переключатель для запуска стилей на основе набора правил. Итак, как этот переключатель работает?

Медиа-запрос состоит из трех частей: типа мультимедиа, выражения и правил стиля, содержащихся в самом медиа-запросе.

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

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

• максимальная и минимальная ширина
• максимальная и минимальная ширина устройства
• пиксель устройства

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

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

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

Преимущества медиа-запросов

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

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

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

Быстрый пример

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

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

  
 Вы заметите, что класс   был добавлен в таблицу контейнера. Мы можем добиться переключения с фиксированного на гибкий, используя классы для именования и нацеливания HTML-элементов, а также используя наш медиа-запрос для переопределения стилей, примененных к таблице.Каждому классу   нужно имя, и в данном случае мы назвали наш  .container-table . Мы предлагаем давать классам очевидные имена, которые соответствуют их назначению в вашем медиа-запросе.
 
/ * ТИПИЧНЫЙ СПОСОБ ВЕБ-ДИЗАЙНА * /
.container-table {}
  
 После того, как мы добавили имя класса в тег таблицы, нам нужно будет добавить медиа-запрос в наш HTML вместе с выражением и тем же именем класса. Выражение, которое мы использовали, max-width: 600px, указывает медиа-запросу применять правила каждый раз, когда размер экрана меньше 600 пикселей.
 
@media screen и (max-width: 600px) {
    .container-table {
    }
}
  
 Теперь мы добавим правила стиля, которые регулируют значение свойства ширины CSS для этой таблицы. Теперь наша таблица-контейнер работает плавно на любом видовом экране меньше 600 пикселей.
 
@media screen и (max-width: 600px) {
    .container-table {
        ширина: 100%! важно;
    }
}
  
 Этот же подход можно использовать для настройки общих проблемных моментов на мобильных устройствах, таких как размер текста, изображений и кнопок.Например, если мы хотим настроить размер текста в нашей копии на мобильном устройстве, мы можем сделать это почти таким же образом:
 
@media screen и (max-width: 600px) {
    .mobile-text {
        размер шрифта: 18 пикселей! важно;
    }
}
  
 Ориентируясь на имена классов или определенные элементы, мы можем управлять нашими проектами и делать их более читаемыми и удобными для использования на небольших устройствах.
 Следует отметить, что в большинстве случаев мы используем медиа-запросы для переопределения встроенных стилей. Если вы знакомы с тем, как работает CSS, каскад использует порядок объявления правил CSS, чтобы определить, какие стили должны отображаться.Поскольку медиа-запросы обычно находятся в верхней части HTML-документа, любые встроенные стили, применяемые к содержимому электронной почты, будут иметь приоритет. Следовательно, нам нужен способ переопределить эти встроенные стили.
 Это можно сделать с помощью объявления! Important:
  td {font-size: 24px! Important; шрифт: жирный! важно; }  
 Многие веб-дизайнеры выступают против чрезмерного использования декларации! Important, но для дизайнеров электронной почты это наш лучший друг.
 Расширенный таргетинг 
 Хотя многие дизайнеры электронной почты будут использовать только медиа-запросы для настройки стилей для мобильных устройств, их можно использовать и более продвинутыми способами.
 Существует множество методов программирования и дизайна, которые просто не работают в некоторых почтовых клиентах. Такие вещи, как SVG, CSS-анимация и видео, потрясающие, когда вы можете избежать их использования, но, если они сделаны плохо, могут испортить впечатление подписчиков от просмотра в устаревших почтовых клиентах. Одно из наиболее ценных применений медиазапросов - нацеливание на определенные почтовые клиенты или платформы и постепенное улучшение контента, чтобы можно было использовать эти передовые методы, не беспокоясь о том, что это повлияет на работу всех остальных.
 Прекрасным примером этого является наше популярное электронное письмо с фоновым видео, которое мы отправили для продвижения нашего первого мероприятия Litmus Live. Видео в электронной почте долгое время считалось Святым Граалем дизайна электронной почты. Хотя некоторые клиенты его поддерживают, большинство - нет. Вместо того, чтобы пытаться засунуть видео во входящие, наш дизайнер Кевин использовал медиа-запросы, чтобы настроить таргетинг только на тех клиентов, которые поддерживают видео в электронной почте, и улучшил кампанию для этой аудитории.
 Видео-фоны поддерживаются только некоторыми браузерами на основе Webkit, а именно Apple Mail и Outlook 2011 для Mac.В то время как другие почтовые клиенты видели фоновый цвет и фоновое изображение (если поддерживается), благодаря следующему медиа-запросу клиенты на основе Webkit видели полноформатное видео, воспроизводимое в фоновом режиме:
 
@media screen и (-webkit-min-device-pixel-ratio: 0) {
    / * Вставляем сюда стили * /
}
  
 Подобные выражения могут использоваться для нацеливания на целый ряд устройств в зависимости от их характеристик. Например, если вы хотите настроить таргетинг на iPhone X в стандартном представлении, вы можете использовать следующее:
 
@media screen и (ширина устройства: 375 пикселей) и (высота устройства: 812 пикселей) и (-webkit-device-pixel-ratio: 3) {
    / * Вставляем сюда стили * /
}
  
 Использование медиа-запросов для нацеливания на определенные почтовые клиенты или платформы дает дизайнерам электронной почты ранее невиданный контроль над своими проектами.В сочетании с такими вещами, как CSS-анимация, дизайнеры могут доставить поистине потрясающие впечатления прямо в почтовый ящик.
 Поддержка 
 Поддержка медиа-запросов в почтовых клиентах для мобильных устройств, веб-почты и настольных компьютеров с годами улучшилась - самые популярные почтовые клиенты поддерживают медиа-запросы! Ознакомьтесь с этой таблицей поддержки, чтобы узнать, где поддерживаются медиа-запросы:
 Именно из-за такой разной степени поддержки мы обычно рекомендуем создать прочную основу для вашей электронной почты, используя HTML и встроенный CSS, с добавлением медиа-запросов для постепенного улучшения дизайна.
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт