Привет!
Уже 12 лет занимаюсь версткой email-писем — тех самых, которые приходят тебе от магазинов, сервисов, брендов, или как говорят в народе "спам". В умелых руках "спам" - это классный маркетинговый канал.

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

Если тебе интересна эта тема — жми подписку, впереди много полезного 🙌

И да — вопросы, кейсы и обсуждения приветствуются в комментах!

https://t.me/email_codding

Что такое email-верстка?

Email-верстка — это создание HTML-писем, которые должны корректно отображаться:

✅ в браузере
✅ на мобильных
✅ в десятках почтовых клиентов
(Gmail, Outlook, Yahoo и др.)

⚠️ При этом — почти никакого CSS, JavaScript запрещён,
а верстаем всё на… таблицах.

Это боль и искусство одновременно.
Но за это хорошо платят, особенно если ты умеешь делать красиво, быстро и кросс-клиентно.

Завтра покажу, почему <table> — наш лучший друг 👀

https://t.me/email_codding

В 2025 году сайты мы верстаем на flex/grid.
Но в email-верстке — <table> всё ещё король.

Почему?

❌ Gmail и Outlook не поддерживают layout на div
❌ float и position — нестабильны
❌ media queries работают не везде

✅ Таблицы — максимально предсказуемые
✅ Работают даже в древних клиентах
✅ Можно контролировать layout в пикселях

Раньше смеялся над таблицами.
Сейчас — поклоняюсь им.

https://t.me/email_codding

Хоть в горах Испании, хоть в лесу под Парижем — твоя email-рассылка всё равно выйдет вовремя. Wi-Fi слабый, а верстка — сильная 💪📧

#asapmail #emailmarketing #emailcodding #digitalкочевники

Мини-гайд: как сверстать кнопку

🛠 Кнопка в email — это не <button> и не div.
Это <table> с ячейкой внутри, в которой <a> со стилями.

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#ff6f61" style="padding: 12px 24px; border-radius: 4px;">
<a href="#" style="color:#ffffff; text-decoration:none; font-weight:bold; font-family:sans-serif;">
Перейти
</a>
</td>
</tr>
</table>

🔥 Да, это работает везде — даже в Outlook.

5 главных багов в Outlook

Outlook — боль каждого верстальщика.
Вот топ-5 проблем, которые встречаются чаще всего:

❌ border-radius не работает
❌ margin может игнорироваться
❌ padding в a — может не применяться
❌ background-image не поддерживается
❌ Media Queries игнорируются

✅ Решение — использовать vml, инлайн-стили, и табличную структуру.

Хочешь отдельный пост по каждому багу — пиши в комменты!

Протестировать письмо в Gmail — легко.

Но как его увидит Outlook 2016 на Windows?
Или Apple Mail на iPhone SE?

Вот топ инструментов для тестирования email-писем:

🧪 Litmus — мощный, но дорогой
🧪 Email on Acid — альтернатива Litmus
🧪 Mailtrap — удобно для QA
🧪 PutsMail — простой способ отправки тестового письма
🧪 MailTester — проверка на спам-фильтры

⚠️ Если делаешь для клиента — обязательно проверяй в разных клиентах.
Цена ошибки — нечитабельное письмо = минус деньги.

😫 Устали верстать письма на таблицах вручную?

Встречай MJML — фреймворк для верстки писем.

<mj-section>
<mj-column>
<mj-button href="#">Нажми</mj-button>
</mj-column>
</mj-section>

На выходе — чистый, рабочий HTML с таблицами.

Плюсы:
— Ускоряет работу
— Читабельный синтаксис
— Адаптив по умолчанию

Минусы:
— Не всё можно кастомизировать
— Лишний код
— Надо уметь дебажить результат

MJML — как Tailwind, только для писем. Используешь?

Mobile-first или Desktop-first в письмах?

В вебе — mobile-first давно стандарт.
А как в email-верстке?

📥 Ответ: чаще — desktop-first.

Почему:
Email-клиенты плохо поддерживают media queries

Лучше сделать стабильную desktop-версию, потом адаптировать

Но бывают исключения:
Если 80% аудитории — мобильные (например, ecommerce). Тогда разумно начать с мобилки

🧪 Главное — тестировать и смотреть, где аудитория открывает письма (статистика у ESP, например Mailchimp или Unisender)

Мини-гайд: как сделать адаптивный блок

Хочешь адаптивный блок?
Вот базовый подход с
media query

<style>
@media only screen and (max-width: 600px) {
  .container { width: 100% !important; }
  .two-columns { display: block !important; width: 100% !important; }
}
</style>

<table class="container" width="600" cellpadding="0" cellspacing="0">
  <tr class="two-columns">
    <td width="50%">Контент 1</td>
    <td width="50%">Контент 2</td>
  </tr>
</table>

⚠️ Используем inline-стили + классы только для @media

✅ Работает в большинстве современных клиентов
❌ Outlook Desktop игнорирует, но можно подстраховать табличной структурой

Хочешь кроссплатформерную адаптивную карточку товара? Напиши — покажу, как сделать 👇

t.me/asapmail

📚 Полезные ресурсы для email-верстки

Собрал подборку, которую сам использую:

🔧 Can I Email — проверка поддержки HTML/CSS в почтовиках
💻 MJML — фреймворк для адаптивной верстки
🔍 Litmus — тестирование отображения
🧪 Mailtrap — песочница для писем
👀 Really Good Emails — галерея вдохновения

💬 Делись своими любимыми ресурсами в комментариях — расширим подборку вместе!

Где искать заказы на верстку писем

💼 Хочешь зарабатывать на верстке email-писем?
Вот где искать заказы:

🌍 Фриланс-платформы:

- Upwork (ищи по “HTML Email Developer”)
- Fiverr (можно создать гиг под верстку)
- Kwork, Freelancehunt (рунет)

📦 Email-платформы:
Некоторые ESP (Email Service Providers) ищут верстальщиков:

- Mailchimp Experts
- Klaviyo Partners
- Selzy

🧲 Агентства и digital-студии:
Часто ищут подрядчиков — можно писать напрямую.

✨ Портфолио + соцсети:
Покажи 2–3 сверстанных письма, сделай пост в Telegram/LinkedIn — иногда заказчики приходят сами.

Хочешь пост с шаблоном портфолио?
Напиши в комментах 👇

✅ Чек-лист перед отправкой email-письма:

Все тексты проверены на ошибки

— Все ссылки рабочие
— У всех картинок есть alt
— Inline-стили применены везде
— Тестировано в Gmail, Outlook, iOS Mail, Android Gmail
— Письмо грузится быстро (не перегружено весом картинок)
— Нет лишних тегов (div, span, скриптов)
— Обязательно есть кнопка отписки (если массовая рассылка)

📩 Сохрани себе и проверяй перед каждым релизом!

📬 Какие бывают виды email-рассылок:

— Транзакционные письма (заказы, подтверждения)
— Промо-рассылки (скидки, акции)
— Информационные дайджесты (новости, блоги)
— Образовательные серии (обучение, гайды)
— Триггерные письма (забытая корзина, рекомендации)

✨ Каждому типу нужна своя структура и верстка.

Показать примеры? Пиши “+” в комменты 👇

✍️ Как писать текст для email-писем:

📌 Сначала — главное сообщение
📌 Делай короткие абзацы
📌 Используй буллеты и списки
📌 Ясные и заметные call-to-action (CTA)
📌 Пиши как другу, а не как в рекламе

❗В письмах работают краткость и чёткость.
Человек скроллит быстро — зацепить надо сразу.

⚠️ HTML и CSS, которые нельзя использовать в email-письмах:

❌ JavaScript (<script>) — запрещён
❌ Внешние CSS-файлы (<link>) — не работают
❌ position: absolute/fixed — нестабильно
❌ Видео встраивание через <video> — почти нигде не поддерживается
❌ Webfonts (часто игнорируются)

Лучше:

✅ Использовать инлайн-стили
✅ Простые шрифты (Arial, Verdana, Tahoma, Trebuchet MS, ✅ Times New Roman, Georgia)

Минимизировать количество тегов

🚀 Простота = лучшая совместимость.