Как правильно верстать письма: рекомендации и требования для верстальщика
В предыдущей статье я писали о визуальном стиле рассылок и давали рекомендации интересах дизайнеров. Если дизайн письма готов, то отныне. Ant. потом нужно подготовить его к верстке.
Однако верстальщик может налететь с проблемами:
- Письма плохо отображаются в разных почтовиках.
- Корреспонденция не адаптивны и плохо отображаются на мобильных устройствах.
- С письмом хоть волком вой взаимодействовать и неудобно читать.
- Письмо не увлекает, безвыгодный вовлекает.
- Некоторые блоки письма не отобразились, обломок письма исчезла.
- Письмо в почте выглядит не скажем, как было сверстано и нарисовано в макете.
- Письмо скучное, и в несходство от веба его труднее сделать динамичным, привлекательным, нужно нюхать инструменты и уметь их применять.
- Не получается сверстать так, что задумали.
- Непонятно, как сделать интерактив в письме.
- Цидулка разваливается на десктопных почтовиках типа Outlook.
- Переписка попадают в спам (такое может быть из-после верстки и ссылок).
- Письма долго грузятся.
Наш документ-лист позволит сделать читаемое, аккуратное и красивое эпистола, которое отобразится на любой платформе, в любом почтовике и устройстве си, как вы это задумали.
Структура и код
Затем чтоб ваши письма корректно отображались в большинстве почтовиков, устройств, а сервисы рассылок неважный (=маловажный) сломали их – следуйте советам по HTML и CSS стих:
Обратите внимание на DOCTYPE. Для писем самым безопасным доктайпом является:
Используйте графоаналитический подход к верстке. Иначе письма будут плестись в хвосте в плане технологии верстки.
Избегайте сокращений CSS:
- Чем сокращенного правила для стиля – несколько CSS стилей. В частности, вместо padding: 5px 5px 5px 5px, лучше написать padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px.
- Невыгодный задавайте цвет, используя краткие формулировки типа RED #FFF. Навсегда используйте полное шестнадцатеричное представление типа #bb0000.
- Не используйте сокращенные варианты склерозник шрифта, характерные для CSS (т. е. «font: 12px arial;»). Род шрифта, размер, цвет и высота строки должны распускать хвост по отдельности.
Старайтесь избегать объединения ячеек (colspan, rowspan). То ли дело использовать вложенные таблицы. И не забывайте указывать формат align и valign у ячеек.
Значение атрибутов CELLPADDING и CELLSPACING долженствует установить как «0». Не используйте никаких значений атрибута BORDER у table (к тому же «0»), так как не все почтовые клиенты корректно интерпретируют некоторые люди значения.
Не задавайте line-height в EM’ах alias процентах. Используйте только пиксели, тогда во всех почтовиках и устройствах корреспонденция будут выглядеть так, как вы задумали.
Форма текста производите сразу двумя тегами – FONT и SPAN. В целях родительской ячейки указать LINE-HEIGHT (это принципиально угоду кому) Outlook 2013 и большинства веб-интерфейсов). Стоит наметить, что Outlook.com игнорирует параметр LINE-HEIGHT, перечисленный у ячейки, поэтому следует указать его также и у SPAN.
Используйте тег BR для вставки разрывов посередь блоками текста вручную. Однако будьте предельно осторожны, часть почтовые клиенты (например, Outlook 2007 и клиент iPhone) отображают размер межстрочных промежутков и шрифтов крупнее, нежели принято – и могут перенести текст на новую строку допрежь того запланированного вами разрыва.
Будьте внимательны при использовании CSS3. После этого нет четких правил. Какие-то стили поддерживаются подчистую, какие-то частично. Все зависит от того, какими почтовиками и устройствами пользуются ваши подписчики. Даже если используете CSS3 в верстке писем – тщательно тестируйте. Поддержка тех аль иных стилей почтовиками и устройствами постоянно меняется, ориентируйтесь держи гайды в интернете.
Используйте текст предварительного заголовка. Едва (ли) не все веб-интерфейсы выводят рядом с темой корреспонденция прехедер. Примерная структура:
Прехедер показывается на многих почтовых клиентах в качестве предпросмотра переписка и важен так же, как тема сообщения. Неизменно добавляйте его, т.к. это мотивирует подписчика открыть намоленный email. Многие почтовые клиенты обрезают тему переписка, если она слишком длинная, а прехедер помогает полегче отразить суть.
Используйте кодировку UTF-8:
Проконтролируйте заголовки и структуру. Четверка, если верстальщик тоже будет проверять:
- значения служебных заголовков корреспонденция (Date, Message-ID, List-Unsubscribe, Auto-Submitted и т.п.);
- структуру переписка (Content-Type, Content-Disposition, вложенность Multipart-частей переписка, кодировки текста, строковые параметры);
- значение целевых и отображаемых заголовков (From, To, Reply-to, Subject);
- обрисовывание письма в списке писем и при чтении в различных интерфейсах;
- микроформаты ((пред)положим, что событие календаря распознается как событие календаря alias авиабилет как авиабилет).
Верстка должна корректно разрисовываться без картинок. И, главное, понятно. Вся важная текстовая данные должна быть в тексте. Поэтому прописывайте alt у изображений, оборачивая их в ссылку. В то время при отключенных картинках письмо не потеряет сути.
Многие почтовики присутствие получении первого письма от вас могут малограмотный показывать картинки, предлагая их включить подписчику. А в папке «Спам» картинки отключены по части умолчанию. Ваша рассылка может туда упасть, а 40% подписчиков неизменно проверяют папку «Спам».
Применяйте свойства background=»» bgcolor=»» просто-напросто для тега table. Указанное у body фоновое силуэт отобразится и в Outlook, но есть большая вероятность попасть в рассылка. BACKGROUND-COLOR для DIV работает не везде. И неважный (=маловажный) все почтовые клиенты поддерживают свойство background (особенно в Outlook 2007–2013). Благодаря этому будьте внимательны при использовании фоновых изображений. Укажите подходящее сила фонового цвета BGCOLOR, чтобы текст на изображении был виден во всех отношениях, в том числе пользователям, у которых фоновые изображения маловыгодный отображаются или вовсе отключены. Больше тестируйте ваши переписка.
Электронную почту и телефон оборачивайте в ссылку. Иначе по (по грибы) вас это сделает почтовик, наложив свои стили – а сие может сломать номер телефона.
Запрещены: js, flash, iframe, svg. Безграмотный используйте данные коды.
Не забывайте про «пуленепробиваемые фоны» c VML-изображениями, коль скоро это необходимо. Особенно если хотите поддерживать Outlook, The bat в полной мере.
Выполняйте верстку независимыми блоками – это паче безопасный подход. Во-первых, вы сможете изгнать или добавить новый блок в имеющееся письмо и выслать вновь. Во-вторых, если один блок отобразится несоответственно на каком-то устройстве, остальные не пострадают. В-третьих, ваша сестра можете собирать коллекцию всевозможных блоков и быстро коллекционировать письма для любых задач.
Верстка должна корректно фиксироваться в разных почтовиках (Yandex, Gmail, Mail.ru, Yahoo и т д ), а в свою очередь в их приложениях на мобильных, даже если их отворить в браузерной версии почтового сервиса. Рекомендуем применять резиновую верстку дружно с адаптивной (медиазапросы для поддерживающих устройств и приложений, а равно как «падающие» блоки с минимальной длиной).
Изучите хаки про разных почтовых приложений и ОС и библию адаптивных писем. Скажем, чтобы решить проблему с автомасштабированием писем в iOS 10 и iOS, добавьте тег:
CSS хак -webkit-text-size-adjust:none; -ms-text-size-adjust: none; далеко не дает устройствам на iOS изменять контент письма про удобства чтения. Изучите условные комментарии, это избавит через проблем с IE и Outlook. О том, как удобнее тестировать корреспонденция на разных почтовиках и устройствах, напишу ниже.
В случае если вы минимизируете код письма, следите, чтобы было безграмотный более 1000 символов в строку. Иначе могут -побывать) проблемы отображения.
Контент
При верстке писем безопаснее истощить стандартные шрифты. Например, Arial, Verdana, Tahoma, Times New Roman поддерживают любое почтовики на любых устройствах.
|
Без засечек |
С засечками |
|
Arial |
Courier |
Замените спецсимволы получай соответствующие html-сущности или картинки. Спецсимволами могут находиться (в присуствии) параграфы, сердечки, элементы псевдографики. Эмодзи в теле переписка тоже лучше заменить на картинку. Поверьте, аж условный Mailchimp может создать проблему на пустом месте. Перестрахуйтесь.
Ставьте ссылки в изображениях. В письмах подписчики чаще долее) (того кликают по изображениям.
Для поддержки ретины используйте изображения размера в неудовлетворительно раза больше. Например, для четкого изображения 150х50 возьми с оригинальным размером 300х100 и атрибутами укажите желаемый размер:
(без, вес письма и картинок вырастет. Поэтому старайтесь такое совершать лишь для малоцветных изображений – логотипов и иконок. И ясный путь оптимизируйте размер получившихся изображений, уменьшая их в сервисах, таких т. е. TinyPNG, JPEGmini, Compressor.io и др.
Любые ссылки должны насчитывать протокол и имя хоста (https://site.ru/path). Безвыгодный используйте относительные ссылки (/path) и ссылки без протокола (//site.ru/path), т.к. в них протоколом вдоль умолчанию может быть file://.
Любые служебные и невыгодный ASCII-символы в ссылках должны быть закодированы (в частности, кириллица) с через percent encoding.
Например, ссылка https://строй-(матушка-)Русь.рф/литература/ должна выглядеть так:
https://xn—-ptbbtciddgad9n.xn--p1ai/%D0%BB%D0%B8%D1%82%D0%B5%D1%80%D0%B0%D1%82%D1%83%D1%80%D0%B0/
Размечайте тегом ссылку, вставленную подобно ((тому) как) текст, иначе пользователь не сможет по ней перешагнуть. Некоторые почтовики размечают такие ссылки самостоятельно, так это не является стандартным поведением. Адрес href изнутри. Ant. снаружи A должен совпадать с текстом ссылки, иначе контент-фильтр может проявить свое отношение на такую ссылку как на попытку обмануть пользователя. А сие путь в спам.
Откажитесь от http://. При высоких требованиях к безопасности в полную силу откажитесь от использования http:// в пользу httрs://. Маловыгодный используйте нестандартные порты (например, example.com:8080/path), т.к. они могут фигурировать недоступны пользователю.
Не используйте внешние сокращатели ссылок: vk.cc, bit.ly и т.д – сие плохо влияет на доставляемость писем. Лучше, коль скоро все ссылки будут указывать на ваш землевладение, что сократит потенциальное негативное влияние чужой репутации в доставляемость писем. Сокращатели также приводят к спаму.
Сжимайте изображения. Параметры png-8 больше подходит для простой графики – графическое рисунок лучше сжимается, чем gif. Gif стоит использовать, если должно анимация. Формат jpeg идеален для сложных и фотографических элементов. Изображения, сохраняемые в этом формате, нормально оптимизируют до 60% качества. Хотя в редких случаях имеет резон повысить качество до 75%, чтобы уменьшить ступенчатое искривление изображений. Формат png-24 оптимален для изображений с прозрачностью, имеющих высокое черта или размещающихся не на белом фоне. Обаче не забывайте о том, что png – самый «тяжелый» изо всех форматов.
Не располагайте внешние картинки бери публичных сервисах или бесплатных хостингах. Чаще всего делов ими пользуются спамеры – и ваша рассылка рискует попасть в рассылка. Храните на своем хостинге или в CDN, а лучше загружайте их в галерею вашего сервиса рассылок.
Указывайте у ссылок характеристика target=”_blank”, чтобы ссылка всегда открывалась в новом окне/вкладке. Неведомо зачем как письмо может быть открыто где желательно.
Пропишите атрибут title у всех ссылок – это Вотан из факторов непопадания в спам. К тому же title помогает людям с ограниченными возможностями и тем, кто именно использует голосовое управление. А если навести на ссылку авеста из title, то так отобразится в хинте:
Проверяйте предлоги – они безвыгодный должны быть оторваны от слова. Для сего используйте символ неразрывного пробела (nbsp) или тег nobr другими словами стиль white-space:$3. А если необходимо перенести существительное, воспользуйтесь символом shy. Это полезно, например, пользу кого длинных ссылок, которые могут разрывать шаблон.
Помещайте прямую ссылку получи и распишись видео. В iOS 10 стандартный почтовый клиент Mail стал живописать html5-видео, наверное, пока единственные. Поэтому совершенство вариант вставки видео в письмо – прямая ссылка бери ролик, поставленная на изображение.
Сокращайте длину заключение. Веб-интерфейсы Gmail и Yahoo обрезают письмо, размер которого превышает 102 Кб и 100 Кб, потому-то старайтесь максимально сократить длину кода. В противном случае ваша милость получите вот такую картину:
Конечно, можно бросить взгляд письмо полностью. Но, как правило, подписчики уникально жмут по этой ссылке, даже если заинтересовались контентом.
Будьте аккуратны с формами (во)внутрь писем. Мы не рекомендуем их использовать, таким (образом как не у всех они будут отображаться. (бог) велел добавить ссылку, если очень хочется, – какой-так фидбек вы точно соберете. Если форма безвыгодный отображается, перейдите для опроса на сайт. Можете сегментировать рассылку совсем на тех, кто открывает письма в почтовиках, поддерживающих стать (Gmail, Yandex), чтобы, например, сделать опрос подписчиков в самом письме.
Внедряйте интерактивные азы. В 2019 большинство поддерживаются почтовыми сервисами – больше 50% увидят интерактив, накипь увидят статику (от вас зависит, будет ли сие красивая статика).
ТОП самых используемых и популярных интерактивных компонентов:
- Канитель, галерея картинок – 67,2%;
- Гамбургер меню – 52,6%;
- Хот спот (загляденье, меняющаяся при наведении) – 40%;
- Опросы и голосования – 35,6%;
- Якорные ссылки ради навигации по письму – 32,1%;
- Формы и радиокнопки – 25,1%.
Затем идут:
- Гармоника;
- Оставить отзыв и рейтинг.
Многие сервисы и инструменты позволят (с)варганить интерактивные элементы с минимумом заморочек (например, stripo, бесцельно как содержат готовые блоки для интерактивов), а да необычные и ультрафункциональные вещи (например, AMP, о нем подробнее вверх). И следите за трендами интерактивных писем.
Используйте кнопки быстрого поступки в Gmail. Ими можно совершать полезное действие, безграмотный открывая письмо. Два варианта, как этого сорвать:
- JSON-LD
- microdata.
AMP-рассылки. Google давно занимается развитием технологии AMP, и пару месяцев обратно зарелизил AMP-рассылки. Такие письма будут выглядеть т. е. автономные веб-страницы. Не открывая отдельную вкладку то есть (т. е.) окно, прямо в письме пользователь сможет купить предмет торговли в онлайн-магазине, просматривать каталоги, оставить отзыв о товаре, закрепить отель, пройти опрос.
Помните, что AMP-письма не мешает настраивать и в почтовиках, и в сервисе рассылок. К тому же они обещают покровительствовать и другие крупные почтовые провайдеры, кроме Gmail: Yahoo Mail, Outlook и Mail.ru. Технологией еще пользуются Booking.com, Pinterest и сам Google, отправляя своим пользователям динамические корреспонденция.
Протестировать AMP-письма сегодня уже можно в Gmail и Mail.ru. Полезные ссылки:
- Данные.
- Sendsay одни из первых внедрили поддержку AMP-рассылок, впоследствии времени многие другие сервисы, такие как Sendpulse и Stripo.
- Проектировщик превью для gmail в промоакциях.
- Шаблоны AMP-писем.
Инструменты и сервисы
Так чтоб упростить верстку письма, облегчить тестирование и написание заключение, воспользуйтесь следующими инструментами и сервисами:
- Пишите стили в блоке style изумительный время верстки для вашего удобства. А перед использованием верстки в рассылках используйте css-inliner tool, скажем, сервис от Mailchimp или CSS inliner, чтобы спуртовать процесс верстки и тестирования. Некоторые сервисы рассылки, к примеру (сказать), Mandrill, предпочитают инлайн-стили. Есть сервисы, которые весь удаляют блок style.
- CSS
— совместимость с устройствами и почтовиками: 1) Can I Use in HTML Emails; 2) Email Client CSS Support; 3) The Ultimate Guide to CSS.
— семейство обязательных костылей для любого письма – Client-specific CSS Styles.
- Онлайн-редакторы позволяют зажигать письма с минимальным знанием верстки:
— Mosaico;
— Stripo;
— Tilda;
— встроенные редакторы вашего почтового сервиса, позволяющие быть у дел с адаптивными блоками: Mailchimp, Unisender, Sendpulse и другие;
— VML-изображения чтобы E-mail.
- Email-фреймворки позволяют быстро разрабатывать адаптивные кроссплатформенные переписка:
— MJML;
— Foundation for Emails;
— kilogram (текущая версия брошена Артуром Кохом, торопливо будет новый релиз с документацией).
- Для тестирования заведите ящики вот всех перечисленных почтовиках: Mail, Yandex, Gmail и др. Добро бы иметь в своем распоряжении пару смартфонов с iOS и Android, а да привлечь к тесту коллег и друзей.
- Сервисы для проверки писем сверху спам перед отправкой:
— https://www.mail-tester.com;
— https://litmus.com/;
— https://www.emailonacid.com/;
— https://emailpreviewservices.com/.
- Проверяйте достоверность кода – Markup Validation Service.
- Тестируйте верстку:
— http://previewmyemail.com/;
— https://litmus.com/;
— https://www.mail-tester.com/;
— https://www.emailonacid.com/;
— https://emailpreviewservices.com/;
— http://www.inboxinspector.com/;
— https://testi.at/;
— https://www.htmlemailcheck.com/.
- В (видах ручного тестирования верстки:
— Mailchimp Tester;
— Putsmail + PilotMailer.
- Священное писание адаптивных писем.
- Коллекция рассылок Email-Competitors – набор более чем 1 500 000 писем от 8000 российских и мировых брендов по мнению 28 отраслям.
- Бесплатные шаблоны писем для вдохновения:
— Stripo;
— Beefree;
— Templatemonster;
— Envato;
— Chamaileon.
Автор дали рекомендации по созданию рабочей рассылки и рассказали о правилах, которых придерживаемся самочки. Некоторые из них можно нарушать и иногда даже если нужно, в зависимости от задач рассылки. К тому но почтовые сервисы и приложения не стоят на месте и поддерживают повально больше фич. Поэтому не забывайте экспериментировать и то и дело тестировать.
Реализуя email-маркетинговую стратегию, мы в агентстве стараемся максимально мотать себе на ус все нюансы при создании рассылок. Проводим аудиты рассылок сообразно всем ключевым параметрам, включая верстку, а также сервиса рассылок, базы подписчиков, дизайна и контента, писем сайта и CRM.
P.S. Иначе) будет то я что-то важное упустил, напишите мне для eremeev@kinetica.su. Хочу дополнять и обновлять эту статью со временем и буду крайне благодарен за обратную связь.
Источник:
нет комментариев