PRO IT

профессиональное мнение

  • IT
    • Android
    • IP телефония
    • Linux
    • Mac OS X
    • Железо
    • Интернет
    • Программирование
    • Софт
  • Бизнес
  • WOW!
  • Литература
    • Аудиокниги
    • Книги
    • Публикации
  • Музыка
  • Сервисы
    • Генератор паролей Онлайн
    • Код ответа сервера
    • Количество символов в тексте
  • О блоге
    • Написать автору
    • Как написать гостевой пост в блоге ablex.ru ?
    • Реклама в блоге
  • IT
    • Android
    • IP телефония
    • Linux
    • Mac OS X
    • Telegram
    • Железо
    • Интернет
    • Программирование
    • Софт
  • WOW!
  • Бизнес
  • Литература
    • Аудиокниги
    • Книги
    • Публикации
  • Музыка
  • Сервисы
    • Аналитика
      • Анализ сайтов
      • Скорость сайта
    • Дизайн
    • Продвижение
      • СЕО
        • СЕО анализ сайта
      • СММ
    • Разработка
  • События
  • Юмор
PRO IT Интернет Верстка рассылки e-mail одним изображением


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

Ablex · Авг 15, 2013 · 5 комментариев
Верстка одной картинки в email

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<table background="_Ссылка на изображение_" height="_высота изображения_"; width="_ширина изображения_"; cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="height: 150px;" colspan="3">
        <a href="_гиперссылка_" title="_описание гиперссылки_‚" style="display:block; height:150px;"></a>
      </td>
    <tr>
      <td style="height: 430px;" colspan="3">
<a href="_гиперссылка_" title="_описание гиперссылки_" style="display:block; height:430px;"></a>
      </td>
    </tr>
    <tr>
      <td style="height: 475px;" colspan="3">
<a href="_гиперссылка_" title="_описание гиперссылки_" style="display:block; height:475px;"></a>
      </td>
    </tr>
    <tr>
      <td style="height: 150px;" colspan="3">
<a href="_гиперссылка_" title="_описание гиперссылки_‚" style="display:block; height:150px;"></a>
      </td>
    </tr>
  </tbody>
</table>
<div style="text-align: center; color: white;">
  _Текст к письму, для отображения в заголовке в списке писем_
</div>

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

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

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

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

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

1
2
3
<td style="height: 150px;" colspan="3">
  <a href="_гиперссылка_" title="_описание гиперссылки_‚" style="display:block; height:150px;"></a>
</td>

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

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

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

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

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

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

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

  • Facebook
  • Twitter
  • Google+
  • LinkedIn
  • VKontakte
  • E-mail

Интересное по теме:

  • Рассылки купонных сайтов: мамонты эффективной рекламыРассылки купонных сайтов: мамонты эффективной рекламы
  • Onpay.ru: негативный опыт работыOnpay.ru: негативный опыт работы
  • Inbox от Gmail: еще один шаг в личную эффективностьInbox от Gmail: еще один шаг в личную эффективность
  • 6 главных трендов e-mail маркетинга в 2018 году6 главных трендов e-mail маркетинга в 2018 году
Подпишитесь на рассылку
Метки: e-mail, верстка, рассылка

Ablex

Свежие записи

  • Удобный телеграм бот для поиска скидок и купонов @AllKuponBot
  • 6 главных трендов e-mail маркетинга в 2018 году
  • Magento 2.1: Добавление категорий и товаров по API
  • Анализ трафика CPA партнеров в Google Analytics. Борьба с фродом
  • WordPress WooCommerce: добавление категорий и товаров по API в каталог

Лучшие метки

Google AnalyticsAndroidаналитикаMac OSwordpressIP-телефонияbluetoothVPNSEOSIPRedmineAsteriskсервисIP-АТСUbuntuSamsung Galaxy S3Raspberry PiА/Б тестFreePBXgoogle

Авторы

  • Ablex (RSS) (200)
  • AD (RSS) (4)
  • TXT (RSS) (4)

Рекомендуем

  • Хостинг TimeWeb
  • IP телефония Zadarma
  • CPA сеть Admitad
Карта сайта
© 2010 - 2017 PRO IT. Все права защищены. Копирование материалов возможно только с установкой активной ссылки на ablex.ru
125 запрос 0,249 секунд. Этот блог летает на хостинге TimeWeb.
Разработка и поддержка RoiPoint
Top