Пользователь
0,0
рейтинг
17 мая 2013 в 11:38

Разработка → Основы профессиональной верстки электронных писем из песочницы tutorial

Верстка электронных писем
Ни для кого не секрет, что e-mail маркетинг только начинает набирать обороты во всем мире. А для России – это ещё и вовсе молодая ниша на рынке. И профессиональная верстка электронных писем здесь один из составляющих факторов успеха. Под профессиональной версткой понимается не только визуально красиво и надежно сверстанный макет, но и то, как выглядит usability открытки с маркетинговой точки зрения, как оптимизирована графика вместе с типографией для спам-фильтров и многое другое. Верстка электронных писем довольно обширная тема, в одной статье все не уместить, поэтому в данном посте постараюсь описать только базовые элементы и приемы, надежно проверенные за годы практики и работающие в top самых используемых почтовых клиентах мира: iPhone 4S/5; Outlook 07/10/13; iPad; Apple Mail; Android 2.3/4.0; Yahoo; Gmail. Если рассматривать только российский рынок, то нельзя не упомянуть о Mail.ru и Яндекс.Почта.

Что нужно знать в начале?


Сразу хочу выделить несколько из основных и важных моментов:

  1. В нашем арсенале имеется очень урезанный набор css-свойств, которые поддерживаются всеми почтовиками. При этом, стили нужно прописывать inline, а в head выносить только вендорные свойства и те блоки объявлений, которые не несут нагрузки на основную стилизацию письма. Ну и использовать link in head — крайне нежелательно.
  2. Не используйте background-image в основных визуальных элементах дизайна и не помещайте в изображения важную текстовую информацию. Вообще нужно всегда учитывать такой вариант, что письмо будет просматриваться получателем без единого изображения.


Каркас


Пожалуй каждый, кто хоть раз верстал письмо под рассылку, знает, что каркас лучше строить с помощью таблиц. На самом деле простая блочная модель div поддерживается на данный момент во всех перечисленных выше почтовиках, за исключением MS Outlook начиная с 2007 версии. Это связано с тем, что в качестве движка последние версии Outlook используют Microsoft Word, который в свою очередь много не знает о блочных css-свойствах. Игнорировать при верстке данный почтовый клиент я не рекомендую, поэтому в качестве фундамента все же используйте table. Да и добившись хорошего результата для Outlook, можно быть уверенным, что в большинстве почтовиках, письмо будет смотреться тоже хорошо, а скорее и лучше.

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

Разметку здесь можно представить следующим образом:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
        <tr>
            <td align="center">
                <table width="600" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
                    <!--header line statrs-->
                    <tr>
                        <td><img ... /></td>
                        <td><img ... /></td>
                        <td><img ... /></td>
                    </tr>
                    <!--header line end-->
                    <!--content statrs-->
                    <tr>
                        <td colspan="3" align="center">
                            <table width="540" cellpadding="0" cellspacing="0" border="0" style="border: solid 1px #000; border-collapse: collapse;">
                                <tr>
                                    <td>content</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <!--content end-->
                </table>
                <!--footer img starts-->
                <table width="660" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
                    <tr>
                        <td><img ... /></td>
                    </tr>
                </table>
                <!--footer img end-->
            </td>
        </tr>
    </table> 


Что здесь важно?

  1. Всегда «обнуляйте» таблицы, чтобы быть уверенным в той величине, которую вы указали в width:
    <table width="600" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
    
  2. Выравнивания элементов выполняется одним из способов:
    <td align="center">
    style="text-align: center;" 
    либо тегом <center></center>
    
  3. Не оставляйте промежуточные ячейки пустыми и не заполняйте символом nbsp, если хотите сохранить визуальную целостность шаблона при Forward письма. Лучше заполните их прозрачным изображением .gif (см. пример ниже).

Если требуется сделать вертикальное расстояние между таблицами или табличными строками, не используйте margin и padding. Рекомендую делать распорки в такой конструкции:
   <tr>
        <td height="10">
            <div style="margin: 0; padding: 0; line-height: 0;">
                <img src="...indent.gif" border="0" width="1" height="1"
                    style="display: block;" alt="" />
            </div>
        </td>
    </tr>

где высота варьируется значением height для ячейки таблицы. В качестве заполнения ячейки используется прозрачный .gif. Реальный его размер не должен быть 1х1px, лучше сделать немного больше (например 20x20px) и сжать с помощью атрибутов weight или height. Таким образом вы избавитесь от визуального дефекта при просмотре письма без подгруженных изображений и обезопасите себя от попадания письма в junk box. Не стоит так же забывать и о атрибутах таблицы cellpadding и cellspacing. Они прекрасно везде работают, но обойтись только их помощью не всегда получается.

Оформление текста


Тут дела обстоят более или менее хорошо. Практически все CSS-свойства из спецификации 2.1 поддерживаются.

  1. Изначально, для верстки писем давалась рекомендация оборачивать весь текст в строковый элемент span или font и уже в них задавать стилизацию шрифта. В настоящее время этим можно пренебречь. Описывать свойства для текста можно в любом HTML-элементе внутри тега body, но желательно только inline.
  2. Для задания размера шрифта лучше используйте абсолютные единицы измерения (px или pt), потому что мы не везде имеем доступ к стилизации базового шрифта. Это даст гарантию одинакового font-size для всех почтовых клиентов. Устройства работающие на WebKit по умолчанию применяют масштабирование текста. Для отключения этого поведения существует вендорное свойство -webkit-text-size-adjust. Советую просто вынести следующий селектор в head:
    div, p, span, strong, b, em, i, a, li, td {
                -webkit-text-size-adjust: none;
            }
    
  3. Чтобы кроссмейлерно оформить ссылку необходима следующая конструкция:
    <a href="#" target="_blank" style="color: #267f00 !important; text-decoration: underline;"><span style="color: #267f00;">link</span></a>
    

    Повторное оборачивание ссылки в span и задания цвета нужно для Outlook, т.к. он не понимает приоритет !important, а без него Яндекс.Почта будет перекрашивать вашу ссылку в красный цвет при событии hover.
    Атрибут target="_blank" необходим только в том случае, если в вашем письме имеется ссылка на web-версию письма, чтобы ссылки в этой версии открывались в новых вкладках. А так, все почтовые клиенты делают это уже самостоятельно.
  4. Если хотите, чтобы межстрочный интерлиньяж (line-height) работал везде, задавайте его только для блочных элементов (td, div, p, li).

Изображения


Если в одной ячейке находится только одно изображение и вы хотите, чтобы вокруг него не появлялось лишнее пространство, то возьмите за привычку прописывать для него display: block (к примеру, в Gmail этот недочет уже существует не один год).

В Outlook 2013 имеется и свой недочет для изображений, высота которых меньше 20px, у них появляется 8px пространства сверху, которые весьма ощутимо могут сказаться на внешнем виде макета, если это не предусмотреть. Решается это заданием свойства line-height для родительского блока, значение которого менее или равно величине высоты изображения. Его можно указать как для ячейки td, так и для оборачиваемого элемента:
<div style="margin: 0; padding: 0; line-height: 15px;">
        <img src="..." border="0" width="600" height="15" style="display: block;" alt="" />
    </div>


Скругление углов в письмах


border-radius в настоящее время поддерживает большинство самых популярных почтовых клиентов, но не MS Outlook 07/10/13, доля использования которых составляет ~18%. По поводу того как можно сделать скругленные углы в письмах можно привести ни один пример реализации верстки. Я же покажу вариант, который я использовал в приведенном выше макете:
    <tr>
                <td align="left" valign="top" style="background-color: #0BB40B;">
                    <img src="round_l.png" /></td>
                <td style="background-color: #0BB40B;">
                   <img ... /></td>
                <td align="right" valign="top" style="background-color: #0BB40B;">
                    <img src="round_r.png" /></td>
            </tr>

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

Скругление углов в письмах

Этот способ хорош тем, что в последующем, если вы решите изменить фоновый цвет, потребуется всего лишь поменять значение background-color. Недостаток же заключается в том, что фоновый цвет родительского блока должен совпадать с цветом, заданным в изображении (в моем случае – это белый).

Что нужно знать в конце?


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

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

  • Соотношение изображений и текста в письмах должно быть 30/70 %
  • Не выделяйте текст в слишком яркие цвета (#ff0000, #4CFF00 и т.п.). О том, что задавать цвет шрифта, близкий к фону не стоит и упоминать – это избитый и давно не работающий трюк.
  • Слишком большое количество текста, написанного в верхнем регистре (с учетом text-transform: uppercase;) или повторение нескольких восклицательных знаков подряд, так же увеличивают вероятность попадания в спам.
  • Не пишите много текста большим шрифтом. Рекомендуемый размер font-size не более 12pt=16px и не менее 7pt=11px
  • Ну и конечно валидный HTML/CSS ещё никто не отменял.

В конце ещё раз хочу отметить, что хорошая верстка электронных писем дает весомое преимущество в вашем маркетинге. Создавайте аккуратные и привлекательные открытки. Спасибо за внимание!
Игорь Хрипунов @Khripunov
карма
13,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

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

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

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

  • –7
    у меня в фильтре стоит однозначное перенаправление писем с HTML в junk.
    • +11
      и это печально
      • +5
        Как показывает практика, 90% нужных мне писем идёт без html. Оставшиеся десять либо просматриваются в junk, либо попадают в inbox отдельным фильтром.
        • +1
          Да, конечно все зависит от специфики вашей переписки, но, имхо, мусор можно и по менее категоричным критериям поймать.
          • 0
            в моём случае html письма это на 80% реклама, которую я не читаю и на 20% рассылки которые я читаю. Так что мне хватает.

            А деловая переписка с html не нужна. На крайняк можно картинки приложить в аттачи.
            • +14
              >А деловая переписка с html не нужна
              Ага, точно, нужно пересмотреть список деловых партнеров, основываясь на этом принципе.
              • 0
                Тут уж как кому нравится. Мне например ни разу не требовалось использовать в письмах HTML. Те кто мне пишут тоже им не пользуются. Все довольны.
                • +7
                  Вам не требовалось, а у некоторых это обяхательный элемент оформления, корпоративного стиля деловой переписки, и так далее. Пишу вам, как сотрудник такой фирмы.
                  • +1
                    Примите мои искренние соболезнования.
                    • +1
                      Не вижу ничего плохого, чтобы в корпоративном письме приложить логотип компании. Не буду-же я помнить 100500 названий компаний, а по нему легко ориентироваться. Или вы предлагаете, посылать его вложенным файлом?
                      • 0
                        А чего плохого в том, чтобы вместо логотипа написать нормальную подпись с названием компании?
                        Или вы предлагаете мне в почтовом клиенте OCR модуль использовать для поиска писем?
                        • +2
                          Я написал «приложить». Вы прочитали «заменить».

                          Логотип не мешает в подписи написать название компании (вместе с именем человека и должностью)
                          • 0
                            Но не понятно, в чём разница между «приложить» и «посылать вложенным файлом».
                            Логотип мешает тем, что весит на порядок больше, чем письмо. И при многократном вложении этого логотипа можно получить терабайты мусора в почтовом ящике. Лучше уж html тег img для таких целей использовать.

                            imnsho
                      • 0
                        Плохого в этом вот что: вы заставляете получателя скачивать абсолютно ненужные ему элементы, расходуя его трафик и время.
                      • 0
                        Можно в конце письма написать кто вы, вашу должность и в какой компании. Текстом. Заодно можно написать рабочий телефон, так, на всякий случай. Этого более чем достаточно для ориентации и поиска по письмам.
            • +7
              Мне в деловой переписке регулярно нужен html. Потому что я использую в них списки, ссылки и курсив. Читать таким образом отформатированную информацию удобнее.
    • +21
      У меня в папке со спамом 90% писем — это чистый текст. Очень редко кто из спамеров использует html. С другой стороны, большинство популярных сайтов присылают письма с html (либо и текст и html): яндекс, linkedin, steam… Да все практически.

      Поэтому, мне кажется, что отправлять в спам письма, на основе критерия присутствия html по меньшей мере странно.
      • –7
        Junk != Spam
        • +1
          А в чем отличие? В википедии вроде одно и то же.
          Или это такое название какого-то сервиса у почтового клиента?
          • –2
            У меня это нечто типа «серого списка» для входящей почты. то, что прошло спам-фильтр, но по каким-то критериям «не нравится».
  • +7
    Мне лично, почему-то всегда приятней читать письма без html кода
    Наверно, потому что личные письма всегда так пишутся.
    Поэтому мы у себя стараемся письма к клиента — делать как если бы мы писали другу — именные, рода и падежи, и только текст.
  • +2
    Всегда пишу в тхт — никто не жаловался!
    • 0
      А вот если бы вы написали «перестал общаться со всеми людьми и отписался от всех сервисов, кто пишет мне в HTML — ни о ком не жалею» — вот это было бы посильнее Фауста Гете ;)
  • +2
    Я бы добавил, что вероятность открытия письма и лояльность ответа с большой вероятностью увеличат следующие шаги:
    • имя человека в заголовке ( только никаких " Здравствуйте Sergey! " )
    • краткое лаконичное письмо по делу — цените время вашего клиента
    • личная подпись ( без «с уважением администрация» )

    • +2
      «с уважением администрация»

      Ага, товарищ Администраций очень уважает вас ;)

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

      Лично я бы также очень приятно удивился корректному обращению «уважаемый» или «уважаемая», без попытки замылить половой вопрос («Здравствуйте, %USERNAME%»)
      • +1
        Да, а меня ещё бесит, когда в очень важной (не для меня, но для секретаря неважной конторы) переписке ко мне начинают употреблять «Вы» и «Вас» по два-три раза в каждом предложении и обязательно с заглавной буквы. А потом перезвонят и называют по имени и отчеству через слово.

        В такие моменты очень хочется чем-нибудь тяжелым такого секретаря по голове ударить.
      • 0
        ну кстати — отличная мысль
        что мешает добавить базу родов для имен — тогда можно легко жонглировать прилагательными
        спасибо вам) ушел удивлять пользователей)
    • +1
      Не забывайте о прехедере. Начало письма, показыающееся на не открытом письме.
  • –8
    Мне всегда было интересно вот что: почему бы не сделать всё письмо одним скриншотом, запихать его в img, а ссылки проставить при помощи area? Вроде Outlook это понимает. Или кому-то важно выделять и копипастить текст из письма? SEO в письмах тоже не упёрлась…
    • +1
      Потому что траффик в мобильном интернете не бесплатный? Да и копировать текст тоже бывает надо. Например, переслать другу в чате. Или скопировать телефон/email.

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

      Также невозможен поиск по тексту (я этим иногда пользуюсь).

    • +8
      письмо из картинки — это один из первых признаков, по которым оно попадает в спам )
      • 0
        Ну, например, blizzard такие письма присылали мне.
        • +2
          Blizzard никогда не присылает таких писем, как вы написали выше.
          Да, у них много графики — это особенность игровой индустрии, но текст у них всегда в видео обычного текста, а графика — компонентная, не единым изображением.

          http://i038.radikal.ru/1305/73/ee08e2c0c9ed.png
          (выделил куски текста, что бы было видно, что они не в изображении)
          • 0
            Я, к сожалению, пруф вам не покажу, сейчас они верстают свои письма, а старых у меня нет, но так точно делают, у меня есть пруф Аллодов

            hostingkartinok.com/show-image.php?id=83ebb88c5ae3265f2e498ce81ddab7f4
            • +1
              Видите, не зря же Близзард перестал отправлять простой img :)
              А Аллодов видимо тормозит. Не знаю кто такие, не думаю что стоит на них ровняться.
    • 0
      А как переменные в шаблон письма подставлять?
      • 0
        Никак, в этом случае такой способ не подходит.
        • –1
          Обманывать не хорошо, GD и ImageMagick прекрасно с этим справляются
    • +3
      а еще большинство клиентов по умолчанию картинки не качают от недоверенных адресатов
    • 0
      Потому, что OCR модуль подключать в поиск писем я не хочу
      И не только я
  • +2
    Бесит, когда приходят деловые письма с подложками в виде листков, клетчатых бумажек, когда в письме используется 2-3-4 разных шрифта и начертания и т.д.

    Деловую переписку веду в максимально простом виде.
  • +6
    Для спам корзинки стараетесь!
  • 0
    Да, Outlook это отдельная песня, удивительно что не используют движок IE.

    У меня были даже баги с img width, решалось увеличением картинки до нужных размеров, и вместо margin-left / margin-right дедовские методы вроде дополнительного td width.

    По поводу доставки, я бы выделил Yahoo, он самый безжалостный, Российские фильтры обходятся достаточно просто и проблем с доставкой по России нет.
    • 0
      на сколько я слышал самый злой — это спам-фильтр майл.ру

      Так получается что не все фильтры обходятся)
      • 0
        Я не знаю как с доставкой откровенного спама, но с доставкой контента и рекламы подписчикам, на mail.ru все доходит без проблем.
  • +2
    В верстке писем всегда бесило то, что какой бы макет не верстался, всегда сложно быть уверенным в результате. Почему нельзя сделать, простую поддержку html без всяких табличных велосипедов?
    • –1
      Чем таблицы — не простая олдскульная поддержка html? :)
      • 0
        тем что она непростая, причем у каждого клиента непростая в разных местах
        • –1
          Все проще, чем кажется. Главное выработать методику. Пробегитесь по моим топикам. Все достаточно понятно.
          • 0
            При верстке я обычно руководствуюсь методикой следовать стандартам. Вырабатывать же какую-нибудь другую в зависимости от рендер-агента, не есть хорошо.

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

            • +1
              А теперь представьте, что у вас только один гугл хром и 54 капризных собрата от IE4/5/6 из разных стран, которые не дружат друг с другом. О каких стандартах может идти речь? Их рождают верстальщики, ибо почтовики не так слаженно работают, как браузеры.

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

              К единым стандартам при верстке писем со стороны разработчиков почтовиков ныне прийти практически не реально из-за существующего зоопарка ископаемых и разнообразных новых клиентов, которыми люди пользуются по сей день.
    • –2
      Сколько пишу html писем, кроме параграфов, списков и и жирнокурсивностей никогда ни чем не пользовалась
      И ни кто не жаловался
  • 0
    В качестве дополнение htmlemailboilerplate.com/
    • –1
      Не канает для русских вебморд. Увы.
      • 0
        Кто-то готов оспорить мое утверждение?
  • +2
    Конечно написать просто текстовые письма проще, но я считаю, что html письма с хорошей разметкой, грамотным текстом и картинками, вызовут больше конверсии, чем просто текстовые письма. И говорить я только текстовые пишу и это типо вообще никому ненужно, не стоит.
    • 0
      при их получении нужно нажимать кнопочку «отображать картинки», это не будет снижающим фактором?
      • +1
        Если и без картинок отлично смотрится то думаю не должно быть проблем и CSS поможет :)
      • 0
        если в письме есть картинки, которые можно отображать, то это уже ни разу не хорошая разметка
      • –1
        Можно обойти и этот момент. Вложения отображаются игнорируя этот фактор.
  • –1
    Не для кого не секрет, что e-mail маркетинг только начинает набирать обороты во всем мире.

    А объясните мне, те, для кого это не секрет, в чем тут дело? Вроде ж спам появился вместе с почтой. Или " e-mail маркетинг" — это что-то другое?
    • +3
      Ну надо было человеку вступление сделать, не придирайтесь :)
  • +2
    С почином, Игорь! Вещай приоритетно по аутлуку и будет всем счастье. Я эту тему не так досконально, как ты изучил.

    На днях опубликую свежий материал о распространенных ошибках многих сервисов при верстке.
  • 0
    Без распорок можно тоже обойтись местами. Сellpadding работает исправно. Нареканий не замечал.
  • –1
    Если хотите, чтобы межстрочный интерлиньяж (line-height) работал везде, задавайте его только для блочных элементов (td, div, p, li).

    Задавал для спанов, проблем не было. Просвети?
  • –1
    Основы профессиональной верстки электронных писем для деловой переписки:

    1. Используйте простой текст, без картинок и HTML.

    2. Ограничивайте длину строки.

    3. Разделяйте абзацы пустыми строками.

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