Дизайнеру или верстальщику будет тяжело перестроить с маленького экрана на десктоп табличное представление. Можно делать сложный и красивый дизайн, которого не будет ни у кого другого, добавить форму заказа, игру, опрос, тест и прочие интерактивные элементы. Но минус технологии в том, что не все почтовые клиенты ее поддерживают. В России AMP-письма распознают только Gmail и Mail.ru. Для всех остальных почтовиков нужно верстать обычное письмо.
Медиазапросы позволяют трансформировать не только размер букв, но размещение блоков и иллюстраций. Единственный недостаток — не все почтовики способны корректно распознавать и исполнять эти команды. Используйте только те атрибуты и HTML-теги, которые одинаково хорошо воспринимают все почтовые клиенты. Именно правильное использование таблиц позволит вам добиться желаемого результата — чтобы письмо выглядело точно так, как вы задумали, на любом экране. Ведь не все почтовики и браузеры умеют поддерживать последние версии HTML и CSS.
Размер Письма
Однако учитывайте, что в редактор нельзя загружать изображения, даже иконки социальных сетей. Outlook по умолчанию не загружает картинки, что для нашего письма критично. Поэтому я прописала изображениям альтернативный текст, чтобы https://deveducation.com/ пользователи с базовыми настройками считали идею. Общая цветовая гамма передаёт атмосферу, а альт-текст подсказывает, о чём письмо. Можно сверстать сложный макет, который не всегда получится создать в блочном редакторе.
С их помощью можно менять размеры шрифта и цвет кнопок, расположение блоков и картинок в зависимости от размера экрана. Но полностью полагаться на них не стоит — до сих пор не все почтовые клиенты выполняют эти инструкции. Прехедер показывается на многих почтовых клиентах в качестве предпросмотра письма и важен так же, как тема сообщения. Всегда добавляйте его, так как это мотивирует подписчика открыть полученное письмо. Многие почтовые клиенты обрезают тему письма, если она слишком длинная, а прехедер помогает лучше отразить суть.
Структура И Код
Проще всего подсмотреть цвета и шрифты для рассылки в брендбуке компании. Если такого нет — можно собрать палитру цветов с сайта и перенести их в письмо. Я для этого использую расширение для Chrome Eye Dropper. Поэтому письма нужно верстать с учетом этой особенности, а не сразу на мобилке.
Если использовать какие-то другие шрифты, то почтовые приложения могут автоматически заменить их на шрифт по умолчанию. В итоге внешний вид рассылки будет совсем не таким, каким его задумал дизайнер. Такая проверка занимает время, но позволяет отшлифовать верстку шаблона письма до идеального состояния. В Sendsay, например, тестовое письмо можно отправить прямо из интерфейса редактора, чтобы сразу внести правки. На примере ниже видно, как хорошо подстраивается под размер экрана письмо, сверстанное в блочном редакторе Sendsay. Оно перестраивается так, чтобы текст, картинки и кнопки выглядели одинаково хорошо и читаемо.
Поэтому я решила вовлечь читателя общением с персонажами — морскими обитателями. Подписчикам будет любопытно узнать, какие тайны скрываются на дне. В креативных письмах задача верстальщика — не только сделать так, чтобы письмо корректно отображалось на всех устройствах, но и воплотить замысел дизайнера. На сей раз главной фишкой стала большая длина, а точнее, «глубина» письма. Обычно в рассылках стремятся к компактности — здесь же мы сделали всё наоборот.
Из-за этого письма могут не только терять свой внешний вид, но и долго грузиться, или не открываться. А то и вовсе попадать в спам, если почтовик заподозрит, что содержащаяся в нем ссылка это потенциальный зловред. В шаблонах блоки письма уже расставлены определенным образом, их можно отредактировать. Но вы можете самостоятельно собрать рассылку из элементов в блочном редакторе, если нужно создать свою структуру. У почтовых клиентов есть ограничения по размеру верстки писем для email-рассылки – не больше 100 Кб. Если его превысить, то письмо может некорректно отображаться или не отправиться вовсе.
Шрифты
Платформа функционирует как командная строка или бесплатное десктоп-приложение — можно выбрать нужный вариант. К плюсам MJML относят быструю интеграцию с программой для создания рассылок Mailjet и мгновенно подгружающееся превью. Блочный редактор ускоряет сборку писем и помогает верстать email тем, кто в совершенстве не владеет HTML и CSS. Работа в таких редакторах построена по принципу «бери и тащи» — мы перетаскиваем нужные блоки в макет письма и заполняем их контентом.
- У почтовых клиентов есть ограничения по размеру верстки писем для email-рассылки – не больше one hundred Кб.
- Доступны как готовые шаблоны, так и пустые, в которых можно конструировать письма с нуля.
- Основные проблемы у меня были с кнопками, яркие желтые кнопки становились цвета детской неожиданности в темной теме.
- Среди плюсов — разнообразные шаблоны, удобный интерфейс, гибкое редактирование.
- Через час ему приходит письмо с этими кроссовками и предложением сделать заказ.
- Один минус — Mail.ru и Яндекс.Почта на этих сайтах нет.
Шрифт без засечек, созданный в 80-х годах ХХ века специально для Microsoft. Для него характерны узкие буквы и такое же узкое расстояние между ними. Подходит для тех, кому нужен убористый шрифт, чтобы уместить больше текста без разрыва строки. Самый популярный шрифт для всех стран, как верстать письма пишущих на латинице. Шрифт не имеет засечек и считается одним из самых дружелюбных для восприятия — в нем почти нет отвлекающих внимание элементов. Несмотря на «простонародность», его активно используют в своих брендбуках глобальные компании, такие как Макдональдс или Скайп.
Поэтому рекомендуем зарегистрировать ящики во всех почтовиках, которые использует ваша целевая аудитория, и вручную проверять верстку в каждом. Первый шаг в верстке HTML-письма – создание макета. На данном этапе создается дизайн и продумывается структура будущей рассылки.