0,0
рейтинг
21 февраля 2011 в 21:14

Разработка → Верстка почтовых рассылок: разбор полетов tutorial

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



Для пропустивших


Верстка почтовых рассылок
Юзабилити почтовых рассылок
Верстка почтовых рассылок: взгляд изнутри

Основа


В качестве основы берем таблицу в 710px с обнуленными отступами и коллапсом. Как писалось в ранних топиках, коллапс необходим для того, чтобы избежать однопиксельных отступов между ячейками в MS Outlook. Так же зададим серую рамку для обрамления основы.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<table width="710" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border:#cccccc 1px solid;">
<tr><td border="0" style="border:none;">шапка</td></tr>
<tr><td border="0" style="border:none;">тело письма</td></tr>
<tr><td border="0" style="border:none; border-top:#1667b2 5px solid;">футер</td></tr>
</table>
</body>
</html>

Шапка


В данном примере шапка вполне проста, а текст, применяемый в ней не критичен для выделения и копипаста, поэтому всю шапку целиком можно оформлять картинкой. Чувствительные для клика области(например кнопка Learn More в шапке) устанавливаются на основе тега map.

<map id="map" name="map"><area shape="rectangle" coords="700,200,602,162" href="http://domain.com" alt="learn more" /></map>
<img width="710" height="195" src="http://habrastorage.org/storage/2eaa88b4/0e1af19d/85f2e20d/e389e5e2.png" usemap="#map"/>

Тело письма


В теле письма будут находиться более сложные конструкции, по той простой причине, что все отступы будут выполняться при помощи распорок. Напомню что в роли распорки выступает blank.gif(однопиксельный прозрачный .gif файл — 1450821408255127738039), который гарантирует железное отображение верстки везде.

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

Внимание! Еще одно важное замечание, качающееся имитации отступов. Gif распорка не может быть по высоте меньше стандартного line-height. Поэтому в примере кода тела письма(в случае со списками) вы можете наблюдать способ уменьшения распорки по высоте. Выполняется это так:

<tr><td height="5"><div style="line-height:0;"><img src="1450821408255127738039" width="5" height="5" /></div></td></tr>

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

Футер


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

<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border:none;" border="0">
<tr>
<td width="20" height="20"><img src="1450821408255127738039" width="20" height="20" /></td>
<td/>
<td/>
<td width="20" height="20"><img src="1450821408255127738039" width="20" height="20" /></td>
</tr>
<tr>
<td/>
<td align="left">
<span style="font-family:Tahoma; font-size:12px; color:#404040;">domain.com (c) 2011<br/><a href="%unsucscribe_link%" target="_blank" style="font-family:Tahoma; font-size:12px; color:#404040; text-decoration:none;">unsucsribe</a> from all lists</span>
</td>
<td align="right"><span style="font-family:Tahoma; font-size:12px; color:#404040;">St.Petersburg +7(812)123 45 67 <br/> Moscow         +7(495)123 45 67</span></td>
<td/>
</tr>
<tr>
<td width="20" height="20"><img src="1450821408255127738039" width="20" height="20" /></td>
<td/>
<td/>
<td width="20" height="20"><img src="1450821408255127738039" width="20" height="20" /></td>
</tr>
</table>

Прошу обратить внимание на то, что в коде футера после строчки domain.com 2011, а так же после телефонного номера Питера ставится тег br(хабрапарсер его почему-то съедает). Так же хочу заострить внимание на ссылке на отписку от рассылки. Мы умышленно сделали ее цветом текста и убрали декорирование в виде подчеркивания, что делает ссылку минимально примечатеьной, но в тоже время мы — хорошие — мы вставили ссылку на отписку в тело письма.

P.S. Не знаю на сколько сильно я взорвал ваш мозг своими примерами, но если разбор более сложных макетов вам интересен, пишите, сделаем! :)

UPD: а вот тут меня по делу поправляют.
Артур Кох @dudeonthehorse
карма
72,7
рейтинг 0,0
Email developer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

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

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

  • +5
    > Мы умышленно сделали ее цветом текста и убрали декорирование в виде подчеркивания, что делает ссылку минимально примечатеьной, но в тоже время мы — хорошие — мы вставили ссылку на отписку в тело письма.

    Мы умышленно написали информацию о дополнительном сборе по открытию кредита 3 шрифтом серого цвета в самом конце договора, но в тоже время мы — хорошие — мы и всетаки упомянули об этом сборе в договоре.
    • +1
      Неправильно. Тем, кому надо будет отписаться — найдут и отпишутся, так как многие знают про магическую кнопку unsubscribe. А что искать в договоре знают не все
      • 0
        Да, Илья, верно мыслите!
      • +1
        Я считаю правилами хорошего тона при организации рассылок
        — наличие в каждом письме кнопки «отписаться»
        — нажатие по кнопке сразу отписывает от рассылки (как максимум страница подтверждения «вы действительно хотите отписаться от рассылки»), без дополнительных авторизаций, вводов паролей, уточнений адреса почты и т д
        — кнопка действительно работает

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

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

        Не говоря уже о том, что если уж и делать ссылку то можно было бы сделать всю фразу «unsucsribe from all lists» сделать ссылкой, а не только первое слово.

        PS как раз о том, что надо читать договор при оформлении кредита, _знают многие_, другое дело, что не все могут в в силу специфичности языка, понять смысл некоторых пунктов.
        • –2
          По пунктам все верно.

          В легкой маскировке ссылки не вижу ничего плохого. Пока человек будет ее искать, он бегло, но пройдет глазами по тексту письма.
          • 0
            Ну как минимум усложнение отписки усложняет аналитику. Например если в какой то момент от рассылки стало отказываться много людей, то наверное надо менять саму рассылку (пускать ее реже, делать ее менее объемной, выбирать то что действительно интересно и т д).
    • 0
      Всегда внимательно читайте договора ©
  • +2
    не найдя кнопки отписаться, я бы нажал просто пометить как спам и гугл сам бы всё сделал остальное… наверное, мне бы больше не пришли другие рассылки с этого ящика…

    кнопка отписаться должна быть и должна быть заметной и понятной для любого читателя
    • –1
      Вы мыслите с идеалистической точки зрения пользователя, я же сужу о компромиссе между маркетингом и пользователями. Я не загоняю человека в угол маскировкой ссылки, и в то же время повышаю процент «беглых прочтений» письма.
      • 0
        Согласен с Lord_Daedra — ссылка на отписку должна быть чётко и ясно выделенной. Я также помечаю письма как спам, если не нахожу явной ссылки в письме. И бегло рекламные письма просматриваю исключительно для поиска ссылки «отписаться». Если её нет — в спам.
        • 0
          Возможно вы и правы, и все же тут решать не мне. Я, занимаясь в данной сфере изъявил свое, может быть и субъективное мнение, на которое не обязательно полагаться. Ссылка на отписку должна быть! А вот ее оформление и примечательность — это к юзабилити консультантам и аналитикам.
      • 0
        Вы ни в коем случае не повышаете процент «беглых прочтений». Вы ухудшаете качество своего списка рассылки тем, что в неё становится всё больше и больше жалоб на спам.

        В этом есть далеко не всем известный момент. Если в какой-то момент число пожаловавшихся на спам превысит некий порог (у каждого почтового сервера свой), то после этого все ваши рассылки станут автоматечски идти в спам для всех, а не только для конкретных пользователей.
  • +1
    Почему вы не указываете alt у тегов <img>?
    • 0
      Да, это было моим упущением. Необходимо указывать alt и так же не лишним будет указать title
  • 0
    Кто-то (помоему, как раз, вы) советовал ставить style=«display:block» у картинок. Актуально?
    • 0
      … а еще class=«pad_null» для таблиц
      • 0
        Нет, это не я. На сколько я могу судить, приведеное вами относится к мэйлру, а точнее к его старому парсеру. Сейчас таких проблем не наблюдается.

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