Этот элемент используют, чтобы детализировать тему письма и стимулировать подписчика к открытию. Текст превью вытягивается из первых нескольких строк текста письма. При этом в теле сообщения его можно верстка писем отображать или скрывать с помощью несложного кода. Для кодирования HTML-версий писем можно использовать любые редакторы кода, например, Atom или Sublime Text. Также нужно будет адаптировать размеры изображений и размер шрифта font-size — и все.
Какие инструменты для вёрстки используем
Это поможет уменьшить размер HTML файла и ускорить его загрузку. Используйте инструменты для минификации HTML, CSS и JavaScript кода. Используйте форматы JPEG или PNG и старайтесь уменьшить размер файла без потери качества.
Графические движки на клиентской стороне
Если вы не планируете вникать во все тонкости ручной верстки, воспользуйтесь бесплатными сервисами для запуска email-рассылки. Если хочется попробовать свои силы, двигаемся дальше. Email Builder позволяет осуществлять инлайнинг или встраивание CSS-файлов для осуществления тестов через специальные платформы, или отправки тестовых email-писем. Существуют различные скрипты, позволяющие автоматизировать тестирование.
Основные правила вёрстки рассылок
Некоторые почтовые клиенты не поддерживают сложные CSS свойства, такие как анимации, градиенты и т.д. Старайтесь использовать простые и проверенные свойства. Например, вместо использования градиентов можно использовать однотонные цвета, а вместо анимаций — статичные изображения. Хотя блочные конструкторы могут быть удобным решением для простых задач, глубокое понимание HTML и CSS остается ключевым для создания более сложных и уникальных дизайнов.
Отправляйте цепочки триггерных сообщений приветствия, брошенной корзины, реактивации, совмещая внутри одной цепочки email, SMS и web push. Размещайте изображения и другие ресурсы на CDN (Content Delivery Network) для ускорения загрузки. CDN распределяет контент по серверам по всему миру, что позволяет пользователям загружать ресурсы с ближайшего сервера. Верстка HTML-писем может вызывать различные проблемы в зависимости от почтового клиента или браузера. У них могут быть различные причины и соответствующие методы решения. Здесь также есть некоторые ограничения по сравнению с веб-версткой.
Если изображение при адаптации нужно уменьшить, указываем максимальную ширину 100%. Так изображение будет подстраиваться под ширину блока-родителя. Для вёрстки писем подходит доктайп 4.01 и кодировка utf-8. Можно воспользоваться PutsMail или использовать HTML-редактор в Thunderbird. Если пользуетесь Premailer, у него есть список с описанием CSS-атрибутов, применяемых в таких случаях. Просмотрите статистику своих рассылок, чтобы знать, для какого движка придется чаще всего верстать шаблоны.
Отзывчивый дизайн в email-верстке необходим для обеспечения корректного отображения письма на различных устройствах. Адаптивная верстка необходима для корректного отображения письма на различных устройствах, включая мобильные. Она позволяет содержимому письма адекватно отображаться как в вертикальном, так и в горизонтальном режимах. При верстке электронных писем часто рекомендуется встраивать стили CSS непосредственно в HTML-документ, чтобы гарантировать их совместимость с разными почтовыми клиентами. Однако важно помнить, что не все стили CSS будут поддерживаться всеми клиентами одинаково.
Поэтому свойство background и его производные (background-image, background-visibility, background-size) лучше не применять. Поэтому пробуем открыть письмо через почтовые клиенты. Письмо может отлично выглядеть в браузере, но некрасиво разъехаться в мобильном приложении Gmail или старенькой версии Outlook. Как видим, в этом случае адаптация происходит за счёт уменьшения картинки и кнопки.
В описанных выше способах мы для мобильных разрешений меняем изначально заданную ширину таблиц и ячеек, превращая их в блочные элементы. В таком случае верстка не является по-настоящему резиновой — мы просто прописываем нужные стилевые правила под определенные разрешения экрана. Плюс этот способ не сработает в мобильных почтовых клиентах, таких как Яндекс.Почта и Mail.ru под iOS и Android, которые не поддерживают медиазапросы. Помимо использования инструментов, важно тестировать письма на реальных устройствах и в различных почтовых клиентах, таких как Gmail, Outlook, Apple Mail и т.д.
Первый — обычный, второй используют для анимации, а третий — если нужен элемент с прозрачным фоном. По классике почтовые рассылки и шаблоны верстаются в HTML. Согласно исследованию Litmus, 43% пользователей читают сообщения с мобильных телефонов. Декоративные шрифты лучше не использовать или вставлять в виде изображений. В погоне за креативностью и уникальным дизайном не стоит забывать о главной задаче рассылок — достижении целей конверсий. Верстка электронного письма связана с определенными правилами и постоянным тестированием.
Как правило, для этого используются специальные картинки малого размера — пиксели отслеживания. Это значит, что если почтовая программа блокирует изображения, то понять, открыл ли пользователь письмо, просто не удастся. Используйте встроенные стили (inline styles) для обеспечения совместимости с различными почтовыми клиентами. Встроенные стили применяются непосредственно к HTML элементам и гарантируют, что стили будут применены корректно. Автоматизация процесса верстки может значительно упростить создание регулярных email-рассылок.
Следуйте описанным выше советам и вы сможете создать качественный шаблон письма, не совершая распространенных ошибок, даже если это ваша первая рассылка. Иногда в прехедер может попадать служебная информация, вроде иконок соцсетей, призывов к действию или фразы «Открыть в браузере». Не допускайте таких ошибок, а используйте прехедер по максимуму. Мы в SendPulse предоставляем услугу дизайна шаблонов, но но есть и специализированные агентства, как Site Elite Studio. Массимо Кассандро залил этот код на Codepen — это специальная песочница, в которой можно протестировать пример, подставляя собственные данные.
Использованный в этом коде атрибут lang входит в число немногих атрибутов, которые Gmail не вырезает (в этом списке title, lang, width, alt, href). Здесь можно было бы использовать title, но у него есть один «побочный эффект» — при наведении курсора, этот заголовок был бы видим. Lang же, в свою очередь, универсален (подходит для всех элементов) и не появляется при наведении. При создании рассылок часто забывают о так называемом тексте превью или прехедере. Прехедер — это небольшой кусочек текста, который подтягивается из тела сообщения, и обычно он отображается под полями с именем отправителя и темой сообщения.
- Эта статья для вас, если вы уже что-то слышали про теги и CSS, но сами не сверстали ни одного HTML-шаблона.
- Как мы уже говорили, заниматься вёрсткой писем для email рассылки проще всего в блочном редакторе.
- Исследуя этот вопрос, мы сможем предотвратить многие распространенные проблемы.
- Размещайте изображения и другие ресурсы на CDN (Content Delivery Network) для ускорения загрузки.
Но если вам без подготовки нужно собрать простое письмо, то вполне можно воспользоваться и конструктором. Первая таблица по ширине 100% экрана задаёт фон, минимальную ширину, размер шрифта в 1 px, чтобы не вылезло ненужных отступов. Как мы уже говорили, заниматься вёрсткой писем для email рассылки проще всего в блочном редакторе. Он позволяет добавить почти все необходимые элементы, не углубляясь в сложные процессы. По данным исследования компании AdIndex, email-маркетинг признан самым эффективным каналом продвижения. С популярностью мобильных устройств многие дизайнеры и разработчики начали делать письма и для мобильных дисплеев.
IT курсы онлайн от лучших специалистов в своей отросли https://deveducation.com/ .
