Конвертация PSD — HTML + Адаптация шаблона для email-рассылки
О дизайне емейл-рассылок написано не одна сотня статей. Хорошо продуманная и сбалансированная визуальная часть письма повышает количество кликов в письме и количество ваших продаж. Поэтому преобразование шаблона, подготовленного вашим дизайнером в формате psd, один из важных и сложных этапов в подготовке емейл-рассылки.
Качество преобразования psd в html влияет на то, как ваша рассылка отобразится на экранах ноутбуков, планшетах и мобильных телефонах клиентов.
Зачем создавать шаблон письма в Photoshop?
Обычно с шаблоном в формате psd проще поставить ТЗ верстальщику. В Photoshop отображаются все необходимые элементы: размер и название шрифтов, слои с различными элементами письма. Верстальщики “читают” такой макет и на его основании создают письмо в виде HTML.
Почему отправка письма должна быть в HTML?
Начнем с того, что не все сервисы для отправки писем даже будут поддерживать такой формат, поэтому вероятнее всего его придется сконвертировать в png или jpeg.
Но если ваше письмо будет состоять только из картинок — с ним может возникнуть гораздо больше проблем. Есть ряд причин для конвертации электронного письма из PSD в HTML.
- Отображение ваших рассылок. Продуманный и тщательно отрисованный дизайн не будет ничего стоить, если в почте письмо “поедет” или не отобразится. Чтобы письмо корректно отображалось в почтовых ящиках получателей рассылки, оно должно быть правильно сверстано. Просто порезав psd и собрав его в редакторе в кучу, вы можете получить совсем противоположный результат.
- Блокировка писем только из картинок. Большинство спам-фильтров на почтовых серверах блокируют сообщения, состоящие из одной картинки. К тому же, во многих браузерах и почтовых клиентах есть функция блокировки картинок.
- Адаптивность письма. Большая часть ваших клиентов будет просматривать почту на экране своего мобильного телефона. Это означает, что вы не можете позволить себе разочаровать мобильных пользователей
- Существуют более 50 современных почтовых клиентов, в любом из которых ваши письма должны отображаться правильно.
Html дает возможность учесть практически все особенности почтовых клиентов, чтобы письмо отображалось корректно. - HTML даёт возможность анализировать результаты. Чтобы использовать любой сервис для отправки рассылки, вам нужно будет письма преобразовать в формат HTML. Сервисы рассылок позволяют отслеживать эффективность ваших емейл-кампаний по клику на каждую ссылку в письме.
- Больше возможности для персонализации. Хорошее письмо — это письмо, актуальное для получателя. Поэтому ваша рассылка должна быть персонализированной. Для этого в коде письма используются переменные и динамический контент, что опять-таки невозможно сделать в письме из одной картинки.
Html дает возможность учесть практически все особенности почтовых клиентов, чтобы письмо отображалось корректно.Давайте рассмотрим на примере, как оптимально перенести макет письма в систему рассылок.
Last post
Получаем макет письма в формате PSD
Первое, что нужно для работы — грамотно составленный шаблон письма.
PSD-шаблон должен быть выполнен в вашем корпоративном стиле, привлекательным и продуманным.
Тем не менее, дизайнеры емейлов не пользуются такой же творческой свободой, что и разработчики веб-сайта.
Основные требования к шаблону следующие:
- Ширина письма не должна превышать 600 пикселей.
Имеется в виду именно информационная область письма, на фоне может быть подложка, которая заполнит свободное пространство на широкоформатных мониторах
- Табличная верстка
Из-за того, что у почтовых сервисов нет общих правил отображения html писем, используется табличная верстка. Сообщения могут открывать в почтовых клиентах и браузерах, которые не поддерживают новые версии HTML и CSS. Табличная верстка гарантирует, что письмо будет корректно отображено на всех платформах и не “расползется”.
- Шрифты – это важно!
Существует достаточно ограниченное количество поддерживаемых почтовиками шрифтов, поэтому используем стандартные: Arial, Arial, Georgia, Tahoma, Times New Roman, Trebuchet MS, Verdana.
Текст необходимо разбивать на смысловые абзацы, использовать разный размер шрифта, заголовки и подзаголовки.
- Соотношение текстовой части и изображений.
Учитывая то, как много почтовых клиентов по умолчанию блокируют загрузку картинок, может получиться так, что текстовое содержание единственная вещь которую увидят ваши получатели. Проверяйте соотношение текста и картинок, идеально — 50:50 или 60:40, не делайте письмо одним изображением.
Адаптируем макет psd для рассылки
Давайте рассмотрим на примере, как правильно адаптировать psd для email-рассылки.
Ознакомление с макетом
Наш шаблон соответствует требованиям: ширина контентной части 600 рх, используется стандартный шрифт Arial, изображения и текст находятся на различных слоях.
Макет стандартный, состоит из хедера, контентной части и футера:
Чтобы получать информацию об отдельных объектах макета, включаем инструмент «Автовыделение»:
Теперь мы можем кликнуть по любому элементу макета и он будет выбран в панели слоев.
С помощью автовыделения получаем информацию о шрифтах.
Используемый шрифт текста — Arial, размер шрифта для текста 12 px, для заголовка — 24 px. Цвет заголовка #484a43,
цвет шрифта контента #333333, цвет ссылок #6d7e44
Инструменты Photoshop позволяют сохранять изображения в формате .jpg c помощью вкладки “Набор изображений” (Файл → Генерировать → Набор изображений)
Цвет фона всего письма и хедера: #f0f2ea.
В нашем макете изображения уже подготовлены отдельно, что немного упрощает задачу.
Основные данные из макета получены, теперь нужно сформировать html шаблон для рассылки.
Перенос макета в редактор
Редакторы создания сообщений встроены практически во все сервисы рассылок. Принцип работы большинства таких редакторов — Drag&Drop, то есть мы выбираем нужный блок и переносим его на рабочую область. Наша задача — кастомизировать стандартный шаблон под существующий макет.
Для создания письма я выбрала первый шаблон “Промописьмо”:
Создание оформления
Начинаем работу с вкладки “Оформление”, в которой прописываем полученную информацию о шрифтах и фоне письма.
Заполняем разделы “Общие”, “Заголовки”, “Хедер”, “Футер”.
На вкладке “Общие” заполняем цвет фона и контента письма, подставляем информацию о типе, размере и цвет шрифте согласно шаблону.
В нашем макете отступы от края письма до контентной части 30 пикселей, переносим эти значения в оформление:
В разделе “Заголовки” прописываем тип, размер и цвет шрифта заголовков согласно макету:
В разделе “Хедер” прописываем тип, размер и цвет шрифта заголовков согласно макету, заполняем данные о фоне письма и контента:
По аналогии заполняем информацию в разделе “Футер”:
Важно: не оставляйте прозрачный фон контента или футера, так как некоторые устройства могут отображать его белым цветом вместо цвета фона.
Прописываем отображение письма на мобильных устройствах на вкладке “Адаптивность”.
Вся информация, добавленная в “Оформление”, отображается в разделе CSS в коде письма:
После того, как мы прописали всю информацию на вкладке “Оформление”, переходим на вкладку “Контент”.
Создание контентной части письма
Письмо состоит из полос, содержащих структуры и блоки. Чтобы прописанный стиль оформления правильно применился, необходимо задать нужное значение полосе:
Важно: количество полос увеличивает вес кода письма, что влияет на его отображение (например, в Gmail). Используйте только необходимое количество полос — отделяйте хедер, контент, футер и постарайтесь не разделять контент на полосы.
Создаем шапку письма: добавляем лого и текст.
Не забываем прописать альтернативный текст и ссылку на ваш сайт в логотипе:
Переходим к контентной части письма и добавляем полосу для контента. В структуру добавляем блок “Картинка”:
Для заголовка добавляем еще одну структуру с блоком “Текст”:
К тексту применяем форматирование, ставим Заголовок 2:
Для следующей части письма выбираем структуру из 2-х частей:
Уравниваем контейнеры структуры между собой для корректного отображения, нажав в меню на знак равно:
В структуру добавляем блок “Картинка” и 2 блока для текста:
Заполняем данными:
Затем добавляем структуру с картинкой и текстом для следующего блока:
Добавляем футер.
В нём расположены контакты и соцсети. Используем структуру из 2-х частей, в левой части будут только текстовые блоки, в правой — блок “Соцсети” и текст.
Не забывайте после создания каждого раздела просматривать отображение письма на мобильном устройстве:
Обратите внимание, что помимо вкладки “Адаптивность”, отображение письма на мобильном устройстве можно корректировать непосредственно в процессе создания письма:
Посмотреть результат.
После создания письма не забудьте протестировать его отображение в одном из специальных сервисах или на доступных устройствах.
Хотите потренироваться? Шаблон в формате psd доступен по ссылке.
Как создать html письмо для рассылки
Всем привет. На днях решил разобраться с тем, как верстаются html письма. Провел несколько часов в интернете, перечитал десятки статей на эту тематику и пришел к выводу, что это очень нелегкая задача.
Но желание — есть, поэтому стал копаться дальше.
Может быть и на блоге, скоро заменю подписку по email от feedburner (под статьями) на какую-нибудь другую, где можно сделать ее более симпатичной. Главное учесть все нюансы верстки под почтовые клиенты, а их поверьте не мало.
Почтовая рассылка один из самых эффективных способов продать товар, донести новости до клиентов, рассказать об акциях и дополнительных услугах. Кроме того, когда у вас есть база клиентов, вы можете вернуть “старых” покупателей и осуществить еще одну продажу.
Можно разослать материал о дополнительных услугах, которые, возможно, стали интересны вашим клиентам после первой покупки.
Ну и конечно же тут работает теория больших чисел. Если разослать предложение о продаже чего-то 20000 подписчиков, 1000 из них ознакомилась с предложением и хоть 10 да купит, а затрат – 0. Вы просто отправили письмо!
Но кто-то не открыл письмо, кто-то открыл и не стал читать его, потому, что там портянка текста, у кого-то не открылись картинки, а у кого-то поехала верстка.
Так бывает. Из-за того, что почтовые программы не так хорошо поддерживают сss, как браузеры. А о javascript – я вообще молчу.
И существует масса проблем для верстальщиков, которые занимаются созданием html писем.
Но сегодня я постараюсь рассказать вам о том, как создать html письмо, которое бы открывалось одинаково хорошо во всех браузерах (в том числе мобильных) и почтовых программах, для того, чтобы ваши письма выглядели привлекательно, и вы не теряли клиентов. Это не последний пост, если возникнут проблемы с отображением, то позже либо поправлю этот, либо напишу продолжение. Так же буду признателен всем, кто поможет протестировать и выявить проблемы.
Проблемы при верстке html писем
Из-за того, что у почтовых сервисов нет общих правил отображения html писем, верстальщику приходится использовать правила верстки 90 годов. Некоторым к этому привыкать не нужно, но я, признаться, ни разу не прописывал стили внутри html документа, причем не просто внутри html документа при помощи <style></style>, а именно inline, для каждого элемента отдельно.
Некоторые разработчики почтовых программ вообще отключили поддержку таблиц стилей и стилей как таковых, способом, описанным выше. Аргументируя это тем, что письма нужны именно для текста. Так что придется писать стили для каждого элемента отдельно.
Еще одним сюрпризом оказалось то, что не многие почтовые сервисы не поддерживаю float и отступы margin и padding. Как вам? Представляете вы сверстали классное трехколоночное html письмо на основе div (ов), а у пользователя такая белиберда пришла, что он тут-же удалил его, так и не поняв, что от него хотят.
Да, да. Вы правильно поняли! Придется использовать таблицы, если не готовы жертвовать тысячами пользователей, у которых ваше письмо откроется не корректно. Получается, что таблицы — это единственный способ, на сегодня, добиться кроссбраузерности.
Как написали на одном из сайтов:
Придется вспомнить такие страшные вещи, как: Cellpadding, cellspacing, colspan
В моем случае — их придется выучить, так как я никогда не пользовался таблицами.
Может быть и не пришлось бы никогда, если бы не решил разобраться с оформлением писем 🙂
Если у вас нет привычки прописывать alt для изображений, придется ее выработать для верстки писем, так как у некоторых почтовых клиентов, по умолчанию, выключено отображение картинок, и если в письме их у вас много, то пользователь увидит пустые рамки, а так в них будет текст.
Еще, для меня стало проблемой то, что приходится постоянно обнулять многие значения, например, border у картинок, если она задана как ссылка.
Пока — всё! Если что-то еще всплывет, то опишу по ходу. А сейчас я хочу показать вам, что у меня получилось пока, без добавления стилей оформления, таких как шрифт, цвет, размер текста и т.д. Это только элементы в нужных местах. В следующей статье я опишу процесс тестирования в разных почтовых сервиса и правки, которые пришлось внести.
Как видите, есть над чем работать. Давайте я немного опишу процесс верстки. Вникать в него — нет смысла, к следующей статье многое измениться.
На самом деле все, вроде бы и просто, но с другой стороны, у меня это занятие отняло много времени.
Как создать html письмо
Для начала, я создал каркас-таблицу для всего содержимого письма, шириной в 100% и голубым фоном. В нем разместил две дочерние таблицы. Одну для шапки (id=»header»), вторую для контента (id=»content»):
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Рассылка новостей от Smartlanding.biz</title>
</head>
<body>
<table cellpadding="40" cellspacing="0" align="center" bgcolor="cee5f1">
<tr>
<td>
<table cellpadding="20" cellspacing="0" align="center" bgcolor="ffffff">
</table><!-- header -->
<table cellpadding="0" cellspacing="15" bgcolor="ffffff" align="center">
</table><!-- content -->
</td>
</tr>
</table>
</body>
</html>
Как вы уже заметили, я задал cellpadding=»40″ для таблицы-обертки.
Это внешний отступ. Отступ в 20px задал таблице, которая отвечает за шапку. И добавил внутренний отступ таблице, в которой будет располагается контент. Также, все таблицы выровнял по центру. Идем дальше…
Теперь необходимо разделить шапку на 2 части. В одной расположить логотип, а в другой создаю еще одну табличку с 3 столбцами и помещаю туда ссылки на социальные сети.
<tr>
<td><img src="https://smartlanding.biz/wp-content/themes/simply-vision/images/mail-logo.png" alt="логотип"/>
</td>
<td>
<table cellpadding="0" cellspacing="0" align="right">
<tr>
<td align="right"><a href="https://twitter.com/smartlanding" target="_blank" title="Твиттер"><img src="https://smartlanding.biz/wp-content/themes/simply-vision/images/twitter1.png" alt="Я в Твиттере"/></a>
</td>
<td align="right"><a href="https://plus. google.com/104541820587912901962" target="_blank" title="Твиттер"><img src="https://smartlanding.biz/wp-content/themes/simply-vision/images/googlePlus.png" alt="Я в Google+"/></a>
</td>
<td align="right"><a href="http://vk.com/smartlanding_biz" target="_blank" title="Твиттер"><img src="https://smartlanding.biz/wp-content/themes/simply-vision/images/vk.png" alt="Я во Вконтакте"/></a>
</td>
</tr>
</table><!-- social -->
</td>
</tr>
google.com/104541820587912901962" target="_blank" title="Твиттер"><img src="https://smartlanding.biz/wp-content/themes/simply-vision/images/googlePlus.png" alt="Я в Google+"/></a>
</td>
<td align="right"><a href="http://vk.com/smartlanding_biz" target="_blank" title="Твиттер"><img src="https://smartlanding.biz/wp-content/themes/simply-vision/images/vk.png" alt="Я во Вконтакте"/></a>
</td>
</tr>
</table><!-- social -->
</td>
</tr>
Не выяснил, пока что, обязательно ли указывать размеры картинок, поэтому в этом плане пока хаос. Где-то — ставлю, где-то — нет. После тестов наведу порядок. Или уберу совсем, чтоб сократить код, или придется везде дописать, если будет некорректно отображаться в каком-то из почтовиков.
Этим кодом я добавляю строку с одним столбцом, в таблицу «content» и помещаю в него картинку, с надписью «Smartlanding»:
<tr>
<td>
<img src="https://smartlanding. biz/wp-content/themes/simply-vision/images/mail-banner.png" alt="smartlanding" />
</td>
</tr>
biz/wp-content/themes/simply-vision/images/mail-banner.png" alt="smartlanding" />
</td>
</tr>
Сейчас письмо выглядит так:
Идем дальше. Сейчас нам нужно реализовать такую структуру:
Все это делается чтобы были отступы между контентом. Html код с контентом выглядит так:
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="d0d0d0"><img src="https://smartlanding.biz/wp-content/uploads/2014/09/skrytie-ssylki-javascript.jpg" /></td>
</tr>
</table>
</td>
<td></td>
<td valign="top">
<h3><a href="#">Как закрыть внешние ссылки от индексации</a></h3>
</td>
</tr>
</table><!-- Slogan -->
</td>
</tr>
Теперь необходимо реализовать анонс статьи, делается это достаточно просто.
1 строка, 1 столбец и текст в нем:
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<p>Привет ребята. Сегодня речь пойдет о том, как надежно закрыть внешние ссылки на своем лендинг пейдж для того, чтобы с нее не передавался вес, а оставался на вашей странице. Как вы, наверное, знаете, теперь, даже если вы закрыли ссылку атрибутом rel="nofollow", статический вес все равно передается, а следовательно убывает с вашей страницы.</p>
<a href="#" title="читать продолжение на smartlanding">Читать дальше</a>
</td>
</tr>
</table><!-- TextBody -->
</td>
</tr>
Теперь нужно создать структуру из 3 колонок. Так как мы не можем пользоваться float(ами), то придется сделать 5 колонок. 3 под контент с картинками (150px), а 2 — для того, чтобы задать отступ между ними (60px).
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td valign="top">
<img src="https://smartlanding.biz/wp-content/uploads/2014/10/utm-metki.png" />
</td>
<td></td>
<td valign="top">
<img src="https://smartlanding.biz/wp-content/uploads/2014/10/smart-novosti.png" />
</td>
<td></td>
<td valign="top">
<img src="https://smartlanding.biz/wp-content/uploads/2014/10/script-dlya-ab-testirovaniya.png" />
</td>
</tr>
</table><!-- pageImages -->
</td>
</tr>
Точно такую же разметку делаю для текста, заголовков:
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td valign="top">
<a href="#"> Как сделать UTM метки и для чего они нужны</a>
</td>
<td></td>
<td valign="top">
<a href="#"> Обновления на блоге и мини-отчет об оптимизации</a>
</td>
<td></td>
<td valign="top">
<a href="#"> Скрипт для АБ тестирования</a>
</td>
</tr>
</table><!-- pageText -->
</td>
</tr>
И теперь остается последний шаг, сделать footer.
Я не стал создавать под него новую таблицу, а разместил в content, просто добавив новую строку и столбец:
<tr bgcolor="797979"> <td> <p align="center"><a href="https://smartlanding.biz" title="Smartlanding">Smartlanding</a> | 2014</p> </td> </tr>
Вот такое письмо получилось. Теперь предстоит куча тестов. Я планирую протестировать верстку в следующих почтовых сервисах и программах:
- gmail
- yandex
- rambler
- mozilla thunderbird
- outlook 2007
- outlook 2013
- the bat
В процессе тестирования я буду добавлять стили заголовкам и текстам, обнулять свойства и вносить прочие коррективы. А после, напишу еще один развернутый пост на эту тематику. Возможно что-то поменяется к следующей статье, так что подписывайтесь на обновления, если вам интересна данная тема и вы не хотите пропустить новый материал.
Если у вас есть опыт создания html писем, напишите пожалуйста ваш комментарий и укажите на ошибки.
Буду вам очень признателен. А на сегодня — все. Пока!
(Ознакомиться с предварительными тестами html письма в разных поисковых системах можно здесь)
Полное руководство по созданию электронных писем в формате HTML .dtd”>
googleapis.com/css?family=Open+Sans:300,400,600,700,800″ rel=»stylesheet»>
|
цвет шрифта с межстрочным интервалом 15px
Все права защищены.