Как создать динамический html шаблон электронного письма

Содержание

Введение: HTML письмо

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

Проблема: Почтовые клиенты

Вы думаете IE — самая большая проблема? Что же будет после того, как вы столкнетесь с Outlook 2007? Из-за значительных отличий в передаче HTML/CSS между почтовыми клиентами современные техники программирования станут результатом полного беспорядка у большинства популярных почтовых клиентов. Просто почтовые клиенты не передают HTML так как это делают браузеры. В данном случае не сработают свойство float, свойство фонового изображения и даже отступов. Так что же делать программисту, привыкшему придерживаться стандартов?

Решение: Кодите как в 1997

Да-да. Таблицы. Cellpadding, cellspacing, colspan — все эти сложные вещи, о которых вы уже, наверное, забыли. Таблицы — единственный способ получить согласованный интерфейс письма. Так что пора забыть (временно) о ваших любимых CSS стилях и вспомнить о массивных таблицах.

Решение проблем

В работе с почтовыми рассылками встречаются не совсем стандартные баги. Это связанно с нюансами отображения писем различными почтовыми клиентами. Рассмотрим самые распространенные:

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

Для электронной почты:

  1. Для того, чтобы фон вне письма был на всю ширину и высоту, необходимо главной таблице добавить width=«100%» и для td прописать height=«100%». Пример:

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

  1. В веб версии почтового клиента Outlook не желательно использовать строчные элементы, так как по умолчанию почтовый клиент добавляет собственное значение line-height. — решает проблему отображение свойства в почтовом клиенте Outlook. Если его не использовать, то почтовый клиент игнорирует значение line-height и добавляет ему свое значение line-height: 141%;.

Верстка email рассылок от А до Я для чайников

Из песочницы

Уже 3 с лишним года занимаюсь дизайном и версткой почтовых рассылок, которые ориентированы на англоязычных пользователей. За время работы перелопатили огромную кучу информации, перепробовали много вариантов верстки, набили достаточное количество шишек. Были найдены и исправлены типичные баги, которые в той или иной мере повторялись во всех почтовых клиентах. Также нашлись проблемы с некоторыми CSS свойствами — различные почтовые клиенты интерпретировали их по разному. Каждое письмо тестировалось на самых популярных почтовых клиентах: Gmail, Outlook, Yahoo, Android, iOS, MozillaThunderbird, Microsoft Outlook, The Bat. Рассылки ходят на сотни миллионов пользователей и приносят очень хорошие результаты. Итак, приступим к изучению.

MIME Multipart

Обычное текстовое письмо — это просто текст. HTML-письмо — это просто HTML. Большинство писем, которые вы посылаете и получаете — это MIME (Multipurpose Internet Mail Extensions — многоцелевые расширения интернет-почты). Этот стандарт комбинирует текст и HTML, так что получатель сам решает, какой тип отображать.

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

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

Совет: Выберите пункт «Показать оригинал» из выпадающего меню в Gmail, чтобы увидеть полный MIME.

Как настроить рассылку писем

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

Если вы спамер, то я вас огорчу. Я не буду учить рассылать спам. А всем «белым» блогерам добро пожаловать к прочтении статьи!

Настроить рассылку писем подписчикам можно тремя способами:

  • Используя RSS ленту и сервис Feedburner.
  • Используя сервисы рассылки писем.
  • При помощи плагинов рассылки.

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

Рассылка при помощи RSS ленты и сервиса Feedburner

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

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

О том, как настроить рассылку Feedburner и сделать красивую форму подписки, я писал здесь.

Рассылка при помощи сервисов рассылки

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

Минусами сервисов рассылки писем являются ограничение по количеству писем и автоматизации рассылок. Возьмем в качестве примера Smartresponder, с бесплатным тарифом действует лимит 50 000 писем в месяц и 1 000 подписчиков. Если интересно, как сделать красивую форму подписки Smartresponder, можете почитать здесь.

Рассылка писем при помощи плагинов

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

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

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

Дизайн письма рассылки

Дизайн и содержимое письма играют немаловажную роль.

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

Вариант 1:

Среди ошибок этого письма можно отметить: текст письма шире окна просмотра письма, неправильная кодировка, отсутствие графики, скудное содержание ни о чем.

Вариант 2:

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

  • Ширина письма не должна превышать 360 px (оптимально для мобильных);
  • В письме необходимо использовать уникальный логотип;
  • Шрифт письма должен быть удобочитаемый;

Тема письма для рассылки

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

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

Пиратские метрики: как создать email-кампанию по принципу AARRR от Дейва МакКлюра. Часть 1

Перевод

Введение

В этой статье рассказывается о разработке триггерных писем, которые помогут вашим клиентам пройти через воронку продаж и стать довольными, заинтересованными и платящими покупателями.
Скорее всего, письма, которые вы отправляете сейчас, не влияют на конверсию. Наша статья поможет вам исправить это. Составляя этот план, мы воспользовались моделью Дэйва МакКлюра (Dave McClure) «AARRR: Метрики для пиратов», потому что это – отличная концептуальная схема, которую легко применить в работе. На каждом этапе этой модели мы приведем понятные и осуществимые примеры, которыми вы можете воспользоваться, чтобы создать собственную серию транзакционных писем, нацеленных на совершение конверсии.

Онлайн-ресурсы для верстки писем

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

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

SendPulse

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

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

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

Для использования данной программы не понадобятся знания специальных HTML-кодов.

UniSender

UniSender – это хороший помощник, если у вас нет знаний html и вам надо сделать текст, который будет адаптирован не только для ноутбука или ПК, но и для телефона.

  • Также на ресурсе представлены около 100 бесплатных примеров, которыми можно воспользоваться и создать письмо с минимальными затратами времени.
  • Они позиционируют себя с быстрой технической поддержкой, которая даст ответ на все возникшие в процессе работы вопросы.
  • Отличает их также, что есть доступ к добавлению рисунков в виде фона блока, и вы можете поверх картинки расположить пару строк, кнопки и прочее.
  • Каждый блок можно отредактировать (выравнивание, отступы, шрифты, цвета и прочее).
  • Есть фоторедактор, который уже встроен в блоках.

NotiSend

NotiSend – редактор, в котором можно создавать письма адаптированные под различные экраны и устройства.

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

Автоматическая рассылка произвольных отчетов по электронной почте (обычные формы)

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

3 стартмани

Верстка адаптивных писем: памятка маркетолога

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

1. Вступление и знакомство с автором курса

2. Особенности адаптивной верстки

4. Базовый шаблон адаптивного письма

5. Приемы мобильной адаптации

6. Инструменты HTML-верстальщика

7. Подведение итогов курса

30 бесплатных адаптивных шаблонов электронных писем

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

Продающие письма для рассылки это дополнительный канал коммуникации и продаж для клиентов.

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

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

Верстка html писем

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

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

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

Что вы получите?

  • Сверстанные по всем правилам кроссмейлерные письма
  • Точное красивое оформление
  • Высокий CTR
  • Малый показатель отписок, добавления в спам
  • Продуманный текст, таргетирование рассылок
  • Эффективную сегментацию
  • Корректное отображение писем в большинстве почтовых клиентов
  • Правильную техническую настройку процесса рассылок

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

Оформление текста

  1. Изначально, для верстки писем давалась рекомендация оборачивать весь текст в строковый элемент span или font и уже в них задавать стилизацию шрифта. В настоящее время этим можно пренебречь. Описывать свойства для текста можно в любом HTML-элементе внутри тега body, но желательно только inline.
  2. Для задания размера шрифта лучше используйте абсолютные единицы измерения (px или pt), потому что мы не везде имеем доступ к стилизации базового шрифта. Это даст гарантию одинакового font-size для всех почтовых клиентов. Устройства работающие на WebKit по умолчанию применяют масштабирование текста. Для отключения этого поведения существует вендорное свойство -webkit-text-size-adjust. Советую просто вынести следующий селектор в head:
  3. Чтобы кроссмейлерно оформить ссылку необходима следующая конструкция:

    Повторное оборачивание ссылки в span и задания цвета нужно для Outlook, т.к. он не понимает приоритет !important, а без него Яндекс.Почта будет перекрашивать вашу ссылку в красный цвет при событии hover.
    Атрибут target=»_blank» необходим только в том случае, если в вашем письме имеется ссылка на web-версию письма, чтобы ссылки в этой версии открывались в новых вкладках. А так, все почтовые клиенты делают это уже самостоятельно.

  4. Если хотите, чтобы межстрочный интерлиньяж (line-height) работал везде, задавайте его только для блочных элементов (td, div, p, li).

Верстка email рассылок от А до Я для чайников

Из песочницы

Уже 3 с лишним года занимаюсь дизайном и версткой почтовых рассылок, которые ориентированы на англоязычных пользователей. За время работы перелопатили огромную кучу информации, перепробовали много вариантов верстки, набили достаточное количество шишек. Были найдены и исправлены типичные баги, которые в той или иной мере повторялись во всех почтовых клиентах. Также нашлись проблемы с некоторыми CSS свойствами — различные почтовые клиенты интерпретировали их по разному. Каждое письмо тестировалось на самых популярных почтовых клиентах: Gmail, Outlook, Yahoo, Android, iOS, MozillaThunderbird, Microsoft Outlook, The Bat. Рассылки ходят на сотни миллионов пользователей и приносят очень хорошие результаты. Итак, приступим к изучению.

Как заказать верстку электронного email письма?

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

E M A I L

75 — 120 $

Средняя цена

3 — 7 дней

Средний срок

Сделать заказ

Как делаются такие письма?

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

Разработка дизайна и верстки почтовой рассылки для компании ABBY

Вся работа по созданию электронного письма разделяется на четыре этапа:

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

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

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

  • Из песочницы
  • Tutorial

Что нужно знать в начале?

Сразу хочу выделить несколько из основных и важных моментов:

  1. В нашем арсенале имеется очень урезанный набор css-свойств, которые поддерживаются всеми почтовиками. При этом, стили нужно прописывать inline, а в head выносить только вендорные свойства и те блоки объявлений, которые не несут нагрузки на основную стилизацию письма. Ну и использовать link in head — крайне нежелательно.
  2. Не используйте background-image в основных визуальных элементах дизайна и не помещайте в изображения важную текстовую информацию. Вообще нужно всегда учитывать такой вариант, что письмо будет просматриваться получателем без единого изображения.

Каркас

Пожалуй каждый, кто хоть раз верстал письмо под рассылку, знает, что каркас лучше строить с помощью таблиц. На самом деле простая блочная модель div поддерживается на данный момент во всех перечисленных выше почтовиках, за исключением MS Outlook начиная с 2007 версии. Это связано с тем, что в качестве движка последние версии Outlook используют Microsoft Word, который в свою очередь много не знает о блочных css-свойствах. Игнорировать при верстке данный почтовый клиент я не рекомендую, поэтому в качестве фундамента все же используйте table. Да и добившись хорошего результата для Outlook, можно быть уверенным, что в большинстве почтовиках, письмо будет смотреться тоже хорошо, а скорее и лучше.
В качестве примера рассмотрим наиболее важные элементы из следующего, не сложного шаблона:

Как мы измеряем скорость загрузки Яндекс.Почты

Если ваш сайт медленно грузится, вы рискуете тем, что люди не оценят ни то, какой он красивый, ни то, какой он удобный. Никому не понравится, когда все тормозит. Мы регулярно добавляем в Яндекс.Почту новую функциональность, иногда — исправляем ошибки, а это значит, у нас постоянно появляются новый код и новая логика. Все это напрямую влияет на скорость работы интерфейса.
Яндекс.Почту каждый день открывают миллионы человек из разных точек земного шара. И ни у кого она не должна тормозить, поэтому без различных измерений наша работа не обходится. В этом посте мы с alexeimoisseev и kurau решили рассказать о том, какие метрики у нас есть и какие задачи они решают. Возможно, это пригодится и вам.

Как делать email-рассылки и не косячить: практические советы

Tutorial

У разработчика, который впервые столкнулся с генерированием электронных писем, практически нет шансов написать приложение, которое будет делать это корректно. Около 40 % писем, генерируемых корпоративными приложениями, имеют те или иные нарушения стандартов, и, как следствие, проблемы с доставкой и отображением. На это есть причины: электронная почта технически гораздо сложнее, чем веб, работа почты регулируется несколькими сотнями стандартов и несчетным количеством общепринятых (и не очень) практик, а почтовые клиенты отличаются разнообразием и непредсказуемостью. Тестирование может заметно улучшить ситуацию, но материалов, посвященных тестированию почты, практически нет.
Почта Mail.Ru регулярно взаимодействует со своими пользователями посредством электронных писем. В нашем проекте все компоненты, отвечающие за генерирование писем, и даже единичные рассылки проходят обязательное тестирование. В этой статье мы поделимся своим опытом (и набитыми шишками).

Может ли email быть «резиновым»?

Перевод

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

Автоматизация рабочего процесса

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

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

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

Кевин Мандевилль советует использовать сниппеты с шаблонным кодом для оптимизации рабочего процесса — так вам не придется постоянно писать один и тот же код. В общих чертах Кевин описывает, как использовать сниппеты в современных редакторах вроде Atom или Sublime и дает наводку на общедоступную библиотеку сниппетов Litmus.

Шаг 2: План

По моему опыту, программировать электронные HTML письма очень сложно, но быстро

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

Во-первых начнем с создания таблицы со 100% шириной и серым фоном. Это наша основная таблица.

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

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

Отступы внутри и снаружи ячеек

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

таблицы с идентификатором #main будет равен 15 пикселям, так что у нас будет 15-пиксельный отступ вокруг всего общего контента и такой же отступ между всеми колонками. Эти и относятся только к главной таблице, не к дочерним. Если мы не хотим применять ни , ни , необходимо определить это для каждой таблицы.

Перевод. Я оставил свои системные шрифты в Сан Франциско

Из песочницы

Свет увидели и новая версия iOS 9, и OS X 10.11 El Capitan, и даже watchOS 2. И всех их объединяет новый шрифт — San Francisco. И как молодого веб разработчика, меня заинтересовала возможность использовать данный шрифт для веб сайтов. Так родился этот перевод статьи «I Left My System Fonts In San Francisco».
У меня, как у разработчика, очень часто возникают случаи, когда на веб-страницах необходимо использовать системные шрифты. И, зачастую, эти страницы встраиваются в наши приложения, как удалённые настройки или документация

В этом контексте очень важно, чтобы у конечного пользователя содержание вязалось с его окружением.
Что ж, скоро мы все будем сталкиваться с контентом, отображаемым в San Francisco, и нам понадобится как-то указать этот самый шрифт в нашем CSS.
По традиции мы можем попробовать указать шрифт San Francisco явно, что-нибудь в этом стиле:

К сожалению, в свежеустановленной OS X 10.11 (El Capitan) нет этого шрифта.
Но как это возможно, ведь это же системный шрифт?

Как оценить результат работы — своей или верстальщика

Тем, кто отдавал верстку на аутсорс, покупать аккаунт не обязательно, попросите скриншоты из Litmus у верстальщика. Если он профессионал, то проверяет письма на подобных сервисах, отправить скриншот для него не проблема.При проверке присмотритесь к почтовым клиентам, в основном, косяки всплывают здесь. Обязательно проверьте, как открывается письмо в Outlook, Gmail, Yandex и Mail.ru — это самые популярные почтовые клиенты в России.

Не стоит тратить время на исправление макета, если он некорректно отображается на третьем айфоне, в седьмой версии Internet Explorer или в почтовом клиенте The Bat. Да, всегда найдутся те, кто пользуется третьим айфоном, но их меньшинство. Стоит ли переделывать макет ради 1-2% от общей базы? Зависит от количества и «качества» базы.

Надеемся, вы ее сегментировали и про своих подписчиков знаете все. Если 1-2% — это 10 000 человек, то заморочиться стоит. Если вы работаете в b2b и эти 1-2% — управляющие компаний, собственники бизнеса и другие вип-клиенты, придется адаптировать письма под них.

Как собрать письмо во встроенном редакторе

Тем, кто собирает письмо в редакторе, знать код не обязательно. Единственное, что нужно — продумать структуру письма, подобрать картинки и написать текст. Никакой «ручной» верстки — вы соберете письмо из блоков, как в конструкторе посадочных страниц.

Шаг 1. Схема или прототип письма

Начните с черновика, начертите на бумаге схему будущего письма: где будет заголовок, где картинка, где кнопка и т. д. Если есть время, соберите полноценный прототип в Balsamiq или NinjaMock. Такой прототип не стыдно показать директору и передать в работу дизайнеру.

Шаг 2. Верстка письма в редакторе

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

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

Перетаскиваете нужные элементы в тело письма

Обычно во встроенных редакторах действует принцип Drag-and-drop. Если в вашем не так, посмотрите статьи из Базы знаний — принципы работы в редакторе описаны там.

Настраивайте содержимое элементов: отступы, интервалы, выравнивание и начертание

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

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

Добавляете кнопки целевого действия, кнопки «Поделиться» и иконки социальных сетей

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

Шаг 3. Проверка адаптивности во встроенном редакторе

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

В 90% случаев все будет в порядке, блоки «перестроятся» автоматически. Если верстка все-таки «слетает» или результат вас не устраивает — проверьте значения отступов в блоках, они должны быть одинаковыми. Если один один блок отступает на 10 пунктов, а другой на 30, в мобильной версии они могут перестроиться некорректно. Если оба блока отступают на 10 пунктов, скорее всего, все будет в порядке.

Простые шаблоны писем в MS Outlook VBA

  • Из песочницы

Небольшой рецепт на MS VB для сисадминов, которые хотят упростить жизнь сотрудникам.
Задача: девочка на reception периодически отправляет официальные анонсы всей компании. При этом дизайн, нарисованный дизайнером есть, а процесс отправки находится в состоянии вплоть до «отыскать старое письмо в отправленных, нажать переслать всем, отредактировать текст и тему письма, отправить».
Есть два способа:Шаблоны — подойдет для простых вариантов, когда все поля статичныVBA — под катом рассмотрим пример создания простейшего шаблона на встроенном в Outlook Visual Basic.
Есть еще конечно и нормальный способ — взять программиста, который напишет автоматическую рассылку писем на любом удобном ему движке, получить данные о сотрудниках из Exchange или LDAP и все будет ок, но для этого надо бюджет. Кому интересно костыль — под кат.

Машинное обучение в инвестиционной компании: классифицируем обращения в техническую поддержку

В теории использование машинного обучения (ML) помогает сократить участие человека в процессах и операциях, перераспределять ресурсы и уменьшить затраты. Насколько это работает в условиях конкретной компании и сферы деятельности? Как показывает наш опыт — работает.
На определенном этапе развития мы в компании «ВТБ Капитал» столкнулись с острой необходимостью сократить время на обработку запросов в техническую поддержку. После анализа возможных вариантов было решено применить ML-технологию для категоризации обращений от бизнес-пользователей Calypso, ключевой инвестиционной платформы компании. Быстрая обработка таких запросов крайне важна для высокого качества ИТ-сервиса. Помочь в решении этой задачи мы попросили наших ключевых партнеров – компанию EPAM.

Шаг 5: Тестирование

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

Почтовые клиенты

Вы должны протестировать свою работу хотя бы на этих почтовых сервисах:

  • Outlook 2003/2007
  • Hotmail
  • Yahoo! Mail
  • Gmail
  • Apple Mail
  • Thunderbird

Как тестировать?

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

Testing with Mailchimp

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

  • Мне нравится использовать Mailchimp для тестирования и отправки тестовых рекламных писем. С Mailchimp можно бесплатно отправить письма 500 раз, так что вам не придется оплачивать тестирование. В нем очень простой и легкий интерфейс. Вот краткое пошаговое описание тестирования.
  • Подпишитесь на бесплатный аккаунт Mailchimp и создайте список необходимых почтовых клиентов: Hotmail, Yahoo! и Gmail. Затем зайдите в свой аккаунт. Выберите пункт create a campaign (создать рассылку), а затем regular ol» campaign на главной странице. Заполните необходимую информацию о рассылке. Для тестирования достаточно ввести название.
  • На странице design выберите Import -> Paste in code, а затем отметьте пункт Automatic CSS Inliner.
  • Если вы не используете Mailchimp, убедитесь в том, что у вас встроенный CSS стиль.
  • Продолжайте до тех пор, пока не дойдете до страницы confirm, где отметьте send test. Вы можете отправить несколько тестовых рассылок отсюда, но после этого вам необходимо будет отправить электронные письма всему созданному списку.

Тестирование с помощью Litmus

Litmus — это веб-приложение, тестирующее HTML письма во всех почтовых клиентах любой версии. Полная версия сервиса платная, и если ваш заказчик отказывается оплачивать эту услугу, вы можете протестировать бесплатно старую версию Gmail и Outlook 2003, которые все еще используются.

Некоторые тесты показали довольно-таки хорошие результаты:

Thunderbird

Некоторые результаты не вызывают восхищения, но есть и неплохие:

Gmail (safari)

Outloook 2007

Outlook 2003

Yahoo! Mail

Есть и ошибки.

Hotmail (GREEN???)

Old Gmail (explorer)

Исправление ошибок

В общем, тестирование прошло успешно, так как я проводил промежуточные тесты в Gmail и Outlook по ходу работы. Проблемы, возникшие в старой версии Gmail и Hotmail, связаны со стандартными стилями этих почтовых клиентов. Специальный уникальный брэнд от Microsoft устанавливает по умолчанию свой стиль для всех заголовков, окрашивая текст в зеленый цвет, с помощью обозначения . Иногда я почти уверен в том, что они хотят свести меня с ума.

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

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

Вот мы и решили проблему с Hotmail:

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

Если вам удасться уговорить заказчика подписаться на Litmus, это облегчит работу. Вы также можете проводить тестирования многих почтовых клиентов с помощью платной версии Mailchimp и Campaign monitor.

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий