Разборы

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

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

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

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

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

1. Макет должен сохранить все задумки дизайнера: слои, растровую графику, прозрачные и полупрозрачные элементы. Всё это доступно в формате PSD. Он сохранит все фишки макета и сожмет изображения без потери качества. Создать PSD файл можно в Adobe Photoshop. Также создать дизайн можно в онлайн-сервисах для командной работы, например в Figma.

2. Многие почтовые приложения ограничивают ширину письма. Если это значение превышает 600 px, то у пользователей появится горизонтальная полоса прокрутки. На фон по сторонам от письма почтовые приложения ограничений не накладывают — он может быть любого цвета и размера. Учтите, что на некоторых платформах его видно не будет (например, в Gmail для Android).

Рекомендуемая ширина письма и фона
Рекомендуемая ширина письма и фона

3. Нестандартные шрифты нужно присылать отдельным файлом. Чтобы они корректно отображались на всех устройствах, их лучше изначально делать в виде изображения.

4. Текстовое наполнение тоже присылают в Word или Google Doc. Это нужно, чтобы точно передать его форматирование и типографику в письме.

Что делать с нестандартным шрифтом и текстом
Нестандартные шрифты и текст нужно присылать отдельными файлами

Структура письма

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

Структура письма от Punk Your Brands
Модульная сетка делит рассылку Punk Your Brands на 2 столбца

6. Разработайте типовые шаблоны для каждого вида писем: триггерных, реактивационных, welcome. Это сэкономит время на подготовку новых макетов и позволит придерживаться одного стиля в рассылке.

Шрифты

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

Список «безопасных» шрифтов:

Безопасные шрифты в email-рассылке
Безопасные шрифты в email-рассылке. Для удобства все они набраны одинаковых кеглем

8. Не делайте текст меньше 12-13 px. Для более мелкого шрифта придется напрягать зрение и использовать увеличение.

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

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

Отображение декоративного шрифта на мобильных устройствах
В третьем случае модульная сетка проходит через центр слова — в этом месте картинку не разрезать

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

Адаптация под мобильные

11. Для адаптации рассылки под мобильные устройства нужно сдавать два макета разной ширины: 600px и 320px.

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

https://gyazo.com/21fc42f8c812fadbd559c8e3316621af

Также для адаптации используют масштабирование и отсечение изображений:

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

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

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

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

Модули в письме не конфликтуют
Рисунок не выходит за пределы модуля. Блок легко адаптировать под мобильный

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

Разрывы из-за разного радиуса закругления блоков
У нижней и верхней части блока-родителя разный радиус закругления. От этого в рамке разрывы
Адаптация на мобильном без разрывов
Изменили закругление в блоке-родителе. Разрывы пропали

Изображения

15. Изначальное разрешение изображения должно быть в два раза больше области, которое оно занимает в письме. Например, если вам нужен объект 150х150 пикселей, то в его основе должно быть изображение с разрешением 300х300 или больше.

16. Письмо не должно состоять только из картинок. Даже если их получится адаптировать под мобильные, то в дело вступят спам-фильтры почтовых служб и заблокируют рассылку.

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

Анимация

18. Не используйте JavaScript и CSS-анимацию — почтовые приложения их не отображают. Если нужна динамика, лучше добавить GIF. Но с этим разрешением тоже есть проблема — Outlook показывает только первый кадр анимации. Убедитесь, что он отражает суть иллюстрации.

Градиенты

19. Используйте вертикальные или горизонтальные градиенты. Если сделать цветовой переход из угла в угол, то при адаптации на мобильные устройства его придется разрезать. Блоки перестроятся друг под друга, и эффект градиента исказится.

Ошибка в градиенте
Градиент из угла в угол повторяется в каждом блоке и дает полосу разрыва
Правильный градиент в письме
Вертикальный градиент дает плавный переход без разрывов

20. Не делайте резких градиентных переходов — от черного к белому или от красного к синему. При перестроении страницы под мобильный эта особенность может ухудшить читаемость текста.

Обновлено 22 июля 2020