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

Общие требования к макету
1. Макет должен сохранить все задумки дизайнера: слои, растровую графику, прозрачные и полупрозрачные элементы. Всё это доступно в формате PSD. Он сохранит все фишки макета и сожмет изображения без потери качества. Создать PSD файл можно в Adobe Photoshop. Также создать дизайн можно в онлайн-сервисах для командной работы, например в Figma.
2. Многие почтовые приложения ограничивают ширину письма. Если это значение превышает 600 px, то у пользователей появится горизонтальная полоса прокрутки. На фон по сторонам от письма почтовые приложения ограничений не накладывают — он может быть любого цвета и размера. Учтите, что на некоторых платформах его видно не будет (например, в Gmail для Android).

3. Нестандартные шрифты нужно присылать отдельным файлом. Чтобы они корректно отображались на всех устройствах, их лучше изначально делать в виде изображения.
4. Текстовое наполнение тоже присылают в Word или Google Doc. Это нужно, чтобы точно передать его форматирование и типографику в письме.

Структура письма
5. При создании макета лучше использовать модульную сетку в 2-4 столбца. Такая структура не перегружает страницу и подходит для адаптации письма под мобильные устройства.

6. Разработайте типовые шаблоны для каждого вида писем: триггерных, реактивационных, welcome. Это сэкономит время на подготовку новых макетов и позволит придерживаться одного стиля в рассылке.
Шрифты
7. Используйте общепринятые шрифты для текста в рассылке. Если у пользователя нет декоративного шрифта, который вы вставили в письмо, то браузер автоматически заменит его на стандартный (чаще всего это Arial). Текст отобразится неправильно, из-за чего может съехать вёрстка.
Список «безопасных» шрифтов:

8. Не делайте текст меньше 12-13 px. Для более мелкого шрифта придется напрягать зрение и использовать увеличение.
9. Если без декоративного шрифта не обойтись, то сделайте его картинкой. Этот прием подойдет для заголовков и подзаголовков, но не для целых абзацев текста: некоторые пользователи смотрят почту без картинок. Если все декоративные шрифты загнать в иллюстрации, то они откроют пустое письмо.
10. Если в качестве заголовка используете декоративный шрифт (изображение), то убедитесь, что он будет хорошо смотреться при адаптации на мобильные устройства. Наложите на него модульную сетку и посмотрите, получится ли его безболезненно разрезать:

Первый заголовок не доходит до нового блока — его не нужно переносить. У второго пересечение модульной сетки приходятся на пробел — изображение можно разрезать в этом месте. В третьем случае модульная сетка проходит через центр слова — картинку не получится разделить.
Адаптация под мобильные
11. Для адаптации рассылки под мобильные устройства нужно сдавать два макета разной ширины: 600px и 320px.
12. Основной подход к адаптации — «резиновая» верстка. Ее суть состоит в том, что при уменьшении ширины экрана несколько горизонтальных блоков перепрыгивают друг под друга. Вот как это работает: блоки текста справа перестраиваются под изображения при уменьшении области экрана.
Также для адаптации используют масштабирование и отсечение изображений:


13. Два модуля не должны накладываться друг на друга. Если это хорошо смотрится в ПК-версии, то с адаптацией под мобильные могут возникнуть проблемы.

Лучше опустить изображение, чтобы оно не вступило в конфликт:

14. Если у блока фигурная рамка и его нужно распилить для адаптации под мобильные, проследите, чтобы шов не был заметен:


Изображения
15. Изначальное разрешение изображения должно быть в два раза больше области, которое оно занимает в письме. Например, если вам нужен объект 150х150 пикселей, то в его основе должно быть изображение с разрешением 300х300 или больше.
16. Письмо не должно состоять только из картинок. Даже если их получится адаптировать под мобильные, то в дело вступят спам-фильтры почтовых служб и заблокируют рассылку.
17. Все самое важное лучше давать в виде текста, а не изображения. По данным Litmus, у 43% пользователей отображение картинок отключено. Поэтому, если хотите достучаться до всей аудитории, то главные мысли выражайте текстом.
Анимация
18. Не используйте JavaScript и CSS-анимацию — почтовые приложения их не отображают. Если нужна динамика, лучше добавить GIF. Но с этим разрешением тоже есть проблема — Outlook показывает только первый кадр анимации. Убедитесь, что он отражает суть иллюстрации.
Градиенты
19. Используйте вертикальные или горизонтальные градиенты. Если сделать цветовой переход из угла в угол, то при адаптации на мобильные устройства его придется разрезать. Блоки перестроятся друг под друга, и эффект градиента исказится.


20. Не делайте резких градиентных переходов — от черного к белому или от красного к синему. При перестроении страницы под мобильный эта особенность может ухудшить читаемость текста.
Обновлено 22 июля 2020
СВЕЖИЕ СТАТЬИ
Другие материалы из этой рубрики
Не пропускайте новые статьи
Подписывайтесь на соцсети
Делимся новостями и свежими статьями, рассказываем о новинках сервиса
«Честно» — авторская рассылка от редакции Unisender
Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы и интервью с экспертами диджитала.