20 правил подготовки макета email к вёрстке

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

Общие требования к макету

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