Верстка рассылки e-mail одним изображением

Верстка одной картинки в email
Интернет
5

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

К сожалению, верстка e-mail — особая наука. Тут нельзя использовать css, нужно аккуратно использовать стили и фоновые изображения. А готовый макет письма требует теста на всех популярных бесплатных почтовых сервисах, т.к. одно и то же письмо может прекрасно отображаться в почте Яндекса и не работать в Gmail.

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

Код шаблона e-mail рассылки:

Описание тегов:

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

Основное изображение:
_ссылка на изображение_ — ссылка на основное изображение вашей e-mail рассылки
_высота изображения_ — высота изображения в пикселях, например, «1400»
_ширина изображения_ — ширина изображения в пикселях, например, «700»

Разметка ссылок:
_гиперссылка_ — собственно сама ссылка, в формате «http://www.ablex.ru»
_описание гиперссылки_ — надпись, которая будет отображаться при наведении на часть картинки, с этой ссылкой.
Например:
Подсказка, при наведении на ссылку

Размер блока ссылки

Здесь так же нужно заменить параметры «height». В описании каждой части таких параметра 2. Один в теге «td», другой в теге ссылки «a». Это одинаковые значения. Их необходимо заменить под размер той части изображения, где нужна отдельная ссылка.
Пожалуй, это самая сложное. Я использую для этого режим «просмотр кода элемента» в броузере Google Chrome. При редактировании в нем параметров они сразу отображаются на экране. Потом, подобранные параметры переносятся в основной макет.

Ваш текст в заголовке, рядом с темой письма

И наконец,
_Текст к письму, для отображения в заголовке в списке писем_ — текст, предназначены для отображения после темы, в списках писем. Например, так он отображается в Gmail:
Текст письма в заголовке Gmail
Текст вставлен в письмо и отображается белым шрифтом (т.к. атрибут display:none в e-mail не работает), поэтому в большинстве случаев при просмотре самого письма не виден. При желании, можно так же задать мелкий, едва заметный шрифт для этого текста.

Работоспособность

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

Таким образом, научившись пользоваться разметкой единого изображения для отправки по e-mail можно сэкономить много собственного времени и времени дизайнера, не нарезая изображение на куски. Кроме этого такой подход защищает от ошибки «неполной прогрузки» письма. Когда, например, почта Яндекса по каким-то причинам помещает в собственный кеш и исправно показывает половину изображений вашей рассылки, а вторую половину не отображает. И других редких, сложных и странных ошибок. Кроме того, если вы используете постоянно один и тот же формат рассылки, с помощью однократно подготовленного шаблона подготовка к рассылке ускоряется в разы.

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

  • KuperTem

    Спасибо, надо будет попробовать при следующей рассылке! Кстати, пользуюсь программой EmailFinder. С емаилфайндером я гораздо лучше собираю адреса, чем с любой другой программой, отсеивая нежелательные. Если кому интересно, сайт программы такой: http://www.emailfinder.ru, у них демоверсия есть, можно ознакомиться.

    • ablex

      Добрый день, KuperTem!
      Это статья не про сбор e-mail из открытых источников. Я не рекомендую этого делать не с помощью вашей программы, не с помощью любой другой. В арсенале интернет-маркетологов есть множество эффективных, законных и не раздражающих пользователей инструментов, в том числе и бесплатных.

      • KuperTem

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

        • ablex

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

Тренды e-mail маркетинга 2018
Бизнес
6 главных трендов e-mail маркетинга в 2018 году

К чему готовиться Digital специалистам и E-mail маркетологам в 2018 году? С учетом каких тенденций строить план развития E-mail канала? Поделиться «6 главных трендов e-mail маркетинга в 2018 году» FacebookTwitterGoogle+LinkedInVKontakteE-mail Интересное по теме:Домашний сервер — что можно сделать из старого компьютера?Верстка рассылки e-mail одним изображениемМультифон-фантом или пособие неудачникаРассылки купонных сайтов: …

Выявление случаев мошенничества в СРА
Интернет
Анализ трафика CPA партнеров в Google Analytics. Борьба с фродом

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

Web Push уведомления для сайта
Интернет
3
Web Push уведомления для сайта

Вы уже заметили, что в блоге появилась «модная» сегодня функция — подписка на Push уведомления. Для посетителей это еще одна возможность первыми узнавать о появлении новых актуальных статей. Для блогера, это возможность постоянно поддерживать контакт со своей аудиторией. В этой статье мы разберем, что такое Web Push уведомления, как они …

Top