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

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

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

Когда стоит использовать HTML-шаблон?
Если вы отправляете простые информационные письма один раз в месяц, встроенного конструктора UniSender может быть вполне достаточно.
Но существуют задачи, где HTML-верстка становится практически обязательной.

Например:

• интернет-магазины;
• корпоративные рассылки;
• welcome-цепочки;
• триггерные письма;
• промоакции;
• письма с несколькими товарными блоками;
• персонализированные предложения;
• автоматические сценарии.

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

Что понадобится перед загрузкой
Перед тем как импортировать письмо в UniSender, подготовьте несколько вещей.

Готовый HTML-файл
Это основной файл письма. Обычно он называется:
index.html
или
email.html
Именно его будет использовать сервис.

Все изображения
Очень распространенная ошибка новичков — оставить картинки только на своем компьютере.
Например:
<img src="banner.jpg">
или
<img src="images/logo.png">
После загрузки такое письмо работать не будет.
Изображения должны быть либо:

• размещены на сервере;
• загружены в облачное хранилище;
• импортированы вместе с архивом.

Проверенная HTML-верстка
Не каждый HTML подходит для email. Например, современные сайты используют:

• Flexbox;
• CSS Grid;
• JavaScript;
• SVG-анимацию;
• внешние CSS-файлы.

Почтовые клиенты подобные технологии поддерживают плохо.
Для email используется специальная верстка. Как правило, она включает:

• таблицы;
• inline CSS;
• фиксированную ширину контейнера;
• специальные хаки для Outlook.

Если письмо сверстано как обычная веб-страница, после загрузки оно может отображаться некорректно.

Какие способы загрузки HTML есть в UniSender
Существует два основных варианта.

Способ №1. Загрузка ZIP-архива
Это наиболее удобный и безопасный вариант. Вы готовите структуру примерно такого вида:

После импорта UniSender автоматически обработает изображения и свяжет их с HTML-файлом.

Этот способ подходит практически для любых коммерческих писем. Особенно если используется большое количество графики.

Способ №2. Вставка готового HTML-кода
Второй вариант — вставить код письма непосредственно в HTML-редактор.
Подходит, если:

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

При этом важно понимать, что все изображения уже должны быть доступны по HTTPS.
Например:
https://site.ru/images/banner.jpg

Такой способ часто используют разработчики при тестировании писем.

Как загрузить HTML-шаблон в UniSender через ZIP
Рассмотрим процесс пошагово.

Шаг 1. Подготовьте архив
В архив должны входить:

• HTML-файл;
• папка с изображениями;
• дополнительные ресурсы (если используются).

Важно, чтобы HTML лежал в корне архива.
Правильно:
email.zip
-- index.html
-- images/

Неправильно:
email.zip
--template/
--index.html

Во втором случае UniSender может не найти основной файл.

Во втором случае UniSender может не найти основной файл.

Шаг 2. Создайте новое письмо

1. Войдите в аккаунт UniSender.
2. Перейдите в раздел создания новой рассылки.
3. На открывшейся страничке "Информация о рассылке" укажите тему письма
4. Там же нажмите "Добавить дизайн" или "Собрать письмо"
5. На открывшейся странице с блочно-визуальным редактором письма нажмите на три точки и выберите "Импортировать"
6. Выберите и загрузите подготовленный ZIP-файл со своего компьютера
7. Дождитесь окончания обработки.

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

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

Шаг 4. Проверьте отображение
После импорта внимательно просмотрите письмо. Особенно стоит проверить:

• логотип;
• баннер;
• кнопки;
• изображения;
• иконки;
• ссылки;
• фоновые элементы.

Если хотя бы один элемент отсутствует, скорее всего проблема связана со структурой архива или путями к изображениям.

Как загрузить HTML-код напрямую?
Этот вариант подойдет, если письмо уже полностью готово.
Последовательность действий обычно выглядит следующим образом:

• Создайте новое HTML-письмо
• Откройте режим редактирования исходного кода
• Скопируйте весь HTML
• Вставьте его в редактор кода на странице редактирования письма
• Сохраните изменения

После этого UniSender сформирует готовое письмо.

Очень важно использовать полный HTML-документ, а не отдельный фрагмент страницы

Какие изображения лучше использовать
Вес письма напрямую влияет на скорость загрузки. Поэтому рекомендуется соблюдать несколько правил. Используйте:

• JPG для фотографий;
• PNG для логотипов;
• WebP только после проверки поддержки;
• SVG — только если понимаете ограничения почтовых клиентов.

Оптимальный размер большинства баннеров — не более 200 КБ.

Также желательно заранее сжимать изображения без заметной потери качества.

Самые распространенные ошибки при загрузке HTML
Практически все проблемы возникают из-за нескольких типичных ошибок.

Относительные пути
Неправильно:
<img src="banner.jpg">
Правильно:
<img src="https://site.ru/banner.jpg">
или использовать ZIP-архив с корректной структурой.

Использование внешнего CSS
Email-клиенты плохо работают с подключаемыми стилями.
Вместо:
<link rel="stylesheet" href="style.css">
лучше применять встроенные inline-стили.

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

Flexbox и Grid
Большинство почтовых клиентов поддерживают их частично или не поддерживают вовсе. Поэтому профессиональная email-верстка по-прежнему строится на HTML-таблицах.

Что проверить перед отправкой письма
Даже если шаблон успешно загрузился в UniSender, это еще не означает, что письмо будет одинаково отображаться у всех получателей.

Перед массовой рассылкой рекомендуется проверить:

• отображение в Gmail;
• отображение в Outlook;
• отображение в Apple Mail;
• корректность мобильной версии;
• работу всех ссылок;
• наличие ALT-текстов у изображений;
• читаемость письма при отключенных картинках;
• корректное отображение темной темы;
• размер HTML-кода;
• отсутствие битых изображений.

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

15 частых ошибок при загрузке HTML-писем в UniSender и способы их исправить
Даже если HTML-шаблон успешно импортировался в UniSender, это не гарантирует, что письмо будет корректно отображаться у всех получателей. Ниже — самые распространенные ошибки, с которыми сталкиваются начинающие email-маркетологи.

1. Не загружаются изображения
Самая частая проблема — вместо баннеров и логотипов отображаются пустые области.
Причины:

• используются относительные пути к изображениям;
• картинки не попали в ZIP-архив;
• файлы были перемещены после создания шаблона;
• изображения размещены по HTTP вместо HTTPS.

Решение:
Используйте абсолютные HTTPS-ссылки или загружайте изображения вместе с HTML-шаблоном в ZIP-архиве.

2. Outlook отображает письмо некорректно
Письмо может «разъехаться», изменить размеры блоков или полностью нарушить структуру.
Почему так происходит?
Microsoft Outlook использует движок Microsoft Word для отображения HTML-писем. Он поддерживает лишь часть HTML и CSS.
Как избежать проблемы:

• использовать табличную верстку;
• применять inline CSS;
• отказаться от Flexbox и CSS Grid;

тестировать письмо в Outlook до массовой отправки.

3. Сломалась мобильная версия
На компьютере письмо выглядит идеально, а на смартфоне приходится масштабировать экран.
Основные причины:

• отсутствуют media-запросы;
• используются слишком широкие изображения;
• таблицы имеют фиксированную ширину.

Решение:
Создавайте адаптивные HTML-шаблоны, рассчитанные на экраны мобильных устройств.

4. Кнопки не работают
Иногда кнопка отображается, но при нажатии ничего не происходит.
Чаще всего проблема заключается в:

• неверной ссылке;
• отсутствии протокола https://;
• случайном удалении атрибута href.

Перед отправкой обязательно проверьте каждую ссылку вручную.

5. Стили исчезли после загрузки
Если письмо выглядит как обычный текст без оформления, скорее всего использовались внешние CSS-файлы.
Для email практически всегда рекомендуется применять inline CSS, когда стили прописываются непосредственно у каждого элемента.

6. Письмо слишком тяжелое
Большие изображения значительно увеличивают размер HTML-письма.
Это приводит к:

• долгой загрузке;
• обрезанию письма Gmail;
• ухудшению пользовательского опыта.

Перед загрузкой оптимизируйте изображения и удалите лишний код.

7. Письмо попадает в спам
Даже красивый HTML-шаблон не гарантирует доставляемость.
На попадание в папку «Спам» влияют:

• репутация домена;
• настройки SPF, DKIM и DMARC;
• содержание письма;
• большое количество изображений при минимуме текста;
• подозрительные ссылки.

Поэтому важно оптимизировать не только HTML, но и инфраструктуру отправки.

8. Не отображаются веб-шрифты
Большинство почтовых клиентов поддерживают только ограниченный набор шрифтов. Лучше использовать безопасные варианты:

• Arial;
• Verdana;
• Tahoma;
• Georgia;
• Times New Roman.

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

9. Фоновое изображение исчезло
Некоторые почтовые клиенты игнорируют CSS-свойство background-image.
Если фон критически важен, лучше реализовать дизайн без зависимости от него или использовать специальные приемы, совместимые с Outlook.

10. Темная тема изменила дизайн
Все больше пользователей читают письма в темном режиме. Некоторые почтовые клиенты автоматически:

• меняют цвет текста;
• инвертируют фон;
• изменяют логотипы.

Поэтому рекомендуется тестировать шаблон как в светлой, так и в темной теме.

11. Письмо отображается по-разному в Gmail и Apple Mail
Различия в поддержке HTML и CSS между почтовыми клиентами — нормальное явление. Именно поэтому профессиональные HTML-письма всегда тестируются сразу в нескольких почтовых сервисах.

12. Не работают GIF-анимации
Не все почтовые клиенты поддерживают анимированные GIF одинаково.
Например, некоторые версии Outlook отображают только первый кадр.
Поэтому первый кадр должен содержать основную информацию.

13. Используется слишком сложная HTML-разметка
Email — это не веб-сайт.
Чем проще HTML-код, тем выше вероятность его корректного отображения.
Лишние контейнеры, вложенные блоки и сложные конструкции лучше исключить.

14. Используются неподдерживаемые CSS-свойства
Даже современные CSS-возможности могут работать не во всех почтовых клиентах. Перед использованием новых свойств желательно проверить их совместимость

15. Письмо не протестировано
Самая дорогая ошибка — отправить письмо тысячам подписчиков без предварительной проверки. Даже небольшая опечатка или неработающая ссылка могут существенно снизить эффективность рассылки.

Как протестировать HTML-письмо перед отправкой
Перед запуском массовой email-кампании рекомендуется выполнить простой чек-лист. Проверьте:

• отображение в Gmail;
• отображение в Outlook;
• отображение в Apple Mail;
• мобильную версию;
• корректность ссылок;
• ALT-тексты изображений;
• скорость загрузки;
• темную тему;
• отображение при отключенных изображениях;
• наличие ошибок в HTML-коде.

Несколько минут тестирования помогут избежать проблем после отправки.

Что выбрать: ZIP-архив или вставку HTML-кода?
Оба способа поддерживаются UniSender, однако подходят для разных сценариев:

FAQ
Можно ли загрузить обычную веб-страницу в UniSender?
Нет. HTML для email значительно отличается от HTML обычных сайтов. Письмо необходимо адаптировать под требования почтовых клиентов.

Поддерживает ли UniSender адаптивные HTML-письма?
Да. Если шаблон сверстан корректно, он будет адаптироваться под различные размеры экранов.

Почему письмо отображается нормально в браузере, но плохо в Outlook?
Outlook использует собственный механизм отображения HTML, поэтому многие современные CSS-технологии работают иначе или не поддерживаются вовсе.

Можно ли использовать Bootstrap?
Нет. Большинство компонентов Bootstrap не поддерживаются почтовыми клиентами

Нужно ли знать программирование?
Если вы используете готовый HTML-шаблон, достаточно понимать основы работы с файлами и интерфейсом UniSender. Для создания собственного адаптивного письма потребуются знания HTML и особенностей email-верстки

Нужно ли знать программирование?
Если вы используете готовый HTML-шаблон, достаточно понимать основы работы с файлами и интерфейсом UniSender. Для создания собственного адаптивного письма потребуются знания HTML и особенностей email-верстки

Читайте также
Чтобы лучше разобраться в теме email-маркетинга и HTML-писем, рекомендуем следующие материалы:

• Как создать email-рассылку в UniSender: пошаговая инструкция для начинающих
• Как сверстать HTML-письмо для UniSender
• Как сделать адаптивное письмо для UniSender
• Почему HTML-письмо отображается неправильно в UniSender
• Конструктор писем UniSender или HTML-верстка: что выбрать
• Полное руководство по UniSender для начинающих