admin / 07.10.2018
Делимся советами по созданию идеального адаптивного письма.
Недавно компания «Нетология» опубликовала материал о том, в какой ситуации стоит отдать верстку писем на аутсорс, а когда можно собрать адаптивное письмо самому в блочном редакторе. Делимся статьей.
Содержание
У крупных сервисов рассылки есть встроенный блочный редактор. В нем собирают простые адаптивные письма и это входит в стоимость подписки. Оформить сложное креативное письмо в редакторе не получится — это работа дизайнера и верстальщика. Для начала разберемся, какое письмо отнести к категории сложных, а какое — к простым.
Возможности встроенных редакторов отличаются от сервиса к сервису. В любом из популярных редакторов вы можете добавить блоки с текстом, картинки, кнопки, иконки социальных сетей и кнопки «Поделиться». Это стандартный набор стандартного редактора.
Дальше идут «фишки». Где-то можно задать точный размер для отдельных блоков, а где-то — нельзя. В одном редакторе можно собирать только одноколоночные письма, в другом ограничений по количеству колонок нет. В некоторых редакторах вы даже можете настроить, какие блоки показывать на десктопной версии, а какие — только на мобильных устройствах.
Дизайнер и верстальщик предлагают индивидуальные решения, редактор — типовые. Учитывайте, что, собирая письмо в редакторе, вы в любом случае ограничены, например, набором шрифтов и их размерами.
Дизайнер сделает так, как вы хотели. Верстальщик продумает, как переставить блоки на мобильных устройствах — так, как вы и планировали. Работая в блочном редакторе, вы полагаетесь на решения, предложенные разработчиками.
Редактор адаптирует письмо по своему алгоритму, переделать алгоритм нельзя.
Если вы проработали структуру, написали текст и подобрали картинки, то на создание письма уйдет от тридцати минут до двух часов. Напомним, что вы не платите за верстку, работа с редактором включена в стоимость аккаунта.
Команда из дизайнера и верстальщика на фрилансе сделают письмо за два-три дня, стоить это будет от 5 000 до 15 000 рублей. Если заказываете в агентстве — в разы дороже. Помните историю из вступления? Для Сергея выбор очевиден: он будет собирать письмо сам, в его ситуации это дешевле и быстрее.
Простое адаптивное письмо лучше собрать во встроенном редакторе. Если хотите нестандартных решений — отдавайте на аутсорс.
Тем, кто собирает письмо в редакторе, знать код не обязательно. Единственное, что нужно — продумать структуру письма, подобрать картинки и написать текст. Никакой «ручной» верстки — вы соберете письмо из блоков, как в конструкторе посадочных страниц.
Начните с черновика, начертите на бумаге схему будущего письма: где будет заголовок, где картинка, где кнопка и т. д. Если есть время, соберите полноценный прототип в Balsamiq или NinjaMock. Такой прототип не стыдно показать директору и передать в работу дизайнеру.
Для начала протестируйте рассылку с одноколоночным письмом. Если все в порядке, пробуйте структуры посложнее. Ни один сервис не гарантирует 100% адаптивности во всех браузерах и на всех устройствах.
Обычно во встроенных редакторах действует принцип Drag-and-drop. Если в вашем не так, посмотрите статьи из Базы знаний — принципы работы в редакторе описаны там.
Здесь же вписываете нужный текст, добавляете фотографию или иллюстрацию, с ссылками или без. Не забывайте, что вы можете добавить анимированную картинку, большинство редакторов поддерживает формат GIF.
Только не переборщите с размером файла. Почтовые клиенты не любят «тяжелые» письма и могут скрыть их содержимое под кнопку «Показать полностью» — так, например, делает Gmail. Подбирайте файлы так, чтобы готовое письмо весило не более 600 Кб, это оптимальный размер.
Не забудьте настроить кнопки и добавить к ним ссылки для перехода.
Когда письмо готово, проверьте, как оно отображается на разных устройствах.
В 90% случаев все будет в порядке, блоки «перестроятся» автоматически. Если верстка все-таки «слетает» или результат вас не устраивает — проверьте значения отступов в блоках, они должны быть одинаковыми. Если один один блок отступает на 10 пунктов, а другой на 30, в мобильной версии они могут перестроиться некорректно. Если оба блока отступают на 10 пунктов, скорее всего, все будет в порядке.
Проверьте результат через Litmus или Email on Acid. Эти сервисы покажут, как письмо отобразится на разных устройствах, в разных браузерах и разных почтовых клиентах.
В некоторых редакторах проверка через Litmus интегрирована по умолчанию. Если в вашем редакторе такой возможности нет, отправляйте тестовую копию письма на специальный e-mail, который дадут после регистрации в Litmus.
Услуга платная, месячная подписка в Litmus начинается от 79 $, в Email on Acid — от 45 $. Если вы отправляете по одному письму раз в месяц, выходит дороговато. В крайней случае, попробуйте Browser Shots, он старый и неудобный, зато бесплатный. Помните, что подобные сервисы не дают 100% гарантии. Даже если в Литмусе все хорошо, это не повод сразу же запускать рассылку. Отправьте письмо на личную почту и откройте его там.
Выбирайте редактор, в котором показано, как выглядит письмо на разных устройствах. Идеально, если редактор интегрирован с сервисом Litmus. Если интеграции нет, проверяйте адаптивность вручную через личную почту.
Если собираете письмо сами, проверьте адаптивность внутри редактора и посмотрите письмо с личной почты — этого достаточно. Хотите проверить адаптивность на многих устройствах, браузерах и почтовых клиентах сразу — тогда покупайте аккаунт в Litmus или Email on Acid, смотрите результат там.
Тем, кто отдавал верстку на аутсорс, покупать аккаунт не обязательно, попросите скриншоты из Litmus у верстальщика. Если он профессионал, то проверяет письма на подобных сервисах, отправить скриншот для него не проблема.При проверке присмотритесь к почтовым клиентам, в основном, косяки всплывают здесь. Обязательно проверьте, как открывается письмо в Outlook, Gmail, Yandex и Mail.ru — это самые популярные почтовые клиенты в России.
Не стоит тратить время на исправление макета, если он некорректно отображается на третьем айфоне, в седьмой версии Internet Explorer или в почтовом клиенте The Bat. Да, всегда найдутся те, кто пользуется третьим айфоном, но их меньшинство. Стоит ли переделывать макет ради 1-2% от общей базы? Зависит от количества и «качества» базы.
Надеемся, вы ее сегментировали и про своих подписчиков знаете все. Если 1-2% — это 10 000 человек, то заморочиться стоит. Если вы работаете в b2b и эти 1-2% — управляющие компаний, собственники бизнеса и другие вип-клиенты, придется адаптировать письма под них.
Проследите за тем, чтобы письмо адекватно отображалось в Outlook, Gmail, Yandex и Mail.ru — этого достаточно.
Автор: Константин Шумилов. Команда Sendsay. Источник: блог компании «Нетология».
Поделиться
Поделиться
ОК
Плюсануть
Один из читателей блога Вебсовет попросил рассказать о верстке писем для рассылки. Сам я этим практически не занимаюсь. Помнится, в свое время я много возился с шаблонами для Subscribe.ru, и помню, что дело это было муторное. Проблема в том, что почтовые сервисы плохо работают с блочной версткой. А еще хуже со стилями css. Столько лет прошло, а воз и ныне там. Сейчас подавляющее большинство писем для рассылок верстаются все так же по старинке — при помощи таблиц. И это в 2016 году, когда на сайтах уже давно рулит html5, css3 и прочие современные вкусняшки.
В принципе, исчерпывающие статьи по верстке писем уже есть на Хабре, здесь и здесь. Также рекомендую почитать тамошнего обитателя по имени Артур Кох, у которого по верстке писем написана масса полезных статей. Примеры: ссылка 1, ссылка2.
Но чтобы пост не получился пустым, я все-таки кратко озвучу основные моменты верстки писем для e-mail рассылок.
Во-первых, вам придется забыть о блочной верстке и отдельном файле стилей. Все верстается таблицами, а стили прописываются непосредственно по месту, или иначе — Inline. Выглядит это примерно так:
Во-вторых, следует всегда принудительно обнулять значения отступов, полей и бордеров, ибо каждый почтовый клиент норовит отобразить их по-своему:
В-третьих, можете не заморачиваться с тегами doctype, head и body. Без doctype ваши письма будут одинаковыми везде, head и body практически бесполезны, т.к. все равно будут вырезаны большинством почтовых сервисов (пруф).
В-четвертых, если используете в письмах картинки, то обязательно прописывайте их размеры.
Очень часто почтовики блокируют изображения в письмах, и если не задать их размеры, то письмо будет выглядеть коряво. Кроме того, обязательно добавляйте style=»display:block;. Это избавит от проблем с непонятными отступами (например, в gmail):
И ни в коем случае не используйте однопиксельные картинки в качестве распорок для ячеек таблицы! Ваше письмо гарантированно попадет в спам. Если нужна распорка, то следует применять картинку с размерами, как минимум, 20х20 пикселей, которой в стилях принудительно задать размер 1х1 пиксель.
В-пятых, есть возможность таки сделать адаптивную верстку для писем. Выглядит это так же коряво, как и вообще вся работа с таблицами, но на безрыбье… Сами понимаете. Короче, чтобы ваше письмо имело какое-то подобие адаптивности, его контентную часть следует обрамлять тегом center с соответствующими стилями:
И напоследок пара полезных ссылок. Здесь вы можете посмотреть, какие теги поддерживаются различными почтовыми сервисами. А здесь найдете еще несколько полезняшек — «Особенности верстки HTML-писем».
10.05.2016
Автор: Игорь Квентор
www.websovet.com
Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:
Похожие записи:
Большинство электронных писем на мобильных устройствах отображаются некорректно. Рисунки расходятся, а текст приходится скроллить и масштабировать.Чтобы письма хорошо выглядели на разных платформах, необходимо использовать адаптивную верстку.
Этот курс адресован HTML-верстальщикам, разработчикам и email-маркетологам с базовыми знаниями HTML и CSS. Вы узнаете, что такое мобильная и резиновая верстка, блочная и фланговая адаптация. Научитесь подготавливать изображения для писем и рассмотрите основные инструменты верстальщика.
После курса вы сможете создавать письма, которые одинаково хорошо отображаются на компьютере и мобильных устройствах.
1. Вступление и знакомство с автором курса
2. Особенности адаптивной верстки
3. Подходы к адаптации email
4. Базовый шаблон адаптивного письма
5. Приемы мобильной адаптации
6. Инструменты HTML-верстальщика
7. Подведение итогов курса
8. Адаптивная верстка писем в email-маркетинге: итоговый тест
Безграничные возможности креативной верстки email рассылки, применение графических элементов и интересного наполнения — привлекают внимание клиента. Подобные письма не отправляют в спам.
Для успешного применения системы Email-маркетинга недостаточно простой логики рассылки и письма с предложением.
Для привлечения внимания информация должна подаваться в красивой «обертке», с нужными ссылками и привлекательными изображениями. Первое впечатление от письма — это внешняя оболочка, наполнение вторично.
Продающие письма для рассылки это дополнительный канал коммуникации и продаж для клиентов.
Пользователям ежедневно приходит около сотни писем, вы должны привлечь внимание аудитории «ярким» и захватывающим заголовком и предложением внутри. Для успешной реализации дизайна и верстки писем для рассылки вы должны продумать стратегию реализации проекта:
Специалисты позаботятся об адаптивной верстке email писем, чтоб дизайн великолепно смотрелся на любом девайсе. Если у вашего интернет-магазина нет фирменного стиля, то мы сделаем общий брендированный макет письма, который будет основой для рассылки. Маркетинг — это умение вызывать эмоции у человека, формировать желание что-либо купить. Мы профессионалы в данном направлении, поэтому результат работы всегда превосходный.
Работа по созданию email рассылки делится на 4 этапа:
Максимального эффекта писем можно достичь, если каждое звено процесса будет четко и качественно выполнять поставленную задачу. Профессиональные верстальщик и дизайнеры возьмут на себя настройку функционала и техническую основу письма с учетом верстки для конкретных почтовых клиентов. Письмо будет корректно отображаться на всех платформах — это называется кроссмейлерной версткой.
Простые узнаваемые шаблоны, правильная ширина, информация о компании и форма отписки — если все это учесть, ваша рассылка будет вызывать доверие, и у клиента не возникнет и мысли нажать кнопку “спам”.
Важна не просто эстетика — важна функциональность. Если вы готовы начать делать письма правильно — приглашаем на бесплатную консультацию.
FILED UNDER : IT