Платформа MJML содержит готовые параметры сетки и набор стандартных компонентов для создания адаптивных электронных писем. Фреймворк работает с собственным HTML-языком шаблонов и использует свои теги. Платформа функционирует как командная строка или бесплатное десктоп-приложение — можно выбрать нужный вариант. К плюсам MJML относят быструю интеграцию с программой для создания рассылок Mailjet и мгновенно подгружающееся превью. Первый шаг в верстке HTML-письма – создание макета. На данном этапе создается дизайн и продумывается структура будущей рассылки.

Как ускорить и упростить его, я рассказывал на вебинаре EMAILMATRIX. Полную запись вебинара с тремя спикерами можно получить по ссылке. А если крутой дизайн не нужен, сам маркетолог может загрузить картинки, добавить кнопки со ссылками и распределить текст. Один из способов адаптивной верстки — Mobile First. В этом случае сначала создают письмо для мобильных гаджетов, а потом — для компьютеров. Важно всегда тестировать свою работу перед отправкой заказчику или выкатыванием в прод.

Автоматические Письма

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

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

Вёрстка Писем Для Емейл-рассылки: Разбираем Пять Способов Оптимизации

Именно этот прием используют опытные верстальщики. Цвета в письмах задают в виде шестнадцатеричных чисел формата HEX (например, #333333). Сокращения в виде #333 обрабатывают не все почтовые клиенты, поэтому их в верстке рассылок не используют.

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

Stripo

Во входящих часто встречаю письма с откровенно шакальными мутными изображениями. Такое случается, если для рассылки шириной 600 пикселей взять картинку 600 пикселей. Уже давно можно смело использовать фото с бóльшим количеством https://deveducation.com/ пикселей. Я пользуюсь разными шрифтами и часто вижу их в рассылках других дизайнеров. Но стоит открыть письмо с телефона — и магия исчезает. Грустно видеть, как дизайнерский Gilroy заменяется условным Arial.

Хотя статистика довольно условна (в опросах приняли участие 2514 и 201 человек соответственно), тёмную тему не стоит игнорировать. Сверстать картинками только часть рассылки, например, баннер. Такой способ позволит сделать рассылку самобытной и классной. Но есть проблема — текст не будет масштабироваться под экран смартфона, как HTML-версия. Плюс спам-фильтры стараются не пропускать письма, свёрстанные только картинками.

• У MJML есть и существенный недостаток — по крайней мере для российских пользователей.
• Блочный редактор ускоряет сборку писем и помогает верстать email тем, кто в совершенстве не владеет HTML и CSS.
• Во второй части экрана письмо отобразится таким, каким его увидит получатель.
• Если на этапе финального теста клиент внесёт правки в текст или дизайн, это может сломать процесс.

Дизайнер агентства СХЕМА Виктория поделилась лайфхаками, как уживаться с требованиями почтовиков и верстать классные письма даже для Outlook. Чтобы разместить два элемента в одной строке, нужно нарисовать таблицу из нескольких колонок. Ячейки таблицы не умеют перестраиваться одна под другую в зависимости от ширины экрана, они всегда будут на одной линии, но могут вытягиваться по высоте. Иногда клиентам приходят письма, в которых вместо красивых картинок и выгодных предложений — набор непонятных символов. Или текст и иллюстрации настолько маленькие, что читать письмо просто невозможно. В статье рассмотрим принцип работы и правила (none, quarantine) политики, алгоритм действий при внедрении и отчеты по результатам проверки политики DMARC.

Некоторые из этих элементов не будут отображаться в рассылке (например, Flash-анимации, JavaScript). Другие могут отображаться, но при этом значительно повысят шанс рассылки на попадание в спам (сокращённые ссылки, письмо из одной картинки). Проще всего подсмотреть цвета и шрифты для рассылки в брендбуке компании.

С помощью плагинов можно реализовать nocode-подход к разработке писем. Для одного конструктора потребуется какой-то кастомный элемент, для другого — полноценный мастер-шаблон (и его обновление). Он подключается как JavaScript-библиотека, после чего сразу готов к использованию. Его ключевое отличие — из единого кода формируются и HTML-, и AMP-части письма.