Занятость в сфере digital-маркетинга требует от дизайнеров и маркетологов знание основ языка гипертекстовой разметки (HTML). Нет сомнений, что для создания качественных носителей интернет-рекламы важно иметь понимание базовых технических требований и особенностей реализации. И хотя разделение труда ускоряет выполнение задач, повышает качество выполнения, снижает количество ошибок – реальность далеко не всегда стремится к такой идеальной картине мира. Дефицит рабочих кадров в России создает тенденцию, что одного и того же сотрудника нагружают совмещением различных проектных ролей. Возникают ситуации, когда от дизайнера и маркетолога требуется не только создать макет HTML-письма, но и перевести его в HTML-код без привлечения верстальщика.
Почему AI эффективнее визуальных конструкторов
В последние годы искусственный интеллект успешно внедряется во многие сферы жизни. Поэтому логично было бы прибегнуть к помощи AI, если вам внезапно назначили задачу по подготовке макета HTML-письма с последующим выводом кода. Возникает вопрос: почему, например, нельзя использовать визуальные конструкторы рассылок? Возможно, такой вариант будет для вас оптимальным, но для некоторых компаний существуют определенные недостатки:
- В небольших фирмах недостаток бюджета на цели маркетинга вынуждает пользоваться только условно-бесплатными инструментами, которые ограничены лимитами. Доступность сервиса при таком сценарии крайне ненадежная. В стремлении экономить приходится постоянно либо заводить новые аккаунты, либо бесконечно менять инструменты и привыкать к работе с каждым заново.
- В крупных организациях устройство внутренних процессов не позволяет проводить закупочные процедуры в короткий срок. Таким предприятиям, к сожалению, свойственна целая цепочка бюрократических активностей. Это значит, что для горящей задачи оплатить подписку вовремя не получится.
Чтобы избежать подобных сложностей, можно применить работающий метод взаимодействия с AI, который приведен в данной статье. Решится проблема отсутствия верстальщика, при этом лично вам не придется его замещать.
Технические требования к HTML-письмам
Что необходимо знать о технических параметрах макета, если никогда не занимался HTML-письмами? Информация не является секретной и размещена во многих статьях в интернете. Кратко требования можно описать так:
- Ширина макета может составлять 600-800 пикселей (оптимально 650px).
- Высота ограничивается диапазоном в 1024-1536px.
- Так как будет использоваться табличная верстка, необходимо держать в уме этот принцип построения пространства: блоки не должны пересекаться друг с другом ни по горизонтали, ни по вертикали. При наличии однотипных модулей, стоящих в один ряд, размеры графики в них требуется привести к единству.
- Изображения могут быть в форматах JPG, PNG или GIF (WebP поддерживается не везде). Общий их вес не может превышать 100-150KB. Не использовать прозрачность и какие-либо режимы наложения кроме normal. Все изображения должны быть загружены на хостинг и доступны по прямой ссылке. Нельзя заменять значимый текст картинками, которые могут и не загрузиться, если что-то пойдет не так.
- Используем только безопасные шрифты. Желательный размер заголовков составляет 22-28px, основного текста – 14-16px, а мелкий текст пусть будет не менее 10px. Если без применения фирменных или акцидентных шрифтов не обойтись, то их размещение возможно только в виде изображений.
- Цвет фона лучше использовать белый или светлый однотонный, не использовать градиент.
- Минимальный размер кнопки – 44×44px. Если вы планировали вшить какие-либо ссылки в текст, сделайте это до момента экспорта кода, чтобы в структуре документа сразу было обозначено место для данного функционала.
Вышеперечисленные пункты относятся к технической стороне дизайна. Визуальный стиль, структура, смысловое наполнение и логика расстановки акцентов прорабатываются дизайнером совместно с маркетологом на этапе технического задания.
Пошаговый процесс генерации HTML-кода с помощью AI
Когда макет в графическом редакторе Figma готов, переходим к извлечению кода. Для этого существует большое количество плагинов в свободном доступе, они позволяют выделить дизайн целиком или любой его элемент и получить соответствующий ему HTML-код.
Копируем данные и отправляем их в привычный для вас чат-бот с указаниями адаптировать код под HTML-письмо. В примере используется DeepSeek.
Чтобы получить лучший результат, уточняйте: «сгенерируй email-верстку с табличной структурой», «используй inline-стили», «сделай кнопки с padding, а не margin для Outlook». Нейросеть учитывает все эти моменты, в процессе работы ориентируется на особенности разных почтовых сервисов и даже дает советы. Мы можем вносить исправления в отдельные элементы, копируя их код в плагине Figma через индивидуальное выделение. Таким способом в примере назначена интерактивность для иконок соцсетей и для кнопки «Записаться», которая должна быть кликабельна по всей своей площади, а не в качестве текста-ссылки.
Как обеспечить адаптивность письма
Если ваш макет достаточно крупный по тексту и элементам и при этом имеет ширину не больше 600px, он может хорошо выглядеть на мобильных устройствах и без адаптации. Но если без адаптивной версии не обойтись, можно попросить нейросеть откорректировать код для воспроизведения на мобильных устройствах через добавление перестроения блоков.
Финальные шаги
Полученный HTML-код мы записываем в файл блокнота, меняя разрешение документа на .html. Нам остается назначить правильные адреса для гиперссылок, вшитых в текст, иконок и кнопок, а также для изображений, которые мы разместили на хостинге. В полотне кода ссылки легко найти по тегу < a > и атрибуту href.
А изображения располагаются под тегом < img > и атрибутом src
После внесения всех необходимых изменений готовый макет нужно протестировать. Сделать это можно через сервисы проверки рассылок либо с помощью ручной отправки письма на разные почтовые клиенты и сервера, на которых у вас должны существовать почтовые ящики. Если вы работаете с подрядчиком или интернет-изданием, то дополнительные тесты проводят и они. В любом случае, проверку корректности отображения макета перед передачей кода проводить нужно. Рассмотрим пример встраивания HTML в письмо на почтовом ящике name@gmail.com с последующей отправкой на name@yandex.ru:
1. В поле ввода текста письма правой кнопкой мыши кликаем «Просмотреть код элемента».
2. В поле ввода текста письма правой кнопкой мыши кликаем «Просмотреть код элемента».
3. Кликаем по подсвеченному полю с кодом правой кнопкой мыши и выбираем «Редактировать как HTML»
4. Вместо < br > вставляем код нашего письма и кликаем левой кнопкой мыши в любое пустое место вне кода. Таким образом наш макет поместится в структуру письма.
В финале получаем письмо, которое отображается корректно:
Заключение
Приведенный в статье макет не претендует на приз «за самый лучший дизайн». Это наглядная демонстрация того, как современные AI-инструменты упрощают процесс верстки email-рассылок, автоматически преобразуя макеты из графического редактора в чистый HTML-код. Адаптивная верстка создается за минуты вместо часов ручной работы. Снижается количество ошибок, так как учитываются особенности разных почтовых клиентов и корректно применяются inline-стили и табличная верстка. Вместе с тем, если вам необходимы сложные концептуальные макеты писем, AI вряд ли заменит опытного верстальщика полностью. Искусственный интеллект подходит для автоматизации рутины или, наоборот, для горящих задач.
