Разборы

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

Как правильно подготовить письмо к вёрстке
14 правил верстки письма
Михаил Шумовский
обновил статью

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

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

Со статьей помог Денис Щукин, верстальщик писем в Unisender Agency.

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

Сохраняйте макеты в удобных форматах

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

Учитывайте области просмотра почтового сервиса при выборе размера письма

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

А еще учитывайте особенности отображения писем в почтовых сервисах. Например, в Яндексе есть колонка справа, из-за которой фактическая ширина письма уменьшается и иногда появляется горизонтальная прокрутка. В Gmail такой проблемы нет.

Например, вот так письма отображаются в Яндекс Почте.

Колонка в Яндекс.Почте

А так — в Gmail.

Отображение письма в Gmail

Нестандартные шрифты присылайте в виде фотографии

Почтовые клиенты воспринимают не все шрифты для email рассылки. Если человеку придёт письмо со шрифтом, который почтовик не поддерживает — текст письма отобразиться в Times New Roman для шрифтов с засечками и Arial для шрифтов без засечек. При этом верстка может съехать.

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

  • Arial;
  • Georgia;
  • Verdana;
  • Times New Roman.

Указать резервный шрифт можно таким кодом:

font-family: ‘YourWebFont’,Arial, sans-serif;

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

Текстовое наполнение тоже присылают в Word или Google Docs. Это нужно, чтобы точно передать его форматирование и типографику в письме. Т.е. если вы написали большой текст со сложным форматированием, добавьте его в письмо в виде DOC-файла. Так проблем с версткой не возникнет.

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

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

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

Отображение макета на ПК

И на смартфоне:

Отображение письма на смартфоне

Используйте шаблоны

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

Шрифты

Работайте со стандартными шрифтами

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

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

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

Не используйте маленький шрифт

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

Кроме того, на мелкий шрифт могут сработать спам-фильтры. А некоторые почтовики могут специально увеличить размер текста, чтобы он стал читаемым. Тогда может получится, что в блоке, где был 10 размер шрифта, появится шрифт 12 размера. Он не будет помещаться в свой блок и это будет выглядеть некрасиво.

 

Декоративные шрифты делайте картинкой

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

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

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

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

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

Подстраивайте письма под экран смартфонов

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

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

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

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

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

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

Следите за расположением графических элементов

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

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

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

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

Подготовьте блоки к адаптации

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

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

Изображения

Подбирайте разрешение картинок

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

 

Не делайте письмо только из картинок

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

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

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

Анимация

Не используйте JavaScript и CSS

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

Градиенты

Используйте вертикальные или горизонтальные градиенты

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

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

Чтобы проблем с градиентом не возникало, лучше делать его вертикальным и прописывать его в CSS-коде. А если делаете градиент картинкой, то его фон нужно закладывать размером в 2-3 раза больше высоты блока. Так он не обрежется, если блоки перестроятся при адаптации.

Правильный градиент в письме
Вертикальный градиент дает плавный переход без разрывов

Не используйте резких цветовых переходов

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