HTML для email рассылок
HTML для Email рассылок
Особенности создания HTML писем, совместимых с различными почтовыми клиентами.
1. Базовая структура email
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Тема письма</title>
<style>
/* Стили должны быть инлайновыми или в head */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: #f5f5f5;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
}
</style>
</head>
<body>
<center>
<table class="container" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<!-- Содержимое письма -->
</td>
</tr>
</table>
</center>
</body>
</html>2. Пример письма с приветствием
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Добро пожаловать!</title>
<style>
body { margin: 0; padding: 20px; font-family: Arial, sans-serif; background: #f7f9fc; }
.container { max-width: 600px; margin: 0 auto; background: white; border-radius: 8px; overflow: hidden; }
.header { background: #4a90e2; color: white; padding: 30px 20px; text-align: center; }
.content { padding: 30px; line-height: 1.6; color: #333; }
.button { display: inline-block; background: #4a90e2; color: white; padding: 12px 30px; text-decoration: none; border-radius: 4px; }
.footer { background: #f5f5f5; padding: 20px; text-align: center; color: #666; font-size: 12px; }
</style>
</head>
<body>
<center>
<table class="container" cellpadding="0" cellspacing="0" border="0" width="100%">
<!-- Заголовок -->
<tr>
<td class="header">
<h1 style="margin: 0; font-size: 28px;">Добро пожаловать!</h1>
<p style="margin: 10px 0 0 0; opacity: 0.9;">Рады видеть вас в нашем сообществе</p>
</td>
</tr>
<!-- Основное содержимое -->
<tr>
<td class="content">
<h2 style="color: #2c3e50; margin-top: 0;">Привет, [Имя]!</h2>
<p>Спасибо за регистрацию в нашем сервисе. Теперь у вас есть доступ ко всем возможностям:</p>
<table cellpadding="10" cellspacing="0" border="0" width="100%" style="margin: 20px 0;">
<tr>
<td width="50" valign="top">✅</td>
<td><strong>Все функции платформы</strong><br>Полный доступ ко всем инструментам</td>
</tr>
<tr>
<td width="50" valign="top">✅</td>
<td><strong>Техническая поддержка</strong><br>Помощь 24/7 от нашей команды</td>
</tr>
<tr>
<td width="50" valign="top">✅</td>
<td><strong>Обновления</strong><br>Регулярные улучшения и новые функции</td>
</tr>
</table>
<p style="text-align: center; margin: 30px 0;">
<a href="https://example.com/dashboard" class="button" style="color: white; text-decoration: none;">
Перейти в личный кабинет
</a>
</p>
<p>Если у вас возникли вопросы, не стесняйтесь обращаться в нашу службу поддержки.</p>
<p>С уважением,<br>Команда [Название сервиса]</p>
</td>
</tr>
<!-- Подвал -->
<tr>
<td class="footer">
<p style="margin: 0 0 10px 0;">
<a href="https://example.com" style="color: #4a90e2; text-decoration: none;">Наш сайт</a> |
<a href="https://example.com/help" style="color: #4a90e2; text-decoration: none;">Помощь</a> |
<a href="https://example.com/unsubscribe" style="color: #4a90e2; text-decoration: none;">Отписаться</a>
</p>
<p style="margin: 0; font-size: 11px;">
© 2024 Название компании. Все права защищены.<br>
[Адрес компании]
</p>
</td>
</tr>
</table>
</center>
</body>
</html>3. Адаптивное email письмо
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Специальное предложение</title>
<style>
@media only screen and (max-width: 600px) {
.container { width: 100% !important; }
.mobile-full { width: 100% !important; display: block !important; }
.mobile-center { text-align: center !important; }
.mobile-padding { padding: 15px !important; }
.mobile-hide { display: none !important; }
.mobile-stack { display: block !important; width: 100% !important; }
}
</style>
</head>
<body style="margin: 0; padding: 0; background: #f5f5f5; font-family: Arial, sans-serif;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f5f5f5">
<tr>
<td align="center" style="padding: 20px 0;">
<table class="container" width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="white" style="border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
<!-- Хедер -->
<tr>
<td class="mobile-padding" bgcolor="#2c3e50" style="padding: 20px; text-align: center;">
<img src="https://example.com/logo.png" alt="Логотип" width="150" style="display: block; margin: 0 auto;" class="mobile-full">
</td>
</tr>
<!-- Герой секция -->
<tr>
<td class="mobile-padding" style="padding: 40px 20px; text-align: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
<h1 style="margin: 0 0 15px 0; font-size: 32px;" class="mobile-center">Специальное предложение!</h1>
<p style="margin: 0 0 25px 0; font-size: 18px; opacity: 0.9;" class="mobile-center">Только этой недели скидка 30% на все услуги</p>
<a href="https://example.com/offer" style="display: inline-block; background: white; color: #667eea; padding: 12px 30px; text-decoration: none; border-radius: 25px; font-weight: bold; font-size: 16px;" class="mobile-full">Получить скидку</a>
</td>
</tr>
<!-- Особенности -->
<tr>
<td class="mobile-padding" style="padding: 40px 20px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="mobile-stack" width="33%" valign="top" style="padding: 0 15px; text-align: center;">
<img src="https://example.com/icon1.png" alt="Качество" width="60" style="display: block; margin: 0 auto 15px;">
<h3 style="margin: 0 0 10px 0; color: #2c3e50;">Высокое качество</h3>
<p style="margin: 0; color: #7f8c8d; line-height: 1.5;">Гарантия качества всех наших услуг и продуктов</p>
</td>
<td class="mobile-stack" width="33%" valign="top" style="padding: 0 15px; text-align: center;">
<img src="https://example.com/icon2.png" alt="Поддержка" width="60" style="display: block; margin: 0 auto 15px;">
<h3 style="margin: 0 0 10px 0; color: #2c3e50;">Поддержка 24/7</h3>
<p style="margin: 0; color: #7f8c8d; line-height: 1.5;">Круглосуточная техническая поддержка</p>
</td>
<td class="mobile-stack" width="33%" valign="top" style="padding: 0 15px; text-align: center;">
<img src="https://example.com/icon3.png" alt="Гарантия" width="60" style="display: block; margin: 0 auto 15px;">
<h3 style="margin: 0 0 10px 0; color: #2c3e50;">Гарантия возврата</h3>
<p style="margin: 0; color: #7f8c8d; line-height: 1.5;">30-дневная гарантия возврата средств</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- CTA секция -->
<tr>
<td class="mobile-padding" style="padding: 40px 20px; text-align: center; background: #ecf0f1;">
<h2 style="margin: 0 0 15px 0; color: #2c3e50;">Не упустите возможность!</h2>
<p style="margin: 0 0 25px 0; color: #7f8c8d; max-width: 400px; margin-left: auto; margin-right: auto;">Предложение действует до конца недели. Успейте воспользоваться скидкой.</p>
<a href="https://example.com/offer" style="display: inline-block; background: #e74c3c; color: white; padding: 15px 35px; text-decoration: none; border-radius: 4px; font-weight: bold; font-size: 16px;" class="mobile-full">Воспользоваться предложением</a>
</td>
</tr>
<!-- Футер -->
<tr>
<td class="mobile-padding" style="padding: 20px; text-align: center; background: #34495e; color: #bdc3c7; font-size: 12px;">
<p style="margin: 0 0 10px 0;">
<a href="https://example.com" style="color: #ecf0f1; text-decoration: none; margin: 0 10px;">Сайт</a>
<a href="https://example.com/help" style="color: #ecf0f1; text-decoration: none; margin: 0 10px;">Поддержка</a>
<a href="https://example.com/unsubscribe" style="color: #ecf0f1; text-decoration: none; margin: 0 10px;">Отписаться</a>
</p>
<p style="margin: 0;">© 2024 Компания. Все права защищены.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>4. Лучшие практики для email
<!-- Хорошие практики -->
<!-- Используйте таблицы для layout -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>Содержимое</td>
</tr>
</table>
<!-- Добавляйте alt текст для изображений -->
<img src="logo.jpg" alt="Логотип компании" width="200" height="50" style="display: block;">
<!-- Используйте инлайновые стили -->
<div style="font-family: Arial, sans-serif; font-size: 16px; color: #333;">
Текст
</div>
<!-- Добавляйте ссылку для отписки -->
<a href="{{unsubscribe_url}}" style="color: #999; font-size: 12px;">Отписаться</a>
<!-- Тестируйте в разных клиентах -->
<!-- Outlook, Gmail, Apple Mail, Mobile -->
<!-- Избегайте -->
<div>Сложная верстка div</div>
<script>JavaScript код</script>
<form>HTML формы</form>
<video>Видео элементы</video>