Вёрстка макета письмаВерстка по макету

Вёрстка вашего макета письма в HTML: таблицы для сервисов рассылок, близко к макету, с версией для телефона

Обычно готово за 15 минутДоработки включеныКонтроль качества
Пакеты
Защита оплатыПодробнее
  • Доработки в рамках пакета бесплатны.
  • Если вы не ответите в течение 3 дней после сдачи, работа будет принята автоматически.

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

Вёрстка вашего макета письма в HTML: таблицы для сервисов рассылок, близко к макету, с версией для телефона

Пример результата

Пример по пакету «Стандарт»

Приветственное письмо и письмо о распродаже для магазина керамики

Два письма

Приветственное письмо на телефоне

Приветственное письмо на телефоне

Файлы: ZIP-архив с 2 HTML-письмами, свёрстанными для почтовых программ, со встроенными стилями и ссылкой отписки, и 3 картинками, нарисованными для них, готово к импорту в сервис рассылок клиента. Здесь показаны скриншоты писем.

Клиент: Juniper & Oak, небольшой интернет-магазин керамики ручной работы и товаров для дома. Задача: два письма для их сервиса рассылок: приветственное со скидкой 10% на первый заказ и о весенней распродаже со скидкой 20% на вазы и кашпо, в песочных, терракотовых и оливковых тонах.

Клиент и все данные вымышлены.

Об услуге

У вас есть макет письма, и нужен код, который почтовые программы покажут правильно. Загрузите скриншоты или экспорт макета в PNG, и мы сверстаем HTML-письмо: те же блоки в том же порядке, цвета, размеры и кнопки, с настоящим текстом вместо картинки текста. Код такой, как нужно почте: таблицы шириной 600 px, стили прямо в элементах, похожие системные шрифты и одна колонка на телефоне, даже если в макете есть только версия для компьютера. Фото и иллюстрации из макета рисуются заново в том же духе, а ваши ставятся, если вы их загрузите. Сами файлы Figma, PSD и Sketch мы открыть не можем: экспортируйте экраны в картинки. Письма мы не отправляем.

Что входит

  • Что вы получитеАрхив ZIP с HTML каждого письма и его картинками, готовый для сервиса рассылок, и предпросмотр на странице заказа.
  • Близко к макетуБлоки, цвета, размеры и кнопки как в вашем макете
  • Настоящий текстЗаголовки и абзацы текстом, а не картинкой
  • Версия для телефонаДелаем по десктопному макету, если мобильного нет
  • Картинки на местеРисуем заново в духе макета или ставим ваши
  • Ссылка для отпискиЗаготовка в подвале, которую вы заменяете ссылкой своего сервиса

Порядок работы

  1. 1
    ЗагрузкаВы загружаете экраны макета письма и пишете, где какое письмо
  2. 2
    Вёрстка и предпросмотрМы верстаем каждое письмо таблицами со стилями в элементах, а вы сравниваете его с макетом на компьютере и телефоне
  3. 3
    АрхивВы скачиваете архив и просите правки в рамках пакета

Что нужно от вас

До 5 картинок в PNG, JPEG или WebP: экраны макета письма, по одному письму на картинку, достаточно чёткие, чтобы читался текст, и по желанию логотип и фото, которые нужно поставить как есть. Напишите, какой файл какое письмо, тексты, если они отличаются от макета, куда ведёт каждая кнопка, и данные отправителя для подвала. Не файлы Figma, PSD или Sketch: экспортируйте каждый фрейм письма в картинку.

В брифе мы спросим:

  • Какой файл какое письмо?
  • Отличаются ли тексты от макета?
  • Куда ведут кнопки?
  • Данные отправителя для подвала

Сравнение пакетов

ПакетыЭконом1 письмо по макету17 $Стандарт2 письма по макетам31 $Бизнес4 письма по макетам52 $
Срок1 день2 дня2 дня
Доработки123
Писем124
Картинок для писем234
Версия для телефонаДаДаДа
Ссылка для отпискиДаДаДа
По вашему макетуДаДаДа
Заказать ЭкономЗаказать СтандартЗаказать Бизнес

Защита оплаты

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

  • Фиксированная ценаЦена пакета не меняется после оплаты.
  • Деньги резервируютсяПри оплате сумма только резервируется. Сервису она переходит, когда вы примете работу.
  • Проверка перед сдачейКаждый результат проходит проверку качества, прежде чем попасть к вам, и вы видите его на странице заказа до приёмки.
  • Бесплатные доработкиПросите изменения в рамках брифа столько раз, сколько предусмотрено пакетом.
  • Приёмка через 3 дняЕсли в течение 3 дней после сдачи вы не примете работу и не попросите изменений, она будет принята автоматически. Если после сдачи вы напишете в чат заказа, заказ подождёт; ответив, мы можем начать отсчёт 3 дней заново и сообщим об этом в чате.
  • Переделка или полный возвратЕсли результат не соответствует брифу и доработки не помогли или срок превышен больше чем вдвое, напишите в чат заказа: мы переделаем работу или полностью вернём деньги.
Как это работает →

Вопросы и ответы

Можете открыть мой файл Figma или PSD?

Нет, мы верстаем по картинкам экранов. В Figma выделите фрейм письма и экспортируйте его в PNG в масштабе 2x, в Photoshop используйте «Экспортировать как». Длинное письмо можно прислать одной высокой картинкой.

Будет ли совпадение до пикселя?

Вёрстка будет близка к макету по сетке, цветам, размерам и порядку блоков, но не до пикселя: почтовые программы показывают письма немного по-разному, шрифты системные и похожие, а фото рисуются заново, если вы не загрузите свои. Перед рассылкой отправьте тест в несколько почтовых ящиков и на телефон.

В макете особый шрифт и видео. Что тогда?

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

Можно сверстать чужое письмо?

Мы верстаем макеты, которые принадлежат вам или которые вы вправе использовать. Чужое письмо один в один мы не копируем; понравившееся письмо может быть только подсказкой по стилю.

Письмо подойдёт для визуального редактора сервиса?

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

Не нашли ответ?

Пакеты