Электронный маркетинг довольно популярный во всем мире способ прорекламировать свой продукт или компанию. Сделать это проще в том случае, если ваше письмо клиенту будет красиво выглядеть и будет удобным для использования. Поэтому, разрабатывая сайт, не следует забывать о том, как будут выглядеть сообщения с этого сайта. Ведь некрасивый или нечитабельный стиль будут отталкивать Ваших клиентов.
В данной статье мы не будем рассматривать все правила оформления электронных писем, а лишь обратим внимание на те особенности, с которыми могут сталкиваться разработчики в процессе своей работы. Эти рекомендации будут представлены в виде наборов советов того, как решить определенные проблемы.
Кроссплатформенность
Первое с чем придется столкнуться разработчику - это кроссплатформенность письма. Если с кроссплатформенностью сайта все обстоит более или менее понятно, то с электронной почтой все намного сложнее, так как существует огромное количество способов просмотра почты. Это веб-интерфейсы различных почтовых служб (Gmail, Yahoo!, Hotmail), почтовые клиенты для компьютеров (MS Outlook, Thunderbird, The Bat, Apple Mail) и для мобильных устройств (нативные приложения для iPhone 4S/5, iPad, Android 2.3/4) и др. Все рассмотренные подходы будут касаться самых популярных способов просмотра почты.
Оформление кода
Многие веб-интерфейсы электронной почты при обработке и отображении письма все отступы табуляции в коде преобразуют в символ nbsp. Поэтому могут появляться ненужные отступы. Чтобы этого избежать нужно весь код письма представить без табуляции, в виде:
‹body›
‹table›
‹tr›
‹td›content‹/td›
‹/tr›
‹/table›
‹/body›
Макет
Для верстки письма лучше всего использовать таблицы. Такой вариант будет отображаться в большинстве клиентов так, как хотелось бы дизайнеру. Блоки могут отображаться не всегда корректно (например, в клиенте MS Outlook). Особенно стоит забыть про позиционирование блоков и конструкции с float.
Все таблицы необходимо «обнулять», т.е. сбрасывать значения всех параметров, так как каждый почтовый клиент ставит их по своему желанию. Это касается вообще всех тегов, у которых могут быть отступы:
‹table cellpadding="0" cellspacing="0" border="0" valign="top"›
К сожалению, нет возможности оставлять пустые ячейки, например, для создания горизонтальных отступов. В таких случаях можно использовать padding-left или padding-right. Как вариант для заполнения пустой ячейки можно использовать изображение (прозрачные изображения не лучший вариант, так как клиент The Bat заливает их черным цветом). Увы, вариант с nbsp не подойдет. Вертикальные отступы можно создать только с помощью картинок, так как правила padding-top и padding-bottom не будут учитываться. Следует помнить, что согласно стандартам, размеры в атрибутах указываются только числом, без px.
Старайтесь реже использовать rowspan и colspan, так как помещенные в такие ячейки изображения могут обрезаться некоторыми почтовыми клиентами.
Стилизация
Так как предполагается, что письма предназначены прежде всего для пересылки текста, то многие производители ограничили отображение стилей в письмах. Поэтому количество правил CSS очень ограниченно, а большую часть из них веб-интерфейсы, в придачу, будут отбрасывать. Прописывать их нужно непосредственно в самом HTML (inline стили), не вынося в блок head. Пользоваться тегом link крайне нежелательно.
‹div style="border: 1px solid #d4d4d4; background-color:#ff0000;"› … ‹/div›
Для стилизации текста можно использовать «древний» тег ‹font›. Стиль, заданный таким образом будет точно применен. Однако, во многих случаях можно использовать и обычные правила CSS, правда, все текстовые данные внутри блочных элементов придется помещать внутрь линейных тегов (например, ‹span style="…"›). Если нужно поменять стиль ссылки, то тег ‹font› следует поместить внутри тега ‹a›. Все стили из тега ‹span› нужно продублировать в тег ‹a›. У тега ‹a› нужно указать атрибут target="_blank", для того, чтобы сайт открывался не в окне клиента, а в новой вкладке.
‹span style="font-family: Tahoma, sans-serif; font-size:13px; color:#ff0000"› ‹a href="http://site.com/" target="_blank" style="font-family: Tahoma, sans-serif; font-size:13px; color:#ff0000"›Hello, world!‹/a› ‹/span›
Заметьте, что все цвета должны быть в полном виде, а не сокращенном, то есть нельзя использовать формат #fff, нужно обязательно #ffffff.
Изображения
Нельзя использовать background-image, не стоит помещать часть важной информации на картинки, так как очень часты ситуации, когда картинки в письме не будут отображаться совсем. Некоторые атрибуты тега ‹img› не поддерживаются многими почтовыми клиентами. К таким атрибутам можно отнести hspace, vspace, align. Поместить картинку в текст будет тоже сложно, так как невозможно установить для нее отступы. Но и здесь на помощь придет таблица.
Нельзя использовать ‹areamap›, так как в некоторых клиентах эти ссылки работать не будут (например в веб-интерфейсе Gmail). В таких случах нужно нарезать изображение на отдельные куски и вставить в таблицу. Для изображений-ссылок нужно добавить атрибут border="0", чтобы избежать отображения границы, а для самой ссылки установить text-decoration:none, иначе появится ненужное подчеркивание.
Многие клиенты не умеют масштабировать изображения, поэтому старайтесь использовать размеры изображений один в один, как они есть в макете. Более того, лучше прописать все размеры в атрибуты width и height тега img.
Как уменьшить вероятность попадения письма в спам
Обычно для деловой переписки используется обычный текст, без HTML. Поэтому письма, содержащие HTML и картинки чаще всего попадают в спам. Лучший способ этого избежать – убедить пользователя добавить вас в адресную книгу, однако, проверить это невозможно. Однако пожно постараться уменьшить вероятность попадания в спам. Для этого необходимо следовать некоторым рекомендациям:
- Не нужно использовать в тексте письма слишком яркие цвета (красный, ярко-зеленый и т.д.), не следует также делать цвета малозаметными – этот прием не сработает;
- Не должно быть слишком много изображений, информация должна доноситься прежде всего в текстовом виде;
- Большое количество текста НАПИСАННОГО ВЕРХНИМ РЕГИСТРОМ (даже стилизованного
text-transform:uppercase) или большое количество восклицательных знаков также увеличивают вероятность попадания в спам; - Не пишите много текста очень мелким или очень крупным размером. Оптимальный размер от
7pt(11px) до12pt(16px); - И, конечно, не забывайте про валидность HTML/CSS кода.
Как вы уже заметили, сверстать письмо – довольно трудоемкая задача, однако, красивое и правильно оформленное письмо обязательно заинтересует ваших пользователей и привлечет клиентов.