PrepBro
← Назад к вопросам

Готов ли верстать письма

1.3 Junior🔥 81 комментариев
#HTML и CSS#Soft Skills и рабочие процессы

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Готов ли верстать письма

Вёрстка писем (email-писем, HTML-писем) — это отдельный навык, который заметно отличается от веб-разработки. Это важный вопрос на интервью, потому что он показывает готовность разработчика к разным типам задач и понимание ограничений различных платформ.

Почему писем отличаются от вебасайтов

Основные отличия:

  1. Ограничения почтовых клиентов — Outlook, Gmail, Apple Mail поддерживают CSS-на ограниченном уровне
  2. Нет JavaScript — письма не выполняют скрипты
  3. Различные движки рендеринга — каждый клиент рендерит письма по-своему
  4. Заблокированные медиа-запросы — часто медиа-кьюри и некоторые CSS не загружаются по умолчанию
  5. Нет flexbox и grid в большинстве клиентов — приходится использовать table-layout

Технические требования для вёрстки писем

<!-- Правильная структура письма -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Email</title>
  <style>
    body { margin: 0; padding: 0; }
    table { border-collapse: collapse; }
    img { max-width: 100%; }
  </style>
</head>
<body>
  <!-- Используй TABLE для layout, не DIV -->
  <table width="600" cellpadding="0" cellspacing="0" style="margin: 0 auto;">
    <tr>
      <td style="padding: 20px; background-color: #ffffff;">
        <h1>Hello, World!</h1>
        <p>This is an email.</p>
      </td>
    </tr>
  </table>
</body>
</html>

Поддерживаемые CSS свойства

Поддерживаемые:

  • color, background-color, font-size, font-weight, font-family
  • padding, margin (через table cellpadding/cellspacing)
  • border, border-radius (ограничено)
  • text-align, text-decoration
  • Media queries (в некоторых клиентах)

НЕ поддерживаемые или ограничено:

  • Flexbox и CSS Grid
  • Анимация и переходы
  • CSS файлы через <link> (нужно inline style)
  • Background images (часто блокируются)
  • Шрифты из CDN
  • SVG и иные сложные медиа

Пример правильной вёрстки письма

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
      background-color: #ffffff;
    }
    .header {
      background-color: #007bff;
      color: #ffffff;
      padding: 20px;
      text-align: center;
    }
    .content {
      padding: 20px;
    }
    .button {
      background-color: #007bff;
      color: #ffffff;
      padding: 12px 24px;
      text-decoration: none;
      border-radius: 4px;
      display: inline-block;
    }
    .footer {
      background-color: #f4f4f4;
      padding: 20px;
      text-align: center;
      font-size: 12px;
      color: #666666;
    }
  </style>
</head>
<body>
  <table width="100%" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center">
        <table class="container" width="600" cellpadding="0" cellspacing="0">
          <!-- Header -->
          <tr>
            <td class="header">
              <h1>Welcome!</h1>
            </td>
          </tr>
          <!-- Content -->
          <tr>
            <td class="content">
              <p>Hello User,</p>
              <p>Thank you for signing up. Click the button below to confirm your email.</p>
              <table cellpadding="0" cellspacing="0">
                <tr>
                  <td>
                    <a href="https://example.com/confirm" class="button">Confirm Email</a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <!-- Footer -->
          <tr>
            <td class="footer">
              <p>Company Inc, 123 Street, City, Country</p>
              <p><a href="https://example.com/unsubscribe">Unsubscribe</a></p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Инструменты и практики

// 1. Используй MJML (Mailjet Markup Language) для упрощения
// или Inky от Foundation

// 2. Тестирование писем перед отправкой
// - Используй Litmus, Email on Acid для проверки совместимости
// - Проверь на реальных клиентах: Outlook, Gmail, Apple Mail

// 3. Инлайнинг CSS
// - Используй инструменты вроде premailer.io
// - Все стили должны быть inline в style атрибуте

// 4. Проверь изображения
// - Используй абсолютные URL-ы
// - Добавляй alt текст
// - Убедись, что вес изображений оптимален

// 5. Макет должен быть responsive
// - Используй media queries для мобильных
// - Ширина обычно 600px для максимальной совместимости

Ответ на вопрос интервьюера

Если на интервью спросили «Готов ли верстать письма?», хороший ответ:

Вариант 1 (Да, с опытом): "Да, я верстал письма. Я понимаю ограничения email-клиентов: отсутствие flexbox, необходимость использования таблиц для layout, inline стили. Я знаю о популярных инструментах вроде MJML и умею проверять совместимость на разных платформах через Litmus."

Вариант 2 (Да, готов учиться): "Я не верстал письма на предыдущих проектах, но я понимаю, что это отличается от веб-разработки. Я готов быстро освоить особенности email-клиентов, использование таблиц, inline стили и тестирование совместимости."

Вариант 3 (Предыдущий опыт): "В моём предыдущем проекте я верстал письма для платежных уведомлений. Я использовал таблицы для layout, инлайнил CSS и проверял на совместимость в разных клиентах. Я также работал с инструментами автоматизации для инлайнинга стилей."

Итог

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