Советы основателя маркетингового агентства Criminally Prolific Дмитрий Драгилев

В закладки

Основатель маркетингового агентства Criminally Prolific Дмитрий Драгилев поделился в своем блоге несколькими способами поиска необходимого email-адреса. В рубрике Growth Hacks - перевод заметки

Name2Email выполняет эти шаги прямо в окне Gmail Compose, без всяких копипастов email-адресов и без их последовательной проверки. Name2Email сама подставит все ваши адреса в поле "To", и вы тут же увидите, активны они или нет.

Анимированное GIF, размещённая ниже, показывает, как это работает.

Ещё один способ найти нужный адрес через Gmail/Google+ заключается в том, чтобы использовать Rapportive . Эта программа работает сходным образом: введите предполагаемый адрес, и Rapportive покажет вам на боковой панели все связанные с ним профили в социальных медиа. Единственная причина, по которой я не включил сюда эту программу, - то, что она стала меньше поддерживаться с тех пор, как её приобрёл LinkedIn.

Способ 5. Получите нужный email-адрес из рассылки

1. Подпишитесь на его рассылку

Например, здесь я заполняю форму подписки на рассылку Рамита на IWillTeachYouToBeRich.com :

2. Нажмите кнопку ответа на первое же письмо, которое к вам придёт

Большинство новостных рассылок требуют от вас подтвердить подписку. Когда вы получите такое письмо, просто нажмите "Ответить" - и нужный email в ваших руках.

Вот, что я получил после того, как ответил на письмо Рамита:

Вы можете проделывать этот трюк с любыми новостными письмами.

Способ 6. Просто спросите

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

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

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

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

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

1. Контактные формы на сайтах

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

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

2. Данные WHOIS

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

Некоторые блоги рекомендуют просматривать эти записи, чтобы найти email-адрес владельца того или иного сайта. Например, набрав IWillTeachYouToBeRich.com на странице Who.is , вы получите следующее:

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

В подходе WHOIS есть два недочёта:

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

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

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

Шрифты нужно использовать только стандартные, которые отображаются на всех устройствах: Arial, Verdana, Trebuchet, Courier, Courier New, Tahoma, Georgia, Times, Times New Roman.

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

Flash-анимация
Java Script
Формы
Эффекты наведения (:hover)

Используются: gif-изображения.

Блоки не должны мешать друг другу при вёрстке, слои не накладываются друг на друга, это относится как к разным блокам, так и к однотипным. Блок при блочной адаптации не должен превышать 320px по ширине (вместе с отступами).

Дополнительно

Хранение файлов

Для каждого нового проекта на сервере создаётся новая папка, в которую загружаются картинки. Пути к картинкам указываются абсолютными.

Экраны Retina

Для этих экранов размер иконок.png должен быть в 2 раза большим, чем на самом деле будет отображаться. Т.е. если нам надо вывести иконку размером 70×20, на сервер надо загрузить ее в размере 140×40. И уменьшить ее, указав в коде атрибут width=»70«.

Вёрстка

Подробная статья о вёрстке email рассылок в нашем блоге:

Используется DOCTYPE HTML 4.01 Transitional:

Что касается кодировки, это utf-8:

Всё письмо целиком оборачивается в table с шириной в 100%, минимальной шириной и каким-либо фоном (белый, если не нужен другой):

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

@media only screen and (min-device-width: 660px) { .table660 {width: 660px !important;} } @media only screen and (max-device-width: 660px), only screen and (max-width: 660px){ table {width: 100% !important;} }

При ширине экрана больше 660 пикселей, ширина таблицы фиксирована. А если ширина экрана или окна меньше 660 пикселей, ширина таблицы равна 100% и адаптируется под экран.

Значение атрибутов CELLPADDING и CELLSPACING следует установить как «0», и не используйте никаких значений атрибута BORDER, кроме «0» у table, так как не все почтовые клиенты корректно интерпретируют другие значения.

Вертикальные и горизонтальные отступы

Для создания вертикальных отступов используют такой блок:

По сути это пустой блок с заданной высотой, и другими свойствами для своеобразных почтовиков. Значение свойства font-size меньше height на 2px.

Для создания горизонтальных отступов можно использовать столбцы таблицы с заданной шириной:

Текст

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

Href="tel:+79876543210"

Изображения и фон

Изображение вставляем так:

Изображение помещаем в блочный элемент с заданным свойством line-height, которое равно высоте изображения. В теге img задаём высоту, ширину, нулевую рамку и стиль (display: block;).

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

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

Обратите внимание - фон задаём именно для td и сразу двумя способами.

Адаптация (перемещение) блоков

Для этого используем такую конструкцию:

Всё дело в блоках со свойством inline-block. В момент, когда блокам не хватает ширины, правый переносится вниз.

Вёрстка под MS Outlook

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

В наших письмах они используются для организации таблицы у плавающих блоков (т.к. Outlook не понимает display: inline-block). А так же для фиксации общей ширины письма.

Материал из Email Маркетинг Вики

Особенности вёрстки email Вёрстка email-сообщений несколько отличается от web-вёрстки. Если для web-вёрстки современных сайтов используется CSS3, то для вёрстки email проблематично использование даже более ранних стандартов CSS. Это связано с тем, что многие пользователи до сих пор используют старые устройства и старые версии почтовых клиентов. Вместе с этим количество новых устройств постоянно растёт. А значит, чтобы письма корректно изображались на большинстве существующих устройств, придется сделать шаг назад и больше полагаться на возможности HTML-вёрстки.

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

Основные параметры

* Размер
Оптимальная ширина письма – 600-650px. При адаптивной вёрстке в медиа-запросах или в файлах стилей чаще всего прописывают максимальную величину экрана в 480px. При этом размеры контентных блоков и самого письма лучше задавать в процентах и указывать максимальную ширину. Так письмо будет автоматически сжиматься на экранах меньше 600px. Правда, этого приёма будет не достаточно для адаптивной вёрстки с учётом особенностей мобильных устройств.

* Фон и цвет
Для удобства чтения и привлечения внимания часто используют светлый фон, отличный от белого. Как обозначать цвета. RGB-запись цвета воспринимается не всеми почтовыми клиентами. Поэтому лучше использовать шестнадцатиричную запись кода цвета и не сокращать его .
* Разбивка контента на сегменты
Для писем и email рассылок используют табличную вёрстку. Несмотря на то что многие веб-дизайнеры считают такой подход устаревшим, для email он оптимален.

* Размеры элементов
Размеры элементов должны задаваться в абсолютных значениях. Размеры ячеек таблицы указываются в процентах, размеры элементов – в пикселах. При этом лучше указывать размер без обозначения px. Так можно избежать некоторых проблем отображения в Outlook (например, width="400").

* Доктайп (DOCTYPE)
Любой HTML-документ начинается с элемента DOCTYPE. Он сообщает браузеру, как интерпретировать код. Существует несколько версий языка HTML с разным синтаксисом. Для писем рекмендуется использовать доктайп:

* Шрифты
Список шрифтов, которые можно использовать в email-шаблонах :

Font-family: Arial, Helvetica, sans-serif;
font-family: "Arial Black", Gadget, sans-serif;
font-family: Georgia, serif;
font-family: "MS Sans Serif", Geneva, sans-serif;
font-family: "MS Serif", "New York", sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: "Times New Roman", Times, serif;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;

* HTML-теги, которые можно использовать в email

* CSS-стили
В вёрстке email использование стилей CSS ограничено, практически не используется CSS3. Все стили прописываются инлайн (то есть рядом с элементом, к которому они относятся). Стили, прописанные внутри тега или игнорируются большинством почтовиков .

CSS-стили в email-вёрстке

Стили CSS позволяют задать основные параметры для элементов на странице (размеры, выравнивание, цвет фона и т.д.). Существует 4 способа задания стилей для HTML-тегов :

* Внедрённый стиль

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

Здесь 1 раз задаётся стиль для тега

, и все элементам с тегом

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

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

* Inline-стиль Стиль указывается непосредственно в теле тега. Например:

контент
В веб-разработке CSS-стили позволяют уменьшить количество кода. Для email-писем этот приём не работает, так как большинство почтовых программ игнорирует атрибуты, заданные в , а также внешние css-файлы. Именно поэтому для вёрстки email следует использовать inline-стили. В разных сервисах есть разные ограничения на поддержку CSS-атрибутов. Подробная таблица поддержки стилей для наиболее популярных почтовых сервисов была создана специалистами campaignmonitor. Здесь ее можно посмотреть онлайн: … для 10 основных сервисов или скачать таблицу для 18 сервисов. Многие сервисы для email-маркетинга имеют свои инлайнеры, которые конвертируют код в инлайн-вёрстку автоматически.

Использование табличной вёрстки

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

контент письма

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

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

Оформление ссылок

Для оформления ссылок необходимо использовать атрибут target="_blank", чтобы почтовый сервис не пытался открыть ссылку внутри письма. Чтобы ссылка правильно отображалась в Outlook, ее необходимо обернуть в . Для кроссмейлерной вёрстки можно использовать вот такую конструкцию:

link

Телефонные номера

Некоторые почтовые сервисы, оформляют текст хоть как-то похожий на телефон в виде ссылок. Чтобы этого избежать, можно сразу оформить телефон в ссылку: (например так - href=tel:+79876543210). Или сделать так, чтобы текст не распознавался, как телефон (например, так - +79876543210

Тестирование email

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

Платные сервисы для проверки отображения писем:

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

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

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

Preview My Email Сервис отправляет письма на самые популярные почтовые сервисы, на выходе вы получаете скриншоты настоящего доставленного письма с вашей версткой. Во время тестирования и корректировки шаблона письма стоит ориентироваться на аналитику по количеству пользователей, которые используют те или иные почтовые клиенты и устройства. И больше ориентироваться на те устройства и почтовики, которые наиболее популярны у вашей ЦА. При этом самым надежным и действенным способом тестирования остаётся ручной анализ доставленных писем. Для этого стоит зарегистрировать ящики на всех почтовых сервисах, которыми пользуются ваши клиенты.

Примечания==

http://habrahabr.ru/post/252279/
http://www.w3schools.com/cssref/css_websafe_fonts.asp
http://habrahabr.ru/post/252279/

В прошлой статье мы разбирались, как работать с . Сегодня поговорим о дизайне email рассылок .

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

Структура

(1) Прехедер (preheader),
(2) Шапка,
(3) Тело письма,
(4) Подвал (футер).

Отдельным пунктом можно добавить границы и фон .

Шапка и футер остаются практически неизменными от рассылки к рассылке. В прехедере меняется только текст аннотации. Таким образом, основное “поле битвы” разворачивается в теле письма.

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

Стандартные элементы

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

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

Компоновка

Стандартная ширина письма составляет 600px (чтобы рассылка без проблем “вписывалась” в большинство почтовых программ и устройств).

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

(1) Картинка сверху,
(2) Картинка слева,
(3) Картинка справа,
(4) 2 столбца,
(5) 3-4 столбца.

(Последний вариант используется реже из-за узкой контентной части).

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

Основные элементы

(1) Картинки,
(2) Заголовки,
(3) Подзаголовки,
(4) Текст.

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

Декоративные элементы

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

Если только вы не предпочитаете верстать рассылки сплошными картинками (что, по-моему, моветон),

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

Остаётся сосредоточиться на том, что ещё можно пустить в ход письме, невзирая на “коварство” почтовых программ:

(1) Линейки,
(2) Буллиты (маркеры списка),
(3) Оформление ссылок и кнопок,
(4) Рамки и тени,
(5) Иконки.

Именно благодаря декоративным элементам некоторые рассылки выглядят в целом интересно:

Дизайн как конструктор

Теперь, когда мы разложили оформление рассылок по полочкам (5 решений по компоновке, 4 основных и 5 декоративных типов элементов), остаётся только разработать универсальный шаблон , который позволит “собирать” письма, как башни из кубиков конструктора:

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

Кстати, html-редакторы некоторых исповедуют тот же подход к дизайну (например, Drag&Drop в Мэйл Чимп). И представление о письме, как о наборе стандартных блоков, которые можно перетасовывать любым способом, здесь отлично срабатывает:

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

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

О пользе стандартизации

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

Копирайтер понимает, какого объёма тексты писать, чтобы они “ложились” на компоновку. Дизайнер знает размер картинок, которые нужно подготовить для письма. Верстальщик по-хорошему принимает участие в проекте только однажды — подготавливая базовый шаблон-конструктор. Маркетолог без труда “упаковывает” весь контент в рассылку.

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

Для тренировки разберём «по кусочкам» небезызвестную
рассылку Мегаплана :

→ Прехедер

Скрытый текст в аннотации + декоративный элемент — иконка-«самолётик», ссылающаяся на просмотр письма в браузере:

→ Шапка

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

→ Тело письма

Текст, структурированный заголовками, подзаголовками и отступами; «разбавлен» картинками, иллюстрирующими содержание выпуска:

Декоративный элемент — цитирование:

→ Футер

Компоновка «картинка слева» и «2 столбца»:

Декоративные элементы — линейки, кнопки, рамки вокруг картинок, скругляющие углы:

→ Границы и фон

Зелёный фон (видимо, из фирменной расцветки Мегаплана). Границ как таковых нет, вместо них контрастный переход от фона к светлому телу письма, но есть скругление по углам.

Рассылка ведётся , где легко внедрить все перечисленные элементы отдельными блоками в режиме Drag&Drop. Шаблон несложный, и его вполне достаточно, чтобы автор текстов мог своими силами верстать большие, ярко оформленные выпуски — не вдаваясь глубоко ни в html, ни в работу с графическими редакторами.

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

Заключение

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

P.S. Опрос подписчиков блога всё ещё показывает, что самая интересная тема для статей — аналитика:

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

P.P.S. Если вы ещё не - самое время это сделать. Я не только анонсирую свежие статьи блога, но и делюсь с подписчиками бонусной информацией, а также показываю отдельные приёмы email маркетинга на практике. До встречи в вашем почтовом ящике! 🙂

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

Что даёт HTML-письмо?

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

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

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

Средняя цена

3 - 7 дней

Средний срок

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

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

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

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

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

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

Пример

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

Контент блока Контент блока Некоторый текст в ячейке.

Изображения и фон. Что даёт HTML-письмо