Основы верстки HTML-писем для веб-разработчиков Медиа Нетологии

Минимальная подписка обойдётся 80 долларов в месяц. Представьте, что вы сверстали письмо, используя медиа-запросы. Показываете заказчику на Айфоне, открываете через iOS Mail — все работает. Заказчик открывает то же письмо на том же Айфоне, но смотрит его через Gmail app.

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

Страницы должны быть не только красивыми для пользователя, но и быстро загружаться, быть структурированными и, конечно, удобными для работы в команде. При нашем объёме проектов уделять этому внимание очень важно. На примере учебного проекта мы расскажем и покажем, как правильно верстать красивые e-mail рассылки. После этого вы сможете попрактиковаться, выполняя задания по личному проекту — над ним вы будете работать и самостоятельно, и в паре с наставником.

Крутые письма

Соблюдайте баланс «текст-изображение», чтобы в любом случае донести информацию до человека. И не забывайте про атрибут «alt» для тега «img». — Указывайте как можно больше стилей для элементов. Если стилей нет, их «навяжет» почтовый клиент и контент отобразится не так, как хотелось.

Некоторые клиенты, например, Outlook не распознают внутренние отступы в теге , поэтому необходимо закрасить всю ячейку. В таком случае тег займет все вёрстка писем место во втором , и вся область станет кликабельной. Распространённый вариант — одноколоночный макет, в котором ячейки находятся друг над другом.

Бывает также, что при отправке письмо конвертится в plain text. Используется порт 587 (или 25, если сервер не локальный), протокол SMTP. Сервер, получив письмо, ищет того, кто отвечает за получение писем для данного адреса (через DNS) и отправляет письмо ему – по SMTP же.

Оттенки в письме перекликаются с цветовой гаммой жилых комплексов, о которых мы говорим в рассылке. В разделе «Превью» доступна проверка шаблона в формате мобильного устройства и компьютера. Предусмотрен доступ к совместной работе над шаблоном (до 10 человек).

Чтобы скачать — активируйте бесплатный аккаунт. В конце концов, вы можете установить фон, который будет работать даже в Outlook. Найдите в каталоге картинки-фон для объявления, которые будут лучше всего сочетаться с общей композицией.

Особенно страшно то, что логотипа компании не было видно из-за того, что картинка черная. Background-image так же плохо поддерживается в outlook, поэтому лучше использовать полноценную картинку для таких случаев. В действительности ROPEMAKER — это тип хакерской атаки через электронную почту, обнаруженный Франциско Рибейро (@blackthorne) из Mimecast. Этот эксплойт может дать злоумышленнику возможность удаленно изменять контент письма электронной почты в любое время после доставки.

Часть писем для своих клиентов команда Mailigen собирает в Stripo. С помощью этого сервиса мы сделали письма застройщику LEGENDA. https://deveducation.com/ Пожалуй, это самый богатый сервис на готовые макеты. Адаптивность – письмо не «съезжает» при просмотре со смартфона.

Вёрстка писем: подведём итог

А так же рассказать про нюансы, проблемы и тонкости, с которыми мы столкнулись в процессе его создания. Получив письмо от одного из крупных ритейлеров, наш руководитель отдела верстки заметил, что некоторые элементы располагаются неровно. Профессиональное чутье не позволило просто пойти мимо, и, поскольку магазин не входит в число наших клиентов, он решил проверить его по нашему процессу контроля качества верстки. О результатах и о том, как увидеть проблемы в отображении на стадии разработки рассылки, рассказывает руководитель отдела верстки Retail Rocket Илья Кастерин ikasterin. Блокировка изображений – одна из самых серьезных проблем, с которой сталкиваются маркетологи, когда проводят email-кампании.

• Полную запись вебинара с тремя спикерами можно получить по ссылке.
• Если нужно, можно указать и минимальную ширину.
• Можно отказаться от медиа-запросов и использовать резиновую верстку.
• С помощью плагинов можно реализовать nocode-подход к разработке писем.
• На сегодня все, в следующем материале речь пойдет об использовании media query для таргетинга мобильных устройств и оптимизации изображений для отображения на смартфонах и планшетах.
• При нашем объёме проектов уделять этому внимание очень важно.

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

Именно в таком стиле построены дома LEGENDA – и дизайн письма этому соответствует. Письма с таким дизайном уходят покупателям Premium-квартир. Черный фон, золотой шрифт в заголовках – это не просто прихоть нашего дизайнера.

Вставка текста в html-шаблон письма

Верcтка писем к стандартам электронной почты не имеет никакого отношения. Это обычный html шаблон (плюс текст для тех кто не читает html), но почтовые клиенты о-о-о-о-чень разные, „разнее“ чем браузеры при показе html-контента. Вёрстка писем принципиально отличается от вёрстки лендингов и сайтов. Почтовые клиенты добавляют свои стили, удаляют или игнорируют ваши стили, отображают блоки некорректно или прячут фоновые изображения. Сервис позволяет проверить письмо в 90 почтовых сервисах. Из дополнительных функций — веб-ide, который позволяет редактировать код, система аналитики email-рассылки, функции тестирования производительности, проверка на «спамность».

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

Но в email-рассылках только этот способ подходит для нормального отображения письма. Сообщения могут открывать в почтовых клиентах и браузерах, которые не поддерживают новые версии HTML и CSS. Табличная вёрстка — залог того, что письмо не «разъедется» и нормально отобразится на всех платформах.

Элементы письма

TB по умолчанию блокирует все картинки в почте, Outlook не дает работать с вложениями некоторых типов. Сервис проверяет код по 1000 правил, которые нацелены улучшить его совместимость с почтовыми клиентами. Верстальщик может помещать внутрь табличных ячеек любую информацию — картинки и текст. Ячейки могут располагаться в несколько колонок или одну. Создавать простые письма, в которых будет минимум графики. Они будут нормально отображаться во всех устройствах.

Я никогда не занимался дизайном и вёрсткой. Я смогу создать письмо?

Оформите текст в одном из сотен шрифтов для русского языка. Откройте Canva и выберите тип дизайна «Заголовок электронного письма». Товарная подборка – формат письма, который можно превратить в смертную скуку, если не продумать оформление. Мы сделали рассылку в корпоративных цветах ВелоДрайв – голубом и оранжевом. Строгость, симметрия, гармония – все напоминает Ар деко в центральном парке Нью-Йорка.

Он прочитает каждую строчку, оставит комментарии и поможет сделать ваше решение правильным. Во время курса вас будет сопровождать наставник. Он будет делать ревью кода, проверять практические задания, отвечать на вопросы и делиться секретами мастерства.

Собственный дизайнер – если вы сомневаетесь в своих силах или не хотите тратить время на дизайн рассылки, закажите оформление писем в Mailigen у профессионального дизайнера. Внутренний редактор – вы сможете убрать «красные глаза», добавить яркость, сделать фото черно-белым, не выходя из платформы. Англоязычный сервис – для Figma пока нет русской версии, и, что самое ужасное, нет программ-русификаторов. Разбираться в терминах дизайна придется на английском. Популярный сервис – Stripo классный, и им пользуются многие email-маркетологи.

Отзывчивые изображения

Мы не отправляем email-рассылку по чужой / купленной базе. Для изображений обнуляем border, задаём ширину. Если изображение при адаптации нужно уменьшить, указываем максимальную ширину 100%. Так изображение будет подстраиваться под ширину блока-родителя. Если нужно, можно указать и минимальную ширину. Если думаете, как лучше отправить письмо из блочного редактора, то вот 4 простых способа это сделать.