0,0
рейтинг
31 августа 2011 в 05:58

Разработка → Почтовые рассылки: письменная кухня tutorial

CSS*


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

Схема рассылки



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

Основа


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

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<table bgcolor="#f4f4f4" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;">
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
<tr><td align="center">Служебный блок "Отображение"</td></tr>
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
<tr><td align="center">Остальная часть письма</td></tr>
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
</table>

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

<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="0"/></div></td></tr>

Это 10 пиксельная распорка которая дает нам железный отступ между блоками. В качестве изображения используем прозрачный .gif файл 10х10 пикселей. Если вас крайне заботит корректное отображение в TheBat!, то фон .gif файла должен совпадать с цветом фона места, где он находится, иначе TheBat! может окрасить прозрачные пиксели в черный цвет, что не так желательно для отображения.

Служебный блок «Отображение»


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

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

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

Верстается этот блок в нашем случае достаточно просто:

<span style="font-family:tahoma; font-size:11px; color:#404040;">Здравствуйте, %username%. Если данное письмо отображается некорректно, включите картинки в вашем почтовом клиенте 
или перейдите <a href="%view_in_browser_link%" style="color:#0077c0 !important;" target="_blank">этой ссылке</a> для просмотра письма в браузере. Добавьте, пожалуйста адрес <a href="%mailto_link%" style="color:#0077c0 !important;" target="_balnk">mail@sampleshop.com</a> в адресную книгу,
чтобы новостные рассылки не помечались как спам.</span>

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

Остальная часть письма


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

<table align="center" width="600" cellpadding="0" cellapscing="0" style="border-collapse:collapse;">
<tr><td><div style="line-height:0;"><img src="hut.jpg" width="600" height="88" alt="sampleshop.com" title="sampleshop.com"/></div></td></tr>
<tr><td>
<table bgcolor="#f4f4f4" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;">
<tr>
<td>
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellapscing="0" style="border-collapse:collapse; border-left:#e5e5e5 1px solid; border-right:#e5e5e5 1px solid; border-bottom:#e5e5e5 1px solid;">
<tr><td>Приветствие</td></tr>
<tr><td height="30"><div style="line-height:0;"><img src="blank.gif" width="30" height="30"/></div></td></tr>
<tr><td>Контент</td></tr>
</table>
<table width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;">
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
<tr>
<td width="10" height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td>
<td>
Служебный блок "Безопасность"
Служебный блок "Отписка"
</td>
<td width="10" height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td>
</tr>
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
</table>
</td>
</tr>
</table>
</td></tr>
</table>

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

Блок «Приветствие»


Блок приветствия не критичен, но является хорошим тоном. Мы подбираем картинку подстать ЦА. В нашем случае изображение ориентировано на «семейную» аудиторию, соответственно мы хотим продать товары для семьи, а не какие либо гиковские гаджеты или оружие ;) Верстаем так:

<table align="center" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;">
<tr>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
<td width="215"><div style="line-height:0;"><img src="family.jpg" width="215" height="130" alt="happy family"/></div></td>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
<td><span style="font-family:tahoma; font-size:12px; color:#404040;">Здравствуйте, %username%,
[br/][br/]В интернет-магазинах каждый найдет себе товар по вкусу. Исполняйте свои желания, удивляйте и радуйте семью и друзей![br/][br/]Приятных покупок! Команда %shopname%</span></td>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
</tr>
</table>

В который раз упомяну: В коде теги BR заключены в квадратные скобки потому что хабрапарсер съедает эти теги в листингах кодов.

Блок «Контент»


В контентном блоке применен классический прием привлечения внимания в соответствии с тепловой картой того самого внимания. Карта уже ранее использовалась мною в статьях, но первоисточником является Якоб Нильсен — специалист по юзабилити из SUN Microsystems.

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

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

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

Верстается блок по аналогии с «Приветствием», но тем не менее привожу листинг кода:

<table align="center" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;">
<tr>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
<td width="120"><div style="line-height:0;"><img src="gift.jpg" width="120" height="120" alt="happy family"/></div></td>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
<td><span style="font-family:tahoma; font-size:12px; color:#404040;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</span>[br/][br/]<img src="buy-now.jpg" width="120" height="25" alt="Купить сейчас!" title="Купить сейчас!"/></td>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
</tr>
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
<tr>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
<td width="120"><div style="line-height:0;"><img src="gift.jpg" width="120" height="120" alt="happy family"/></div></td>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
<td><span style="font-family:tahoma; font-size:12px; color:#404040;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</span>[br/][br/]<img src="buy-now.jpg" width="120" height="25" alt="Купить сейчас!" title="Купить сейчас!"/></td>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
</tr>
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
<tr>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
<td width="120"><div style="line-height:0;"><img src="gift.jpg" width="120" height="120" alt="happy family"/></div></td>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
<td><span style="font-family:tahoma; font-size:12px; color:#404040;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</span>[br/][br/]<img src="buy-now.jpg" width="120" height="25" alt="Купить сейчас!" title="Купить сейчас!"/></td>
<td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td>
</tr>
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
</table>

Блоки «Безопасность» и «Отписка»


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

И наконец о наболевшем — отписка! Пример изображенный на макете крайне удачен. Вы сообщаете пользователю причину получения им письма, а так же уточняете кому оно было адресовано. В случае с PayPal механизм утроен просто идеально, я считаю! При нажатии на ссылку «отписаться», вы попадаете на адресованную вам страницу, где вас спрашивают: «Вы действительно хотите отписаться?», и более того, интерфейс подразумевает выбор того, от чего вы хотите отписаться: «Новости, служебные сообщения, прочие оповещения».

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

Ну и наконец, код верстки служебных блоков:

<table align="center" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;">
<tr><td><span style="font-family:tahoma; font-size:10px; color:#404040;"><b>Как определить, не является ли полученное Вами сообщение поддельным?</b>[br/]В сообщении, которое действительно отправлено от имени %shopname%, содержится обращение к Вам по имени и фамилии или по названию Вашей фирмы. В нем не содержится просьб раскрыть Вашу конфиденциальную информацию, например, Ваш пароль, номер банковского счета или информацию о кредитной карте. В большинстве поддельных сообщений содержатся угрозы о том, что Ваша учетная запись подвергнется риску, если Вы не предпримете срочных мер. Сообщение электронной почты, в котором от Вас требуют срочно предоставить Ваши личные сведения конфиденциального характера, как правило, является попыткой мошенничества. Также поддельные сообщения часто содержат опечатки и грамматические ошибки, либо написаны в стиле, не соответствующем содержанию Вашей учетной записи %shopname%. Не нажимайте ни на какие ссылки в подобных подозрительных сообщениях. Нажмите <a href="#" target="_blank" style="color:#0077c0 !important;">сюда</a>, чтобы узнать как защитить себя от обманных и мошеннических действий.</span></td></tr>
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
<tr><td align="center"><span style="font-family:tahoma; font-size:11px; color:#0077c0 !important;"><a href="#" target="_blank" style="color:#0077c0 !important;">Забыли пароль?</a> | <a href="#" target="_blank" style="color:#0077c0 !important;">Справка</a> | <a href="#" target="_blank" style="color:#0077c0 !important;">Центр обеспечения безопасности</a> | <a href="#" target="_blank" style="color:#0077c0 !important;">Контакты</a></span></td></tr>
<tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr>
<tr><td><span style="font-family:tahoma; font-size:10px; color:#404040;">Это сообщение электронной почты отправлено на адрес dudeonthehorse@gmail.com, поскольку в настройках электронной почты вы подписаны на получение новостной рассылки и сообщений об обновлениях %shopname%. [br/]Отказаться от рассылки вы пожете <a href="#" target="_blank" style="color:#0077c0 !important;">по  этой ссылке</a>.</span></td></tr>
</table>

В итоге получаем!




PS


Вот так вот и работаем. С виду кажется, что кода много, но при правильном использовании табуляции, код вполне читабелен. Если не осилите/нет желания сходить с ума, обращайтесь. Удачи в работе!
Артур Кох @dudeonthehorse
карма
71,7
рейтинг 0,0
Email developer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (51)

  • 0
    По верстке почтовых писем пора бы написать cookbook… а пост хорош, пригодится
    • +1
      Все никак не соберусь, но пора бы ;) Спасибо!
  • 0
    Скажите пожалуйста, применяются ли в рассылке веб-формы?
    Насколько это частая практика сейчас? Существуют ли крупные компании, которые практикуют рассылку с формами на регулярной основе?
    Заранее спасибо.
    • 0
      Нет, в почтовых рассылках формы не используются. Вы можете добиться психологического эффекта вставкой изображения, на котором нарисована форма и навесить не на эту картинку ссылку, которая будет вести на страницу с фактической формой. Такой трюк применяется.
      • 0
        *не на эту картину — «не» лишнее
    • 0
      Это был вопрос к автору или вообще? Если второе, то ЖЖ активно использует формы в письмах. Конкретно в уведомлениях о новых комментариях с возможностью сразу ответить из письма. Только работает это кажется только в веб-интерфейсе, из клиентов ответить скорее всего не получится
      • 0
        Ну, ЖЖ известен своей консервативностью.
        Поскольку мне очень надо для дела (фильтровать формы или нет), я интересуюсь, существуют ли современные актуальные сервисы, которые осуществляют рассылку с веб-формами.
        По поводу ЖЖ — понятно, довод принят.
        Ещё кто-то?
        • 0
          Да нет, я спорить не собирался. Просто выше ответили категорично «Нет», я поправил, что всё-таки используется иногда.
          • 0
            Нет, что вы, я не к тому. За информацию — большое спасибо.
            Может ещё сможете кого-то назвать, кто рассылает веб-формы?
            • 0
              Честно говоря не припомню, чтобы кто-то ещё рассылал письма с формами. Если что-нибудь увижу или вспомню, постараюсь не забыть и написать
  • +7
    «Письменная кухня» мною было прочитано совсем иначе… ох, заработался.
    • +1
      Я сам порой так прочитываю ;) Вы не одиноки
    • +3
      И я так прочитал ))) а в остальном, автору спасибо за пост, пригодится…
  • +1
    Купитить сейчас!
    • 0
      Об ошибках я упопмянул в топике ;)
  • 0
    Хороший пример. Добавьте архив с готовой версткой.
    • +1
      Код для ознакомления с принципами работы, а не для голой копипасты. Поэтому архив и не приложен.
      • 0
        Мне, например, проще в Notepad++ знакомиться, когда я могу в браузере видеть результат моих изменений кода.
        • +1
          Это все прекрасно, но с кодом надо работать руками, и да в notepad++. Вот вам кажется что тут кода много, а пишется он на раз.
  • –9
    бесполезный пост.
    всё это умещается в три предложения и одну картинку.

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

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

    habrahabr.ru/blogs/freelance/127404/
    • +1
      Спасибо, повеселили ;)
  • 0
    Так все-таки, табличная верстка все еще остается востребованной?
    • +2
      эта верстка в первую очередь востребована в электронных письмах, так как дивы там не канают
      • 0
        Просто как раз формирую шаблон рассылки, а версткой уже шесть лет не занимался. Приятно узнать, что таблицы все еще остаются 100% совместимы со всеми приложениями.
    • 0
      Я бы сказал, что эта верстка чересчур табличная, и тут нужна только она ;)
  • 0
    Вместо



    лучше использовать

  • 0
    Вместо
    <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="0"/></div></td></tr>
    лучше использовать
    <tr><td height="10" nowrap="nowrap"></td></tr>
    • 0
      Чем этот вариант лучше? Вы готовы подписаться под этим решением. Вы точно уверены, что оно будет железно работать во всех клиентах?
      • 0
        Сверстано мною 100+ писем все работает.
        • 0
          Hotmail, Windows Live Mail, Apple Mail 3-4, AOL Mail, Lotus Notes 8-8.5 в этих тестили?
          • –1
            ну проверь, коль столько сомнений.
            • 0
              Я не вижу смысла убеждаться, ибо мой вариант работает железно и сверстано 1000+ писем
              • –1
                К чему тогда столько расспросов. Никто же не просит, чтобы вы подписывались под этим постом.
                • 0
                  Я своей публикацией утверждаю, что это железно работает. Вы же несколько голословны.
                  • –1
                    Много Я и демагогии… 0 полезной информации последних комментариях :)
                    Думаю лучше вам проверить такой способ и с народом поделится новым опытом.
                    Новое пугает, понимаю…
                    • 0
                      Отнюдь, всего 2 «Я» на 2 каммента. Вы лишь даете совет ничем его не подкрепляя. В моих же топиках все обосновано, доказано и протестировано.
      • 0
        меньше лишнего кода и не нужны картинки
    • 0
      Ваш код имеет много дыр, к примеру пустая ячейка таблицы, в которой нет даже неразрывного пробела, в ряде браузеров будет вести себя не так предсказуемо, как вам бы того хотелось. Молчу уже про heigh=«10», кроссбраузерность которого весьма сомнительна.

      В коде автора тоже есть моменты, так img, с непрописанным пустым альтом, может вызывать проблемы.
      Ну, и обработка стиля «line-height:0;» тоже слабое звено.

      В бородатые годы, когда самым требовательным монстром был NN 4.7x, для подобных целей я использовал следующую непробиваемую конструкцию:

      , где br в конце картинки отсекает символ переноса строки, который возникал в большинстве интерпретаторов.

      Не знаю, насколько это сработает в наши дни, но через пару часов буду верстать рассылку, там и увижу)
      • 0
        А вот и непробиваемый код:
        <td><tr><img src="spacer.gif" width="10" height="1" alt="" title="">
        </tr></td>


        И да, я промахнулся с комментарием)
        • 0
          То есть адресовано не мне? ;) Я уже начал готовить свой ответ на «дыры»
        • 0
          Height:10px идеально работает как раз в тандеме с line-hight:0;

          Какие проблемы вызывает пустой alt? Указываю альты на необходимых картинок для пользователя — не более.
          • 0
            Даже поясню: высоту указываю и для ячейки и для картинки + line-height для того, чтобы:
            1. была железная распорка
            2. чтобы под картинкой-распоркой не было небольшого зазора.
            • 0
              > 2. чтобы под картинкой-распоркой не было небольшого зазора.

              Вот! Раньше для этого использовался простой br после картинки.
              Сейчас это не работает?
              • 0
                Только что с ходу: Chrome 13 Win7 Gmail — не работает.
                • 0
                  что ж, будем тогда дублировать br стилем
            • +1
              чтобы под картинкой не было зазоров работает код:

              <img src="image.gif" alt="" height="32" border="0" style="display:block;" />
              • 0
                Да, в gmail этот метод работает. Обязательно протестирую в других почтовиках, спасибо.
          • 0
            Ну все мои познания верстки относятся к периоду 1999-2006 годов. По тем временам я знал о ней все; что с этим зоопарком происходит сейчас я даже не представляю)

            Поясню про пустой альт: в каком-то браузере (сейчас уже и не припомню в каком), при просмотре сайта с отключенными изображениями на месте картинок, не имеющих тайтлов, появлялся текст = имени картинки. Таким образом распорка высотой в один пиксель, не имеющая пустого тайтла, превратилась бы в текст «blank.gif», отчего верстка бы поплыла.

            Сейчас это уже не актуально?
            • 0
              Кстати вы, возможно, правы. Если мне не изменяет память, такое бывало в ie5-6
            • 0
              В любом случае атрибут alt не лишний.
      • 0
        Этот код
        <tr><td height="10" nowrap="nowrap"></td></tr>
        чтобы работал правильно, должен быть без неразрывного пробела & nbsp; только параметры nowrap height и width

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