Стилизация ALT-текста e-mail рассылки


Оглавление (нажмите, чтобы открыть):

Стилизация письма для рассылки

20.05.2020, 00:19

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

Вёрстка письма для рассылки
Всем привет. Ребята выручайте. Кто сталкивался с такой проблемой в верстке писем: — суть проблемы.

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

Стилизация opacity для croll для ie
Здравствуйте, как сделать scroll в ie полупрозрачным, не используя js. opacity: 0.5?

Стилизация полосы прокрутки для списка
Привет, есть такой список с полосой прокрутки, вот код со стилями .list < padding-right: 20px;.

Глупый вопрос про тег img и его атрибут alt, можно ли стилизовать alt?

Привет всем, у меня глупый вопрос 😀

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

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

Возможно ли стилизовать текст и рамку картинки? (Я пробовал задавать цвет, и это сработало, но вот позиционирование текста не вышло, также убрать этот border не вышло, а очень бы хотелось :D)

Всем кто потратит чуть-чуть своего времени и ответит на этот дурацкий вопрос, спасибо :3

Как избежать блокировки изображений в email-рассылках | SEO кейсы: социалки, реклама, инструкция

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

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

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

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

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

Проверяйте формат изображений

В рассылке можно использовать не любые изображения. Большинство почтовых клиентов поддерживают только файлы с расширениями png, gif и jpg. Других форматов стоит избегать, особенно bmp – картинки будут очень долго открываться, пользователь просто не дождется загрузки.

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

Файлы Flash, JavaScript, ActiveX, а также видео, встроенные в рассылку, получатель в большинстве случаев не увидит.

Учитывайте размер картинок

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

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

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

Отправляйте тестовые письма

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

Используйте alt текст

Иногда email-маркетолог не может повлиять на отображение картинок в письме – некоторые почтовые клиенты блокируют отображение графики. Например, в Windows Live Mail, Outlook Express, Outlook 2007 нет подгрузки картинок по умолчанию. В других почтовых программах пользователь может намеренно отключить загрузку графики.

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

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

Поддержка стилизованного alt текста зависит от того, какой браузер используется. Например, он будет виден при просмотре письма в Gmail в Firefox, а при просмотре Gmail в Internet Explorer — нет. Зато Gmail и G-suite в Internet Explorer поддерживают разные цвета, и это также стоит использовать.

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

В приведенной ниже таблице показано, какие почтовые клиенты блокируют изображения, отображают обычный и стилизованный alt текст:

Попадите в белый список

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

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

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

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

Содержание

Самые популярные почтовые платформы

Разработчики проекта Email Client Market Share отслеживают статистику по доле рынка email среди разных почтовых клиентов. В случае конкретной компании распределение пользователей различных платформ и программ может быть другим, но на старте неплохо понимать базовую диспозицию на рынке. По данным на май 2020 года, cамыми популярными почтовыми платформами являются iPhone и Gmail:

Основные проблемы верстки

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

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

  • Apple Mail, Outlook для Mac, Android Mail и iOS Mail используют WebKit.
  • Outlook 2000, 2002 и 2003 используют Internet Explorer.
  • Outlook 2007, 2010 и 2013 используют Microsoft Word (да-да, Word!).
  • Веб-клиенты, соответственно, используют движки браузера — например, Safari использует WebKit, а Chrome использует Blink.

Почтовые клиенты добавляют собственные стили, помимо тех, что были изначально выбраны разработчиком рассылки. Например, Gmail для всех шрифтов в

устанавливает значение. Также разработчики почтового сервиса Google лишь недавно анонсировали поддержку встроенного CSS и media queries.

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

    вместо

    Как работать со шрифтами

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

    Чтобы правила веб-шрифтов не конфликтовали с Outlook, используйте специальный медиазапрос для WebKit:

    Очень важно прописать для каждой ячейки таблицы

    font family, font size и color, иначе почтовый клиент может проигнорировать выбранный шрифт. Это правило нужно соблюдать и для любых блочных элементов, в которых находится текст, таких как

    Изображения и медиа

    Следующая важная тема при верстке писем — работа с изображениями и медиа.

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

    Поведение почтовых клиентов здесь весьма вариативно:

    • Outlook блокирует рендеринг изображений по умолчанию,
    • Apple Mail не блокирует,
    • Gmail не блокирует.

    Важно включать alt-текст для всех используемых картинок — это поможет получателю письма понять, что должно было быть на месте изображений, если его email-клиент вдруг ему их не покажет. Для тега можно прописать стилевые правила текста, например color или font-family , которые будут применяться к alt-тексту.

    Гифки поддерживаются большинством почтовых клиентов, однако Outlook версий с 2007 до 2013 их не поддерживает — программа просто показывает первый кадр.

    Адаптивная верстка

    • Около половины всех писем в мире открывают с мобильных устройств, и эти цифры растут.
    • По данным проекта Email Client Market Share доля iPhone на рынке почтовых клиентов составляет 31%, у iPad 11%, а у Android 4% — это больше 45%, а ведь есть еще Windows Mobile и другие ОС.
    • Исследователи из MailChimp обнаружили, что число кликов на ссылки в адаптивных письмах за последнее время выросло почти на 15% — с 2,7 до 3,1%.

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

    Закажите шаблон email рассылки!

    Наш дизайнер сверстает шаблон под ваши потребности

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

    Одноколоночное письмо на десктопе и смартфоне

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

    Также нужно будет адаптировать размеры изображений и размер шрифта font-size — и все.

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

    Сделать это можно с помощью вложенных таблиц. Считается, что этот подход — более надежный способ добиться поддержки различных почтовых клиентов. Главная «фишка» здесь в использовании атрибута align=»left» для расположения таблиц по горизонтали. У каждого элемента должна быть конкретная ширина, и сумма ширин всех элементов должна равняться ширине контейнера:

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

    Массимо Кассандро залил этот код на Codepen — это специальная песочница, в которой можно протестировать пример, подставляя собственные данные.

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

    Для кодирования HTML-версий писем можно использовать любые редакторы кода, например, Atom или Sublime Text.

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

    Здесь можно поиграть с примером кода на Codepen.

    В описанных выше способах мы для мобильных разрешений меняем изначально заданную ширину таблиц и ячеек, превращая их в блочные элементы. В таком случае верстка не является по-настоящему резиновой — мы просто прописываем нужные стилевые правила под определенные разрешения экрана. Плюс этот способ не сработает в мобильных почтовых клиентах, таких как Яндекс.Почта и Mail.ru под iOS и Android, которые не поддерживают медиазапросы.

    Как сделать резиновую верстку

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

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

    Шаблон MJML представляет набор особых тегов разметки, которые после компиляции превращаются в обычную табличную верстку:

    Адаптивные изображения

    Отдельная тема — создание адаптивных версий изображений. Здесь достаточно использовать классический метод создания адаптивного контента — img .

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

    Мы в SendPulse предоставляем услугу дизайна шаблонов, но но есть и специализированные агентства, как Site Elite Studio.

    Неочевидные моменты в работе с текстом email

    В заключение еще несколько советов, которые помогут создать качественную почтовую рассылку.

    Не забывайте о текстовой версии письма

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

    Важно помнить, что некоторые почтовые клиенты даже plain-text письма будут отображать в качестве HTML-сообщений. К примеру, Gmail добавит дополнительные стили и превратит URL в ссылки.

    Прехедер сообщения очень важен

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

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

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

    Для превью сообщений и тестирования прехедеров можно использовать этот инструмент от Остина Вудалла (Austin Woodall).

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

    32 гениальных примера писем для email-рассылки, которые вас вдохновят

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

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

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

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

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

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

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

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

    Все, прелюдия окончена — переходим к делу.

    Ведите подписчика по пути клиента

    Какие шаги делает человек в вашем магазине или изучая ваш продукт с момента знакомства и до момента покупки.

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

    Чтобы было понятнее, давайте рассмотрим 2 примера.

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

    Эта фишка повторяется 4 раза. Когда вы закончите читать или прокручивать письмо, вы остановитесь на соблазнительном десерте.

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

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

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

    Еще один подобный пример есть в рассылке приложения бронирования отельных номеров Hotel Tonight.

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

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

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

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

    2. Примеры приветственных писем

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

    Оно позволяет решить 2 задачи:

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

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

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

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

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

    Сервис LearnVest также оригинально приветствует новых подписчиков. Вот пример их первого письма с кнопкой, на которой разместили призыв к действию: “Начнем!”. Это первое, что видит человек после того, как откроет письмо.

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

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

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

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

    Приветственное письмо интернет-магазина экипировки для активного отдыха Kammok’s тоже стоит внимания. Перед текстом самого письма подписчик видит промо-код скидки. Это удерживает внимание на письме. Далее идет информация о: продукции, компании, специальных предложениях. Такая сбалансированная структура письма помогает постепенно вовлекать новых подписчиков в диалог с магазином.

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

    3. Фокус на одной детали

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

    Хороший пример фокуса на одном действии демонстрируют сервисы Snagit и Adobe.

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

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

    Adobe поступает еще проще.

    Этот сервис не присылает видеоинструкцию, а сразу призывает “Создайте что-нибудь сейчас — мы покажем, как” и дает ссылку “Начало работы”.

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

    Другой способ подтолкнуть аудиторию к действию — дать ей для этого вдохновение.

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

    Интернет-магазин Michaels , в котором продается все для творчества, отлично с этим справляется.

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

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

    Похожую стратегию в своих емейлах использует сайт LearnVest .

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

    Так вы удерживаете внимание читателя, направляете его в нужное русло.

    А теперь давайте рассмотрим примеры писем, где все внимание сосредоточено на читателе.

    4. Пишите персонализированные письма

    Почему это важно:

    • У персонализированных писем конверсия в покупку на 6% выше;
    • По сравнению с обычными письмами они приносят в 18 раз больше дохода;
    • В персонализированные письмах кликают по ссылкам и потом конвертируются на 14% и 10% больше соответственно.

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

    Например, как это делает магазин продуктов для домашних любимцев Chewy :

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

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

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

    5. Письма с контентом

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

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

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

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

    Команда сервиса Canva действует подобно Нилу. Но при этом они не дают краткого обзора статьи и сокращают количество ссылок на нее с 3-х до 1-й. Выглядит это вот так:

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

    Следующие 2 примера также о коротких письмах, которые получают подписчики сайтов каждую неделю.

    Например, лидер мнений фитнес-тренер Kayla Itsines знает, кто из ее подписчиков тренирует ноги по понедельникам. Значит, эту группу мышц им нужно оставить в покое. Поэтому следующее письмо, которое получает от нее эта группа людей — тренировка рук и корпуса. Ноги при этом отдыхают.

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

    Команда сервиса BuzzSumo поступает аналогично.

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

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

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

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

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

    6. Письма-сводки

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

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

    Письма в стиле round up идеально подойдут тем, кто не слал читателям полезности от 2-х недель до 1 месяца. Наверняка за это время у вас накопилось минимум 2 полезности. Поделитесь ими. Но при этом оформите письмо визуально привлекательно и аккуратно.

    Например, вот так.

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

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

    Команда сайта MyFitnessPal поступает аналогично.

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

    Но как быть, если у вас нет аппетитных картинок, но вам нужно отправить письмо с несколькими материалами?

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

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

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

    7. Письма, предлагающие новый лид-магнит

    Каждый раз, когда вы создаете особенный контент, доступ к которому можно получить только за email, подготовьте и разошлите вашим подписчикам письмо с предложением получить его. Так вы сделаете 2 вещи:

    • Детализируете интересы текущей аудитории (сегментируете ее);
    • Подготовите ее к следующему шагу.

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

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

    Это простая схема с 2-я призывами к действию отлично работает для сбора контактов заинтересованных подписчиков.

    В следующем примере писем вы также найдете 2 призыва к действию.

    8. Письма под вебинар

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

    Посмотрите, как пишет письма про вебинар Льюис Хоуз .

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

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

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

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

    С таким письмом можно протестировать разные нюансы:

    • Дать только описание, ссылку и картинку;
    • Дать полное письмо с 2-я вариантами описания и 2-я кнопками.

    Или попробовать вообще перетасовать элементы и сделать по-своему. В любом случае идея есть и поле для А/Втеста тоже.

    Еще один пример приглашения на вебинар от маркетолога Billy Gene . Он удачно использовал смешной и эпатажный видеоролик, на котором стригут наголо девушку и дают ей за это 25 000 долларов.

    В первых 3-х кадрах они умудряются:

    • Зацепить внимание;
    • Дать информацию о дате и времени проведения вебинара;
    • Дать 2 призыва к действию (просмотрите видео или зарегистрируйтесь).

    Также как у Льюис Хоуза, контент под видео сфокусирован на том, что зритель может ожидать от присутствия на вебинаре.

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

    P.S.: Будьте до конца, чтобы задать вопрос спикеру

    P.P.S.: Самые первые посетители вебинарной комнаты получат крутые подарки. (как вариант — те, кто досидит до конца).

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

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

    9. Перекрестная реклама

    Если вы планируете делать продажи по своей базе email-подписчиков, делайте это круто или не делайте вообще.

    Kayla Itsines отлично с этим справляется. Вот пример письма, в котором она предлагает своим подписчикам ролик для пилатеса.

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

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

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

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

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

    Вот еще пара способов использовать эту технику.

    10. Празднуйте важные даты

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

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

    Например, как это сделано в следующих 3-х письмах.

    С этим первым из Vitamin Shoppe они празднуют 40-летие. Вместо банальной скидки в 40%, они предложили игру:

    • Удвоение очков при каждой покупке;
    • Награда в 5 долларов за каждые 100 очков, которые вы накапливаете.

    Зацепили с заголовка: Наш день рождения — ваши подарки.

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

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

    Runkeeper использует оба описанных выше трюка: персонализация и празднование события.

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

    Но не это самое интересное.

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

    Этот момент делает предложение действительно личным.

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

    11. Используйте страх потери

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

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

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


    Дерек Хэлпнер из socialtriggers тоже использует этот трюк. Прямо из заголовка можно понять, что страх упустить пущен в дело. Все подробности в письме.

    12. Покажите личность

    Вы когда нибудь открывали электронное письмо, длиной в роман “Война и мир”?

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

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

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

    Но так делает не только он.

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

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

    магазин мужской одежды Mizzen+Main доказал, что можно сыграть на личности даже в деловой электронной переписке. Так они и сделали в письме с рекламой красных чиносов.

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

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

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

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

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

    1. Захотите ли вы сами прочитать такое письмо, если оно придет к вам на почту?
    2. Если вы отправите такое письмо другу и при этом он не сможет видеть, кто отправитель, догадается ли он, что письмо от вас или от вашего бренда?

    Если на оба вопроса ответ “нет”, добавьте личности в ваше письмо перед тем, как отправить его.

    Как вы можете использовать эти примеры емейл-маркетинга

    У вас есть целых 32 идеи по написанию писем. Какие из них вы используете первыми? Помните, мы не копируем и не вставляем — просто берем идею и “накладываем” на потребность вашей компании в письмах.

    Начните с таких шагов:

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

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

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

    ALT Text in HTML Email

    Styling ALT Text in Email

    Email designers rely on images for more than just adding ornamentation to a campaign. Images often convey vital information and, more importantly, entice readers to engage with an email. Unfortunately, designers can’t count on images always being loaded. Many email clients (and users) disable images by default, bad connections can prevent images from loading, and visually impaired users can miss important information contained within images. How do email designers overcome this important problem?

    The good news is that HTML provides a reliable solution in the form of alt attributes. Sometimes called “ALT tags” or “ALT text”, they provide information about the content of images in the form of text when images are disabled or unable to properly load. Fortunately, they are easy to set up and even style to fit in with your email design.

    Adding ALT Text

    Setting ALT text for images is simple. Since it is part of the HTML standard, all you need to do is include the attribute in your image tag:

    While you should be including the dimensions of your images as a best practice, explicitly declaring the width and height of your image gives your ALT text a container in which to live when images are disabled. In the absence of explicit dimensions, some email clients will collapse that area and the ALT text with it.

    Standard ALT Text Display

    Let’s take a look at how images with and without ALT text are displayed. Here’s what a disabled image looks like without ALT text in Gmail:

    Compare that to the same image when ALT text is included in the image tag:

    While it’s not pretty, it does still provide some information about the content of the image. Even if users don’t enable images, they will still have some context for the rest of the message.

    Styling ALT Text

    You could stop there, satisfied that you are providing users some information about the images in your emails. But, as designers, we want to make things look nice. You can easily blend ALT text in with the rest of the message using simple inline styles just like with text or any other element in your email:

    Here’s the same example above, but with ALT text styles applied:

    Email Client Support

    Since this is still email we’re talking about, support for ALT text varies across email clients. Using Salesforce’s impressive Dreamforce email, we can see how ALT text renders in a number of email clients.

    You can see in the table below that webmail clients generally have very good support for ALT text.

    Webmail Client Blocks Images by Default Displays ALT Text Styles ALT Text
    AOL YES YES YES
    Gmail YES YES YES
    Yahoo! YES YES YES
    Outlook.com Sometimes YES YES

    That being said, your styles may not render properly for your ALT text. Webmail clients rely on the browser in which emails are viewed to render the HTML. Therefore, some browsers may not support styled ALT text. Let’s compare how Firefox and Internet Explorer render styled ALT text:

    Styled ALT text in Gmail/Firefox:

    Styled ALT text in Gmail/IE:

    Firefox, as well as modern browsers like Chrome and Safari, handle styled ALT text beautifully. While Internet Explorer doesn’t fare as well, your message is still readable.

    Desktop clients are a bit more reliable since there aren’t as many variables involved:

    Desktop Client Blocks Images by Default Displays ALT Text Styles ALT Text
    Apple Mail NO YES YES
    Lotus Notes YES YES NO
    Outlook 2003 YES Sort Of * NO
    Outlook 2007 YES Sort Of * NO
    Outlook 2010 YES Sort Of * NO
    Outlook 2013 YES Sort Of * NO
    Thunderbird NO YES YES

    * Outlook adds a security message to ALT text. More details below.

    While Apple Mail and Thunderbird don’t block images by default, you can choose to do so in the preferences for each application. I manually enabled image blocking on these clients to see if they supported styled ALT text.

    Outlook 2003, 2007, 2010 and 2013 preface ALT text with a lengthy security message:

    Unfortunately, this makes ALT text in these email clients near useless as it only appears at the very end of Outlook’s security warning.

    Mobile clients have strong support for styled ALT text, which is great news—especially for marketers with heavy Android audiences.

    Mobile Client Blocks Images by Default Displays ALT Text Styles ALT Text
    Android Email (2.0) YES YES YES
    Android Email (4.0) YES YES YES
    Blackberry OS 6 YES YES YES
    iOS 6 NO YES YES
    Windows Phone 7.5 YES NO NO

    Like Apple Mail and Thunderbird, I manually updated my iOS settings to block images in order to observe how this mobile OS handles ALT text.

    Styled ALT text in Android (Samsung Galaxy Nexus):

    Styled ALT text appears identically in the email and Gmail apps in Android.

    Styled ALT text in BlackBerry OS 6 (Torch 9810):

    Styled ALT text in iOS (iPhone 5):

    Image blocking in Windows Phone 7.5 (Nokia Lumia 900):

    ALT Text on Linked Images

    Most images in an email act as links, too. In this case, ALT text for linked images may be underlined or blue in some webmail clients. Yahoo! underlines ALT text in linked images, while Gmail both underlines and ignores specified colors, instead defaulting to a vibrant blue:

    Which Styles Work Best?

    Designers will be happy to know that most styles are supported in most clients. You can readily style your ALT text using things like font-family, font-size, font-weight, font-style, and color.

    Don’t feel like you are locked into using a client’s default typeface, either. Testing reveals that Arial, Georgia, Courier New, Palatino Linotype, Trebuchet MS, and Tahoma all work well in the clients tested above.

    Finally, you shouldn’t let this article limit what you do with ALT text. Feel free to experiment with things like text-shadow, background-color, and even web fonts to see what works for your email design and audience.

    Other Blocking Behavior

    In many email clients, ALT text will disappear once the size or length of the text exceeds the width and/or height of the image container. Due to this behavior, it’s probably best to stick to shorter descriptions and smaller font sizes to avoid having your ALT text removed altogether.

    Almost all email clients allow you to change your settings to display or hide images automatically (although most often hiding/blocking is the default setting), and they’ll prompt users to turn images on for individual messages. Some also allow users to add specific senders to a whitelist or address book, or select a “Always display images from…”

    Практичный email маркетинг

    №43 Как разместить кнопки в «теле» письма

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

    Согласитесь, есть разница:

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

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

    Впрочем, в запасе у нас как всегда есть парочка обходных путей:)

    Как вставить кнопку в письмо

    #1. Разместить кнопку картинкой

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

    Вставляем картинкой в нужное место письма:

    Для почтовых клиентов, которые по умолчанию могут не загружать картинки (например, gmail), страхуемся: прописываем в html-коде изображения стили фона и шрифта , а также alt-текст :

    alt=“Перейти к консультации” height=“38” src=“https://image.png” style=“ font: Bold 16px Verdana, Tahoma, Arial, Helvetica, sans-serif; color: #43708d; background-color: #ffffff; ” w >

    Тогда в отсутствие картинки кнопка тоже будет смотреться приемлемо:

    “Подкладываем” под картинку нужную ссылку и добавляем последний штрих — атрибут title.

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

    Достоинства этого способа: вы можете вставить в письмо любую, сколь угодно “навороченную” графически кнопку.

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

    #2. Разместить кнопку таблицей

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

    В итоге получается совсем неплохо:

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

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

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

    Какой способ предпочтительнее? Здесь нет 100% верного ответа, многое зависит от шаблона, который вы собираетесь использовать.

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

    Кнопки в Мэйл Чимп

    Графический редактор MailChimp ( Drag&Drop ) предусматривает возможность автоматической вставки кнопок:

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

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

    Мэйл Чимп использует в этом случае метод таблицы, однако выполняет всю рутинные операции по вёрстке за пользователя — стоит “перетащить” блок с кнопкой на поле письма, как готовый html-код будет встроен туда автоматически.

    Дополнительная возможность — кнопки расшаривания социальных сетей:

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

    Правда, пока в наличии только кнопки западных соцсетей (Facebook, Twitter, Google+ и проч.). Вставить, к примеру, кнопочку Вконтакте или Одноклассники с помощью этого функционала нельзя.

    Кнопки могут украсить ваше письмо. Правильно оформленная и размещённая кнопка поможет приподнять и клики.

    Однако надеяться, что это “волшебный” рецепт увеличения кликабельности в 2-3 раза, не стоит. Решающую роль в email маркетинге всё-таки играет контент ваших писем. Если предложение подписчика не заинтересует, никакая сила не заставит его сделать клик мыши, даже если всё ваше письмо будет одной сплошной кнопкой ��

    Создание шаблона HTML письма с нуля.

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

    Материалы

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

    • Чудесные 2D иконки от Pierre Borodin на Dribbble
    • Использованные шрифты Oil Can, Source Sans Pro и Mission Script
    • Иконки социальных сетей от Metrize Icons

    Теперь, как мы уже обсуждали в предыдущем уроке, начинаем HTML письмо с XHTML doctype:

    После этого можем начать строить остальную часть письма.

    Создание контейнера и основной таблицы.

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

    Мы также создадим table с шириной 100%. Это и будет служить основным контейнером нашего письма, т. к. стили для body не везде поддерживаются. Если Вы хотите добавить фон для body, Вам необходимо будет применить это свойство для основной таблицы.

    Установите нулевые значения cellpadding и cellspacing, чтобы избежать неожиданного пространства в таблице.

    Внимание: мы собираемся оставить значение border=»1″ для всех таблиц, чтобы видеть скелет макета. В конце мы удалим это значение с помощью простой функции Найти и Заменить.

    Если какой-либо атрибут существует в HTML, используйте его вместо CSS свойства.

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

    Задайте ширину в HTML вместо CSS, используя атрибут width. Золотое правило в разработке HTML писем: если какой-либо атрибут существует в HTML, используйте его, вместо CSS свойства.

    Теперь заменим наше небольшое приветствие ‘Hello!’ на эту таблицу:

    Мы также добавили инлайновые стили, которые задают свойству border-collapse значение collapse . Если мы этого не сделаем, последние версии Outlook добавят небольшое пространство между таблицей и обводкой.

    Создание Структуры и Шапки.

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

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

    Теперь зададим им цвет в соответствии с дизайном. Поскольку bgcolor является валидным атрибутом HTML, мы будем использовать его вместо CSS, чтобы задать цвет фона. Помните, чтобы всегда использовать полное шестизначное значение hex кода, трёхзначные сокращения не всегда работают.

    Хорошо, в следующем шаге сфокусируемся на Строке 1. Нам необходимо задать padding в ячейке и затем вставить изображение.

    Использование Padding

    Когда используете padding в HTML письмах, всегда необходимо задавать каждое отдельное значение (top, right, bottom и left), в противном случае результаты могут быть непредсказуемы. Я считаю, здесь всё ещё можно использовать сокращённую форму записи padding: 10px 10px 8px 5px; , но если у Вас возникнут проблемы, напишите полную форму padding-top: 10px; padding-right: 10px; padding-bottom: 8px; padding-left: 5px;

    Если у Вас всё же возникли большие проблемы с padding (например почтовый клиент удаляет Ваш CSS), не используйте их совсем. Просто используйте пустые ячейки, чтобы создать пространство. Совсем не обязательно использовать gif распорку, можно просто добавить style=»line-height: 0; font-size: 0;» для ячейки, вставить внутрь и задать определённую высоту или ширину. Пример ниже:

    Также обратите внимание, что безопаснее использовать padding в

    тэгах, а не в

    Итак, мы использовали немного инлайновых стилей CSS, чтобы задать padding для ячейки. Теперь вставим изображение, добавив alt и style=»display:block;» . Это делается для того, чтобы некоторые почтовые клиенты не добавляли пробелы под изображением. Отцентрируем изображение с помощью align=»center» для нашего

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

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

    Создание области конента

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

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

    Теперь вставим наш контент и добавим padding для средней ячейки.

    Добавим две колонки с контентом для строки 3. Нам нужен margin между двумя ячейками, но margin не поддерживается, поэтому мы создадим таблицу с тремя колонками и средняя колонка останется пустой.

    Сколько бы я не придерживался процентов, но, если Вам нужен контент определённого размера, может быть непросто перевести его в проценты (например, колонки будут равны 48,1%, что может привести к путанице ). Именно поэтому, учитывая, что наши изображения равны 260px, мы создадим колонки шириной 260px, с ячейкой для margin в 20px посередине. (В общем выходит 540px: 600px ширина таблицы минус padding 30px с каждой стороны). Обязательно обнулите font-size и line-height и добавьте неразрывный пробел в ячейку с margin.

    Также установим valign значение «top» для каждой ячейки, чтобы выравнять их по вертикали, даже если одна из колонок имеет больше содержимого, чем остальные. Значение по умолчанию «middle» .

    Теперь добавим изображение и контент в эти колонки. Т.к. нам нужно несколько строк, вставим ещё одну таблицу, потому что мы не можем использовать colspan или rowspan. Мы также добавим padding между изображениями и скопируем каждую колонку.

    Здесь мы установили ширину изображений с помощью HTML на 100% ширины колонки. Это, опять же, для того, чтобы сделать письмо адаптивным. Мы можем использовать только медиа запросы, чтобы изменить ширину родительского элемента. Нам нужно переопределить высоту в пикселях, потому что используя style=»height: auto» теперь не будет работать везде (кашель, Outlook). Так что зададим в пикселях. Это значит, нам придётся установить height: auto!important этим изображениям используя медиа запросы, чтобы переопределить значение в пикселях, но мы могли бы сделать это с помощью одного класса. Как только установим ширину в процентах, не нужно будет ничего переопределять. Чем меньше элементов для переопределения, тем лучше.

    Footer

    Теперь добавим padding для строки footer.

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

    Создадим другую небольшую таблицу для иконок социальных сетей. Зададим родительской ячейке align=»right» . Убедитесь, что Вы установили border=»0″ на ссылках с изображением (чтобы избежать подчёркивания ссылки) и не забудьте display:block

    Теперь вставим текст и зададим ширину для ячеек, на всякий случай, даже если между ними достаточно пространства. Установим ширину этой ячейки на 75% и других на 25%.

    Ну вот и всё! Наша вёрстка закончена.

    Валидация

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

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

    Стилизация текста

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

    Также добавим эти стили ко всем другим ячейкам текста:

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

    И вот оно! Всё готово! Время, чтобы выключить границы и увидеть, как всё красиво выглядит. Пройдитесь по коду и замените каждое border=»1″ на border=»0″

    Сейчас всё выглядит немного грустно, плавает в белом пространстве, так что давайте вернёмся к нашей первой ширине 600px и добавим:

    Теперь ничего не плавает в пространстве. В качестве последнего шриха я добавлю 30px padding к нижней части самой первой ячейки, чтобы предотвратить внезапную остановку нашей электронной почты на некоторых почтовых клиентах (таких, как Apple Mail), и 10px padding сверху, так, чтобы наш синий заголовок имел немного воздуха.

    И это всё! Мы готовы к финальному тесту.

    Готово!

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

    Сейчас самое подходящее время для финального теста и тогда Ваше электронное письмо готово к отправке!

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

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

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

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

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

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

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

    Здесь тоже важно не забывать про длину месседжа — люди все больше читают почту со смартфонов, где почтовые клиенты наглым образом обрезают тему. У вас остается всего 30–35 отображаемых символов, чтобы сказать о самом важном и заинтересовать читателя. Лучше потратить их на броскую и цепляющую тему, чем на имена.

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

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

    Хорошие темы для рассылок:

    • Ильяхов рекомендует! Новая книга «Школа контента» («Альпина паблишер») — отсылка к аудитории
    • Как 400 тысяч превратились в 700 миллионов. «Мосигра»: бизнес на свои (МИФ) — интрига
    • Игра предлогов — оцените свои шансы на Железный трон (Skyeng) — ситуативка и аллюзия
    • Я родила в самолете (Aviasales) — интрига
    • Не покупайте это… (Belluce из спама) — провокация

    • Информация от BurdaStyle
    • Обращение к предпринимателям («Второй паспорт»)

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

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

    Если вы не настроили прехедер вручную, туда может улететь технический текст:

    Кому-то не нравятся неформальные «Привет», им подавай только «Здравствуйте» и обязательно «Вы» с большой буквы. Другие спокойно воспримут «Йоу, ребзя, чекчек», как у Nice And Easy. А в транзакционных письмах, которые идут одно за одним с небольшим временным промежутком, каждый раз здороваться вообще неуместно.

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

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

    В продающих рассылках можно писать от имени сотрудника/основателя или обойтись стандартным приветствием:

    Здравствуйте, пишет вам Имя Фамилия, редактор такого-то журнала

    Информационные рассылки позволяют в принципе отказаться приветствия. Например, как в рассылках Aviasales, «Нетология», «ЛитРес», «Альпина Паблишер», «Комплето», где исьма сразу начинаются с контента. Читателям таких материалов важна полезная информация, а не форма приветствия.

    Подробнее о разных типах email-рассылок мы рассказывали в статье «С чего начать email-маркетинг: 5 шагов к первой рассылке».

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

    В рассылке «Клуба Эффективных Лидеров» страдает все: верстка, структура текста, смысловая подача. Письмо длинное, путаное и посвящено сразу нескольким разрозненным темам:

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

    Как это можно исправить? Две минуты форматирования и редактуры текста, и у нас есть новая, более привлекательная рассылка:

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

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

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

    Поддерживать лояльность аудитории:

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

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

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

    Максимальная длина темы рассылки в мобильных приложениях — 30–35 символов, в веб-версиях почтовых сервисов — 80–140 символов. Вся остальная информация в общем списке писем не отображается.

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

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

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

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

    Email-рассылка: 10 замечательных примеров для подражания

    Время чтения: 9 минут Нет времени читать? Нет времени?

    Надоело тратить свое время на написание интересных рассылок, которые читают, в лучшем случае, 10% ваших подписчиков? Больно смотреть на то, как число подписчиков становится все меньше и меньше с каждым днем? Вы так стараетесь, а отклик почти нулевой?

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

    1) BuzzFeed

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

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

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

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

    2) Brain Pickings

    Если вы взглянете на следующее письмо, скорее всего, оно покажется вам странным:

    «Да это же не письмо, а целый пост!» – скажете вы и будете правы. Наверное, вы видите такую длинную email-рассылку впервые, впрочем, как и я.

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

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

    3) RunKeeper

    Подписчики сайта RunKeeper просто в восторге от регулярных рассылок, которые они получают на свою почту. Взгляните на одну из них, и вы поймете, почему:

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

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

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

    4) 1-800 CONTACTS

    Когда речь заходит об email-маркетинге, многие из нас забывают о так называемых «транзакционных» сообщениях. Они отправляются автоматически, когда человек совершает определенное действие на веб-сайте (например, заполняет форму или покупает продукт). Как правило, транзакционные email-сообщения представляют собой стандартный текст, который не задерживается в памяти клиентов. Но только не в случае с компанией 1-800 CONTACTS, которая занимается продажей контактных линз!

    Поскольку процесс оформления заказа отнимает достаточно много времени у ее клиентов (они должны заказать линзы, убедиться в их наличии, получить подтверждение врача и т.д.), компания 1-800 CONTACTS решила облегчить им жизнь, отправляя автоматически сгенерированные письма, в которых содержится индикатор состояния заказа:

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

    5) Salt House Inn

    Подобно компании RunKeeper, маркетологи гостиницы Salt House Inn используют восхитительные изображения в своих email-сообщениях:

    Самое замечательное в том, что они получили эти картинки совершенно бесплатно. Узнаете знаменитую квадратную форму? Различные фильтры? Наверняка. Ведь данные изображения взяты из Instagram.

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

    6) Nosh.On.It

    Подписчики блога Nosh.On.It – настоящие гурманы. Каждый день, они получают новые рецепты восхитительных блюд на свой мэйл. Вот пример одного из них:

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

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

    В разделе «Рецепт» также расположены кнопки Facebook и Pinterest, позволяющие в одно мгновение распространить полученную информацию в социальных сетях.

    7) Eurostar

    Вы когда-либо получали письмо, после прочтения которого вам сразу хотелось очутиться в другом месте? Вот одно из таких:

    В чем же секрет эффективности данного письма? Во-первых, это замечательные фотографии европейских столиц, сделанные профессиональным фотографом. Во-вторых, броский призыв к действию («Подать заявку сейчас»), который повторяется два раза: в первом экране и за его пределами. И, наконец, оригинальное приветствие – «Бонжур!». Читая его, получатели письма сразу представляют, как они гуляют по улочкам Парижа или сидят в уютном кафе, наслаждаясь круассанами.

    8) AT&T

    Еще один пример адаптивного дизайна – email-сообщение от компании AT&T, в котором рекламируется новая модель телефона. На экране компьютера оно выглядит следующим образом:

    А на мобильном телефоне оно приобретает уже другой вид:

    Как вы могли заметить, в первом варианте всего одна кнопка призыва к действию – «Купить сейчас» (выделено красным). Прямо под ней указан номер телефона, по которому можно связаться с компанией. Во втором варианте, мы видим уже 2 кнопки призыва к действию: «Купить сейчас» и «Позвонить сейчас». Причем, вторая стоит на первом месте. Это позволяет клиентам, просматривающим письмо с мобильных устройств, сразу набрать номер компании.

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

    9) Brit + Co

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

    Формировать ожидания, а затем оправдывать их в самом письме – задача не их простых. Однако компании Brit + Co удалось с ней справиться. Так выглядит строка темы одного из email-сообщений, отправленного подписчикам компании:

    А вот и само письмо:

    Оказывается, фраза «Дальше можете не искать!» в строке темы не была шуткой. Ведь открывая письмо, вы сразу видите 9 различных нарядов на Хэллоуин. Несмотря на то, что получатель письма должен кликнуть на кнопку, чтобы просмотреть все костюмы, он все же остается довольным – компания сдержала обещание, данное ею в теме письма.

    10) Uber

    И, наконец, последний пример – это письмо от транспортной компании Uber, которая предлагает пассажирам специальное приложение для связи с водителями:

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

    Взгляните на это письмо еще раз. Что бросается вам в глаза в первую очередь? Наверняка, это слоган «лучше, быстрее и дешевле, чем такси» (1), ярко-голубая кнопка с надписью «Теперь UberX обойдется вам на 30% дешевле, чем такси» (2) и, конечно же, новые тарифы (3). Именно эту информацию хотела донести компания Uber до своих клиентов.

    Цель данного письма – уведомить клиентов о новом, выгодном предложении. Компания Uber не стремится превратить получателей письма в лидов и клиентов. Письмо адресовано текущим клиентам компании. Поэтому в нем выделена только та информация, которую они должны знать.

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

    Ставьте во главу угла потребности своей аудитории

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

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

    1. Для кого предназначено данное письмо?
    2. Какой контент необходимо в него включить, чтобы заинтересовать свою аудиторию?
    3. Какова цель данного письма? (проинформировать подписчиков, побудить их к покупке и т.д.)

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

    Мастер Йода рекомендует:  На одном сайте можно использовать различные методы мобильной адаптации
    Добавить комментарий