Вёрстка email-рассылки: 6 лайфхаков от дизайнера Дизайн на vc ru

В моём компьютере установлено много шрифтов, и я часто вижу их, например, Gilroy, в письмах других дизайнеров. Но, когда читаю сообщения с мобильного телефона, шрифт в них заменяется на Arial. Сразу видно, что дизайнер не проверил, как рассылка будет смотреться с Arial, и письмо отобразилось некорректно. Требуется сверстать письмо для сервиса email рассылок unisender.com. Также стоит установить дополнительно цвет фона. Некоторые почтовые клиенты и браузеры не допускают установки картинки в качестве подложки.

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

Он прочитает каждую строчку, оставит комментарии и поможет сделать ваше решение правильным. Главная ценность курса — большой объём обратной связи от наставника, который детально разберёт ваш код, определит пробелы в понимании материала и поможет со всем справиться. На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать ихправильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить. Всё, что будет обернуто в тег и , почтовый клиент будет принимать за шапку письма. Футер (подвал) письма, который, бывает, дублирует ссылки навигации, а также включает в себя инструкцию на отписку и ссылку отписки непосредственно.

Но есть проблема — текст не будет масштабироваться под экран смартфона, как HTML-версия. Плюс спам-фильтры стараются не пропускать письма, свёрстанные только картинками. Будет неприятно, если сообщение, которое вы верстали несколько часов, не попадёт во «Входящие».

Сразу видно, что специалист не проверил, будет ли рассылка открываться корректно. К тому же он может значительно ускорить дизайн, если использовать собственные ассеты из мастер-шаблона. Среди дополнительных возможностей Ampier Framework — проверка отображения письма в двух вариантах тёмной темы. Это классический — с инверсией светлых цветов и неизменностью тёмных — и характерный для Gmail на iOS, когда происходит полная инверсия цветов. У MJML есть и существенный недостаток — по крайней мере для российских пользователей. Его разработчики делают большой акцент на использовании в письмах медиазапросов, которые не поддерживаются «Яндекс Почтой».

Как верстать HTML-письма: основные правила

Большинство конструкторов жёстко ограничивают структуру и дизайн писем. Часто пользователь не может реализовать задуманное, приходится https://deveducation.com/ идти на компромиссы. Выбрав какой-либо конкретный фреймворк, вы оказываетесь привязаны к его особенностям рендеринга.

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

В том числе поэтому email-маркетинг периодически «хоронят». Хотя заменить почту пока не удалось никому. Создать письмо — в Тильде можно по шаблону сделать красивое письмо, адаптированное под мобильные устройства. Написать хороший текст письма — самостоятельно или заказать редактору.

Почему «едет» вёрстка

Но полностью полагаться на них не стоит — до сих пор не все почтовые клиенты выполняют эти инструкции. Обязательно включайте в email-рассылку текстовую (plain-text) версию письма. Ряд почтовых клиентов вырезает HTML-версию письма и показывает простой текст. Проверьте, насколько верхняя левая часть письма позволяет читателю оценить необходимость его прочтения. Эта часть сообщения должна передавать основной смысл вашего послания и быть хорошо читаемой. Для всех изображений желательно указать атрибут alt с альтернативным текстом.

Гибридную верстку.Контент заключают в теги , по горизонтали располагают теги с указанной шириной. Тогда 2-3 колонки в письме на мобильном устройстве перестроятся в одну. Создавать простые письма, в которых будет минимум графики. Они будут нормально отображаться во всех устройствах. Рассыльщики не любят писем, в которых есть гифки весом более пяти мБ. Даже если вашей рассылке повезёт попасть во «Входящие», она будет долго грузиться.

Правила дизайна и вёрстки email рассылок

Один минус — Mail.ru и Яндекс.Почта на этих сайтах нет. Поэтому самый верный способ протестировать макет письма — сделать рассылку на свои почтовые ящики. Именно этот прием используют опытные верстальщики. Письмо может отлично выглядеть в браузере, но некрасиво разъехаться в мобильном приложении Gmail или старенькой версии Outlook. Почтовые клиенты считают себя настолько умными, что сами пытаются отыскать в тексте вашего письма ссылки.

На эффективность рассылки влияет множество факторов. Сверстать картинками только часть рассылки, например, баннер. Такой способ позволит сделать рассылку самобытной и классной.

• Если размер кнопок будет меньше, попасть в них и выполнить целевое действие будет сложнее.
• Проще всего подсмотреть цвета и шрифты для рассылки в брендбуке компании.
• И есть письма для людей, которые хотят читать именно статьи блога — раз в месяц мы отправляем им подборку статей.
• Подписчики не будут ждать, пока письмо откроется, даже если его прислал любимый бренд.
• Конструктор писем в Тильде упростил создание рассылок, взяв техническую часть на себя.
• Помните, что для Outlook необходимо задавать ширину изображения с помощью атрибута width.

Поэтому важно понимать, как красиво оформить письмо, используя изображения. Чтобы облегчить процесс вёрстки писем, нужно придерживаться некоторых правил и тестировать код на ошибки в специальных сервисах — EmailOnAcid или Litmus. Внешние стили некоторые почтовики обрезают.

С помощью медиазапросов

Крайне важно, чтобы вы не просто прослушали видеоматериал, но и закрепили услышанное на практике. Чем больше вы практикуетесь, тем больше запоминаете. Домашние задания — это практика, это разбор тех ситуаций, с которыми вы 100% столкнетесь при верстке современных сайтов. Однажды клиент скинул часовое видео и попросил вырезать некоторые моменты гифками.

Как контент влияет на попадание в спам

Основные требования к дизайну и вёрстке email, чтобы письмо корректно отображалось в почтовых клиентах. Также замечу, что некоторые клиенты отображают простой текст как HTML; например, Gmail добавляет некоторые стили по умолчанию и превращает URL в гиперссылки. Большинство сервисов рассылок конструируют MIME самостоятельно, поэтому об этом не приходится думать. Некоторые из них также создают простую текстовую версию из вашего HTML.

Поэтому лучше держитесь от них подальше и при необходимости подключайте внешние формы. Безопаснее не пользоваться формами, но, к примеру Rebelmail и Mixmax делали классные штуки для опросов и e-commerce. Outlook по умолчанию блокирует обработку изображений. Если вы хоть раз занимались разработкой писем, то, вероятно, сталкивались с этим понятием. Язык векторной разметки поддерживается старыми версиями Outlook.

В ней доступно рассказывают о проектировании сайтов с учётом отображения на мобильных и планшетах, приводятся примеры и рекомендации по вёрстке. Этот подход можно внедрить и в дизайн email-рассылок. Этот метод позволяет менять расположение объектов при помощи медиазапросов. Не самый лучший способ адаптации для писем, так как далеко не все почтовые клиенты с ними работают. Email-дизайн и разработка — это та еще штука. Очень похоже на веб-разработку, только 10-летней давности.

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

Можно загружать свои HTML-шаблоны, но их не отредактируешь без знания кода — в визуальном режиме нельзя удалять и переставлять местами блоки. Кроме того, шаблон может показываться не полностью и будет видно лишь первый экран. Письма из Stripo Email экспортируются вёрстка писем в Мейлчимп или HTML. После составления письма проверьте его отображение в основных браузерах и в наиболее часто используемых почтовых клиентах, прежде чем отправить адресатам. Для этого используйте функцию тестовой отправки в приложении «Рассылки».

Если вы используете сервис рассылки впервые, для отправки писем нужно создать список для рассылки (List в англоязычных сервисах) и настроить его. Готовое письмо из Тильды можно выгрузить в формате html и загрузить в любой сервис почтовых рассылок, которым вы пользуетесь. Отправляйте рассылку с почты на вашем домене (обычно это требование почтового сервиса и повышает доверие к письмам) от имени компании или отдельного сотрудника.

Сегодня наиболее популярными при верстке писем являются форматы картинок JPEG, GIF, PNG и SVG. Однозначных преимуществ не имеет ни один, и при выборе стоит ориентироваться на выполняемые задачи. Анализ кода и предложения по его улучшению.

Верстка должна быть адаптивная, без медиа-запросов. Баннеры с картинкой, текстом и кнопкой верстать не нужно, они просто вырезаются в виде картинок, красные кнопки верстаются в виде кнопок. Исполнитель доложен чётко понимать, как верстаются рассылки и как верстать адаптивно без медиа-запросов. Верстка с помощью фреймворков для email не подходит. Фоновые изображения, атрибуты alt и изображения в Gmail и в Hotmail – аспекты, которым следует уделить особое внимание при верстке электронных писем. В этих популярных почтовых клиентах часто проявляются различные эффекты при отображении рассылок.