Основы профессиональной верстки электронных писем

Не для кого не секрет, что 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

Источник