Как исправить верстку в письме

Как правильно верстать письма: рекомендации и требования для верстальщика

В предыдущей статье мы писали о визуальном стиле рассылок и давали рекомендации для дизайнеров. Если дизайн письма готов, то теперь нужно подготовить его к вёрстке.

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

Письма плохо отображаются в разных почтовиках.

Письма неадаптивны и плохо отображаются на мобильных устройствах.

С письмом трудно взаимодействовать и неудобно читать.

Письмо не увлекает, не вовлекает.

Некоторые блоки письма не отобразились, часть письма исчезла.

Письмо в почте выглядит не так, как было свёрстано и нарисовано в макете.

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

Не получается сверстать то, что задумали.

Непонятно, как сделать интерактив в письме.

Письмо разваливается на десктопных почтовиках вроде Outlook.

Письма попадают в спам (такое может быть из-за вёрстки и ссылок).

Письма долго грузятся.

Чтобы ваши письма корректно отображались в большинстве почтовиков, устройств, а сервисы рассылок не сломали их — следуйте советам по HTML и CSS кода.

Обратите внимание на DOCTYPE. Для писем самым безопасным доктайпом является:

Используйте табличный подход к вёрстке. Иначе письма будут плестись в хвосте в плане технологии вёрстки.

Избегайте сокращений CSS.

● Вместо сокращённого правила для стиля — несколько CSS-стилей. Например, вместо

● Не задавайте цвет, используя краткие формулировки вроде RED или #FFF. Всегда используйте полное шестнадцатеричное представление, например, #bb0000.

● Не используйте сокращённые варианты записи шрифта, характерные для CSS (то есть «font: 12px arial;»). Семейство шрифта, размер, цвет и высота строки должны задаваться по отдельности.

Старайтесь избегать объединения ячеек (colspan, rowspan). Лучше использовать вложенные таблицы. И не забывайте указывать параметры align и valign у ячеек.

Значение атрибутов CELLPADDING и CELLSPACING следует установить как «0». Не используйте никаких значений атрибута BORDER у table (кроме «0»), так как не все почтовые клиенты корректно интерпретируют другие значения.

Не задавайте line-height в em или процентах. Используйте только пиксели, тогда во всех почтовиках и устройствах письма будут выглядеть так, как вы задумали.

Оформление текста производите сразу двумя тегами — FONT и SPAN. Для родительской ячейки указать LINE-HEIGHT (это принципиально для Outlook 2013 и большинства веб-интерфейсов). Стоит отметить, что Outlook игнорирует параметр LINE-HEIGHT, указанный у ячейки, поэтому следует указать его также и у SPAN.

Используйте тег
для вставки разрывов между блоками текста вручную. Однако будьте предельно осторожны, некоторые почтовые клиенты (например, Outlook 2007 и клиент iPhone) отображают размер межстрочных промежутков и шрифтов крупнее, чем принято, — и могут перенести текст на новую строку раньше запланированного вами разрыва.

Будьте внимательны при использовании CSS3. Здесь нет чётких правил. Какие-то стили поддерживаются полностью, какие-то частично. Всё зависит от того, какими почтовиками и устройствами пользуются ваши подписчики. Если используете CSS3 в вёрстке писем — тщательно тестируйте. Поддержка тех или иных стилей почтовиками и устройствами постоянно меняется, ориентируйтесь на инструкции в интернете.

Используйте текст предварительного заголовка. Почти все веб-интерфейсы выводят рядом с темой письма прехедер. Примерная структура:

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

Источник

Ключевые ошибки при вёрстке html-писем для email-рассылок — как отправлять письма, за которые не стыдно

Редактор блога Email Soldiers

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

К чему приводит неправильная вёрстка письма

Метрики email-маркетинга. Как понять, что канал работает?

На что обращать внимание при вёрстке писем, чтобы избежать проблем

Лучше не использовать

неправильно позиционируется некоторыми почтовыми клиентами, из-за чего блоки могут разъезжаться по странице. Поэтому, когда речь идёт о письмах, где важен дизайн и ровное расположение блоков, безопаснее верстать таблицами: они отображаются без искажений.

Но много колонок всё же не рекомендуется делать. Чем больше колонок, тем меньше размер текста и изображения, а значит читать и просматривать такое письмо неудобно.

Ограничить размер макета

Быть готовым, что нестандартные шрифты отобразятся не на всех устройствах

Как email-трекинг влияет на стоимость лида. Кейс digital-агентства Toogarin

Не сокращайте стили и не встраивайте их через внешние ссылки

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

Сокращайте длину кода

Если размер письма превысит 100Кб, Gmail и Yahoo обрежут письмо. Тогда у пользователя на экране появится кнопка-ссылка с предложением открыть полную версию письма. Читатель может не понять, что происходит, и закрыть письмо.

Осторожно используйте фоновые изображения

Телефоны и адрес почты прописывайте ссылкой

Если этого не сделать, то это сделают почтовые сервисы. Они применят свои стили по умолчанию, в результате чего оформление номера телефона может отличаться от задуманного.

Что можно использовать при вёрстке писем

Картинки

Как ресторану запустить email-рассылку. Примеры лучших рассылок в ресторанном бизнесе

Gif-анимация

Анимированные картинки привлекают внимание больше, чем статичные. Из минусов — не все почтовики корректно отображают gif, поэтому здесь могут потребоваться медиазапросы — специальный код, который поможет адаптировать письма к разным устройствам, браузерам и почтовым агентам.

Прехедер

Прехедер лучше прописывать самостоятельно, иначе почтовые сервисы либо подтянут на его место первые строчки письма, либо — нежелательные ссылки, например, предложение отписаться или отправить письмо в спам.

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

EmailOnAcid

Litmus

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

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

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

Источник

Гид по верстке адаптивных писем

Команда мультиканальной маркетинговой платформы Sendsay специально для Нетологии составила подробный гид по верстке адаптивных писем для начинающих верстальщиков: с пошаговой инструкцией, примерами и ссылками на фреймворки, инструменты и шаблоны.

В гиде: основные принципы адаптивной верстки, таблицы с ограничением максимальной ширины, резиновые картинки, специальные комментарии, инструменты, фреймворки, советы и подборка классных писем.

Миша — начинающий верстальщик-фрилансер. На его счету несколько посадочных страниц и простых сайтов на WordPress. Новый клиент предлагает сверстать сайт, а вместе с ним — серию адаптивных писем. Деньги неплохие, но Миша сомневается, версткой писем он еще не занимался. Ему кажется, здесь есть свои тонкости и за пару вечеров их не освоить.

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

Основные принципы адаптивной верстки

Запомните главное: при разработке сайтов мы используем современную блочную верстку, в письмах — устаревшую табличную. Прописываем стили внутри тегов. И работаем с резиновой версткой и медиа-запросами, — не по отдельности, а вместе, сочетая оба подхода.

Начинающие верстальщики забывают про таблицы и используют блочную верстку, как привыкли, — из-за этого верстка «слетает», письмо отображается некорректно. Это происходит потому, что большинство почтовых клиентов не видят внешние стили. Поэтому принцип, когда вы прописали стили отдельно и подключили их в блоках, в половине случаев не сработает. Письма, сверстанные по этому принципу, смотрятся плохо, — особенно если открывать их в Outlook и в мобильном приложении от Gmail.

Представьте, что вы сверстали письмо, используя медиа-запросы. Показываете заказчику на Айфоне, открываете через iOS Mail — все работает. Заказчик открывает то же письмо на том же Айфоне, но смотрит его через Gmail app. Будьте уверены, верстка «слетит», работу не примут. Что делать? Можно отказаться от медиа-запросов и использовать резиновую верстку. Но и это не даст 100% гарантии.

Наш совет: сочетайте резиновую верстку и медиа-запросы. Письмо, сверстанное по этому принципу, не сжимается до нечитаемого состояния и не выходит за рамки окна просмотра — даже в почтовых клиентах, не поддерживающих медиа-запросы.

Сочетайте резиновую верстку и медиа-запросы, принципиально прописывая стили внутри тегов.

Адаптивная верстка на примере конкретного письма

Мы будем использовать резиновые таблицы с заданной максимальной шириной в пикселях и специальные комментарии (conditional comments) для Outlook, так как свойство (max-width) этот почтовый клиент «не понимает».

Этап 1. Готовим основу

В качестве контейнера для письма используем таблицу шириной 100%. В ней, при необходимости, можно задать фон письма и указать положение основной таблицы:

Основная таблица с ограничением максимальной ширины:

Затем добавляем стили в инлайн. Стили для текста помещаем внутри тега td или любых блочных элементов, типа h1–h6, p, div. На примере выглядит так:

Добавляем специальные комментарии для Outlook:

Добавляем резиновую картинку, которая растягивается на всю ширину ячейки:

Делаем две колонки, которые съедут одна под другую на мобильных устройствах:

В стандартном состоянии они выглядят так:

Если хотим, меняем порядок колонок в столбце. Так, чтобы сверху оказалась правая, а ниже — левая. Параметр dir:

Смотрим на примере:

Таким способом можно добавлять сколько угодно колонок. Например, пять:

Те самые пять колонок:

Этот способ позволяет выровнять блоки-колонки относительно друг друга как по вертикали (vertical-align:top;), так и по горизонтали (text-align:center;).

Этап 2. Работаем с текстом

Отредактируйте текст в Типографе. Замените кавычки, тире и другие символы на специальные коды — иначе они могут отобразиться некорректно. С помощью типографа избавьтесь от висячих предлогов и добавьте неразрывные пробелы.

Если хотите подключить красивые веб-шрифты от Гугла, добавьте в ссылку, сгенерированную на Google Fonts:

Не забудьте прописать стиль для текста:

И добавить в него специальные комментарии для Outlook:

Если вы этого не сделаете, то Outlook заменит неизвестный ему шрифт на свой любимый Times New Roman. Учитывайте, что «красивые шрифты», как и медиа-запросы, работают не всегда. Если не хотите рисковать, — используйте «безопасные» семейства шрифтов: Arial, Verdana, Times New Roman и прочую «классику».

Этап 3. Вставляем картинки

Если используете gif-анимацию, учитывайте, что она работает не во всех почтовых клиентах. Бывают ситуации, когда отображается только первый кадр. Так что перестрахуйтесь и разместите основную информацию на первом кадре, если она появится только на 10-м, не факт, что ее вообще увидят.

Не забывайте добавлять к картинкам свойство «display:block;». Если вы этого не сделаете, то в Gmail, Mail.ru и других почтовых клиентах появятся 2–3-пиксельные вертикальные отступы, они не нужны.

Этап 4. Вставляем разделители

Присвойте td или любому блочному элементу стиль «border-top: 1px solid #eeeeee;» или «border-bottom: 1px solid #eeeeee;».

Этап 5. Добавляем кнопку

Стандартное адаптивное письмо готово:

Чтобы отшлифовать и довести верстку до совершенства — добавьте медиа-запросы. Так вы решите проблемы с отступами и размерами шрифтов на мобильных и скроете второстепенные элементы, которые в мобильной версии не нужны.

Адекватно сверстанное письмо не нужно зумить и двигать по экрану. Оно удобно отображается на любом устройстве и в любом почтовом клиенте.

Советы верстальщикам

— Указывайте как можно больше стилей для элементов. Если стилей нет, их «навяжет» почтовый клиент и контент отобразится не так, как хотелось. Хорошая практика — обнуление стилей.

— Обращайте внимание на margin. Чтобы этот стиль работал в Outlook, указывайте его с заглавной M → Margin

— Если кому-то проще или привычнее при верстке прописывать стили во внешние CSS — без проблем, можете добавить их в инлайн перед отправкой или тестированием письма, с помощью специальных инструментов, например, Инлайнера.

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

— Придерживайтесь принципов Mobile-First
Определите, какая информация ключевая, и поместите ее на первый экран. Отключайте ненужные блоки на маленьких экранах и уберите в конец письма все, что на десктопах смотрится нормально, а на мобильных мешает увидеть основной контент. Не пытайтесь показать «все и сразу»: сверните ссылки на категории товаров, вместо десяти фотографий поставьте одну-две. Упростите навигацию, все-таки подписчик просматривает письмо сверху-вниз, а не слева-направо. И не перегружайте письмо, пусть оно будет «легким» и открывается в течение 5 секунд.

Пример неудачной верстки. Когда письмо открывают с мобильных, на первом экране — не ключевая информация, а второстепенная. Так делать не стоит.

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

В конце концов, вы можете установить фон, который будет работать даже в Outlook.

— Узнайте, как создавать видимые и невидимые прехедеры — строки текста, отображающиеся после темы письма. Уберите ссылку на веб-версию и прочую служебную информацию в конец письма, в прехедере она не нужна.

Инструменты, облегчающие работу верстальщика

Верстку, как и любой процесс, можно автоматизировать и упростить. Мы подобрали ресурсы, которые помогут начинающим и опытным верстальщикам.

Фреймворки

1) Zurb Ink
Создатели обещают, что письма, сверстанные с помощью этого фреймворка, адекватно отображаются на любом устройстве и почтовом клиенте, поддерживающем медиа-запросы. Можете начать с шаблонов: простого одноколоночного, с большим баннером, макета с боковой панелью и гибридом из сайдбара и баннера.

2) Kilogram
По словам автора, «шаблон килограмма адаптивен везде». Сам автор – Артур Кох, известный в узких кругах верстальщик. Рекомендуем.

3) Email Framework
Еще один удобный фреймворк для html-писем, который упрощает установку кнопок, изображений и ссылок.

Шаблоны

1) Free Email Templates
Десятки бесплатных шаблонов html-писем.

2) GraphicMail
Сотня готовых шаблонов. Чтобы скачать — активируйте бесплатный аккаунт.

3) Antwort
Набор адаптивных макетов, поддерживающих большинство почтовых клиентов, Outlook и Gmail в их числе.

4) Шаблоны, протестированные на популярных почтовых клиентах.

Инструменты

1) Установщик кнопок для писем на VML и CSS

Позволяет протестировать письма перед отправкой. Принцип прост: загружаете письмо и смотрите, как оно отображается в разных почтовых клиентах, браузерах и мобильных устройствах.

Помогает создать веб-версию уже готового html-письма.

Посмотреть, почитать, вдохновиться

1) Подборка интересных адаптивных писем
2) Подборка интересных адаптивных писем №2
3) Подборка интересных адаптивных писем №3
3) Блог Артура Коха — о верстке писем, без воды и прописных истин
4) Инструкция по верстке писем от MailChimp (на английском)
5) Учебное пособие по дизайну и верстке писем (на английском)

Памятка верстальщика

— Всегда прописывайте стили внутри тегов;
— Используйте медиа-запросы, сочетая их с резиновой версткой;
— Редактируйте текст в Типографе;
— Ключевую информацию ставьте на первый экран, в gif-анимации — в первый кадр;
— Проверяйте письмо в Outlook и мобильном приложении Gmail — это самые «коварные» почтовые клиенты.

Автор: Константин Шумилов. Sendsay.
Чтобы быть верстальщиком, нужно изучать html и css, если вы хотите быть дизайнером — то веб-дизайн, ну, а чтобы просто писать письма и верстать их по шаблонам, достаточно начальных знаний html и профессиональных в области email-маркетинга.

Источник

15 ошибок вёрстки, из-за которых письмо может попасть в спам

Блочный редактор писем, готовые шаблоны email, формы подписки и автоматизация. Запускайте email-рассылки, чтобы быть на связи со своими клиентами.

Как развиваться в диджитал. Какие каналы сейчас в тренде. Как зарабатывать больше и поднимать чек за свои услуги.

Рассказываем про инструменты для email-рассылок. Обсуждаем лучшие примеры и механики. Говорим о деньгах. Публикуем вакансии.

Сыграем в игру. Я покажу 2 письма, а вы угадаете, какое я достал из папки «Спам».

Спам-рассылку сразу видно из-за специфического дизайна: шапка и футер отсутствуют, ссылки привязаны почти ко всему тексту, используются вырвиглазные цвета.

Почтовые клиенты анализируют тонны таких писем и вычисляют приемы, которые спамеры используют чаще всего. Эти закономерности лежат в работе спам-фильтра. Именно он решает, куда отправить письмо — в «Спам» или во «Входящие».

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

Я расскажу об ошибках в верстке письма, из-за которых рассылка может попасть в спам, и дам рекомендации, как их исправить.

Ошибка 1. Отсутствует Plain text версия письма

Plain text — письмо, которое состоит только из текста. Такой формат нужен для почтовых клиентов, которые не могут отображать HTML. Отсутствие Plain text версии письма настораживает спам-фильтры — почтовый сервис может посчитать рассылку спамом.

Источник

Верстка адаптивных электронных писем: Проблемы и их решения

Электронная почта — отличный инструмент коммуникации, который позволяет компаниям доставлять контент удобным для аудитории способом. Многие пользователи предпочитают получать HTML-письма, и это неудивительно. Однако создание таких писем оказывается не всегда простой задачей для дизайнеров, поскольку нужно добиваться адекватного представления контента в различных почтовых клиентах. Дело в том, что стандарта верстки писем, который бы поддерживался всеми почтовыми приложениями одновременно, пока не существует.

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

HTML для электронной почты

HTML-верстка зиждется на трех китах: таблицах, HTML-атрибутах и инлайн-CSS. К сожалению, из-за особенностей работы email-клиентов, по-разному «понимающих» одни и те же вещи, в нашем распоряжении остается весьма ограниченный набор HTML- и CSS-элементов.

1. Таблицы

В отличие от создания веб-страниц, при верстке email у нас нет возможности использовать семантические элементы. Поэтому, чтобы создаваемые письма рассылок правильно отображались у каждого читателя, мы вынуждены применять таблицы. Для их стилизации необходимо использовать такие атрибуты, как width, height, bgcolor, align, cellpadding, cellspacing и border. В комбинации с инлайн-стилями вроде padding, width и max-width этот набор атрибутов дает определенное место для маневра. Ниже представлен пример кода «табличного» письма:

2. Изображения

Многие почтовые клиенты по умолчанию блокируют отображение картинок, поэтому важно, чтобы смысл письма был понятен подписчику и без них. Сделать это можно с помощью alt-текста. Стилизовать его позволят инлайн-стили и img-элементы:

3. Призывы к действию

В идеале после прочтения письма пользователь должен совершить какое-то действие. Поэтому кнопки CTA (Call To Action) нужно делать крупными, заметными и по возможности располагать в верхней части письма. Вместо обычных изображений желательно использовать bulletproof-кнопки. Они будут видны даже в тех клиентах, где отображение картинок по умолчанию отключено.

Оптимизация писем для мобильных устройств

Согласно результатам исследования компании Litmus, 53% открытий писем совершается на мобильных устройствах. При этом 26% из них приходится на iPhone, и 7% — на Android-девайсы. Во многом эта разница объясняется тем фактом, что в iOS по умолчанию включен показ изображений, а во многих почтовых клиентах на Android сделано наоборот.

Компания, отправляющая письмо, может определить, было ли оно открыто, с помощью специальных «следящих пикселей» — небольших изображений, подгружающихся со стороннего сервера. Если загрузка изображения блокируется, посчитать число открытий не представляется возможным.

Работа со множеством платформ неизбежно ведет к возникновению ошибок. То, что выглядит хорошо на одной, на другой может отображаться «криво». При верстке писем для iOS и Android важно помнить, что не все мобильные почтовые клиенты обладают одинаковой поддержкой HTML и CSS. К примеру, iOS и Android по-разному «понимают» адаптивный дизайн:

1. Следите за длиной темы письма

Письма с короткими заголовками выделяются среди множества других в папке «Входящие». Как правило, почтовый клиент на компьютере отображает около 60 символов в поле темы сообщения. Мобильные устройства показывают не больше 20–30 символов. При этом в среднем компании используют для описания темы письма более 40 символов.

2. Используйте текст прехедера

Прехедер — это первая строка текста письма, которая «подтягивается» в строку под темой и позволяет подписчику понять, о чем пойдет речь в сообщении. Правильно подобранный текст прехедера повышает эффективность рассылки.

Для создания прехедера:

3. Текст должен быть кратким

На маленьких экранах гораздо важнее эффективно использовать полезное пространство. Поэтому нужно максимально четко доносить до получателей ключевые пункты сообщения и выделять призывы к действию.

4. Используйте большие кнопки CTA

Призывы к действию должны быть выделены и располагаться по центру экрана. Кроме того, стоит окружить их значительным количеством пустого пространства — так в них проще попасть пальцем. Например, даже в самых ранних версиях Apple iOS Human Interface Guidelines было прописано, что размер кнопки должен быть не меньше квадрата размером 44×44 пикселя.

5. Выбирайте правильный шрифт

Если основной текст письма состоит из длинных блоков, следует использовать шрифты с засечками. Шрифты Georgia и Verdana делают текст более удобным для чтения. Однако для кратких писем и отдельных отрывков текста больше подходят шрифты без засечек. Подробнее об этом здесь.

Размер шрифта должен быть достаточно большим. Оптимальным будет шрифт размером 14 пикселей для тела сообщения и 22 пикселя для заголовка. Выбор 14-пиксельного размера обусловлен тем, что iOS автоматически увеличивает шрифт минимум до 13 пикселей.

6. Используйте одноколоночную верстку

На мобильных устройствах лучше работают одноколоночные шаблоны не шире 500–600 пикселей. Чтобы превратить двухколоночную вёрстку в одноколоночную, нужно создать таблицу-контейнер для десктопной версии размером 640 пикселей и вложенные таблицы на 320 пикселей. Вложенные таблицы будут играть роль колонок.

Так как это не веб-вёрстка, то лучше использовать атрибуты HTML-вёрстки, а не их CSS-аналоги. Например, для выравнивания текста используют атрибуты align=”left” и cellpadding=”10” вместо float: left; и padding: 10px;.

Разметка для двухколоночного шаблона, может выглядеть примерно так:

7. Примените технику «прогрессивного раскрытия»

Суть «прогрессивного раскрытия» (progressive disclosure) заключается в сокрытии контента за интерактивным элементом вроде кнопки или ссылки, а затем отображения этого контента по клику. Это гарантирует, что пользователю не придется слишком много скроллить, дабы добраться до нужного содержания в нижней части письма. Такой подход использует «Википедия» для мобильных платформ.

8. Тестируйте письмо перед отправкой

Почтовые клиенты в плане рендеринга и поддержки HTML и CSS еще хуже, чем браузеры. Тестировать письма необходимо и на реальных устройствах, и с помощью специальных превью-сервисов (например от «Печкина»).

В период с 2010 по 2015 год число email-писем, открываемых на мобильных устройствах, возросло на 30%. И эта тенденция еще раз подтверждает, что адаптивный email-дизайн – не роскошь, а необходимость. Следуя представленным в посте рекомендациям, вы сможете создать привлекательное HTML-письмо, которое будет корректно отображаться на любых платформах.

Источник