Содержание

    Дизайн писем. Рекомендации по разработке

    Обновили материал 21.02.2019

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

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

    Размер письма

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

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

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

    дизайн писем

    Ширина контентной области письма и общего фона «под письмом»

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

    Используйте в основе дизайн-макета письма модульную сетку из четырёх или трёх столбцов. Она оптимальна для решения большинства задач в дизайне адаптивных писем. Заранее разработайте несколько типовых шаблонов для разных типов писем. Это позволит сэкономить время при создании нового дизайна.

    дизайн писем

    Пример модульной сетки из четырёх столбцов для дизайн-макета письма

    дизайн писем

    Пример модульной сетки из трёх столбцов для дизайн-макета письма

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

    Существует два способа адаптации:

    1. Адаптация с помощью медиазапросов.
    2. Адаптация «резиновых» макетов.

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

    дизайн писем

    Адаптация на медиазапросах

    Актуальную информацию о том, какие из основных почтовых клиентов поддерживают медиазапросы, вы всегда можете посмотреть в нашем справочнике по поддержке стилевых свойств CSSGuide.

    Основное решение для адаптации электронных сообщений — создание «резиновых» макетов с блочным перестроением внутренних элементов. Когда ширина письма указывается относительно (в процентах) и ограничивается лишь максимальным и минимальным размерами, дизайн письма будет подстраиваться под ширину устройства, на котором его открыли, а текст и блоки внутри будут перестраиваться, чтобы уместиться на экране.
    Элементы дизайна письма при «резиновом» подходе адаптируются тремя основными способами. Назовём их условно: масштабирование, отсечение и перестроение.

    Масштабирование

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

    дизайн писем

    Масштабирование элементов дизайна письма
    дизайн писем

    Пример письма компании Throne Rush

    дизайн писем

    Отсечение

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

    дизайн писем

    Отсечение элементов дизайна письма
    дизайн писем

    Пример письма компании «Техпорт»

    дизайн писем

    Перестроение

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

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

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

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

    дизайн писем

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

    Пример письма компании «Райффайзенбанк»

    дизайн писем

    Важно
    Иногда в блоках с фоном-картинкой, внутри которых происходит перестроение, необходимо оставлять определённый «запас» фонового изображения. В примере ниже наглядно показано использование дополнительного фона:

    дизайн писем

    Если бы здесь не было «запаса», то текст «Путешествуйте с нами!» частично попал бы на белый фон тела письма и стал бы нечитабельным.

    Не пересекайте строки

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

    дизайн писем

    Строки в дизайне письма пересекаются

    Строки в дизайне письма не пересекаются

    Данное ограничение дизайна писем справедливо для тех случаев, когда:

    • — первая строка целиком состоит из текстового блока, как на примере выше;
    • — первая и вторая строки состоят из двух ячеек. Верхняя строка адаптируется строго прямым перестроением (правая колонка переходит под левую), а общий элемент находится в левых (первых) ячейках обеих строк;
    • — первая и вторая строки состоят из двух ячеек. Верхняя строка адаптируется обратным перестроением, а общий элемент находится в правых (вторых) ячейках.

    Для большей наглядности посмотрите на схемы допустимых решений, где 1 и 2 — ячейки первой строки, 3 и 4 — ячейки второй строки.

    дизайн писем

    Прямое перестроение ячеек первой строки и обратное перестроение ячеек второй строки. Общий объект справа

    дизайн писем

    Обратное перестроение ячеек первой строки и прямое перестроение ячеек второй строки. Общий объект слева

    Шрифты

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

    • Arial,
    • Comic Sans MS,
    • Courier New,
    • Georgia,
    • Impact,
    • Times New Roman,
    • Trebuchet MS,
    • Verdana.

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

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

    — при адаптации под мобильные устройства нестандартные шрифты в вёрстке ведут себя как обычные картинки;

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

    • заголовок достаточно крупный для того, чтобы оставаться читабельным при уменьшении его в 2 раза, если планируется адаптация элементов дизайна письма масштабированием;
      дизайн писем
    • заголовок занимает не больше одной строки и в нём нет слов шириной более 300 px, если планируется адаптация письма перестроением.
      дизайн писем

    Графика

    По возможности используйте векторные объекты для создания дизайна писем. Обычно это иконки и логотипы. Вектор позволяет избегать размытия, которое случается при использовании растровых изображений на retina-экранах и дисплеях с разрешениями больше 1800 пикселей.

    Важно
    Векторное изображение весит значительно меньше, чем растровое, благодаря этому письмо загрузится быстрее и «съест» меньше трафика.

    дизайн писем

    В другой графике используйте картинки в два раза больше конечного разрешения. Например, если в дизайне письма вы используете картинку, занимающую 300×300 пикселей, то в её основе должно быть изображение не менее 600×600 пикселей. При работе в Photoshop это можно сделать превращением большой картинки в смарт-объект и последующим её уменьшением до необходимых размеров.

    дизайн писем

    Стоит помнить, что изображения, которые в вёрстке будут использованы как background-image, необязательно делать больших размеров, чем фактический, так как задать размеры фона кодом в данный момент не представляется возможным. Может получиться так, что в итоговом письме фон ячейки окажется вдвое больше, чем нужно.

    Градиенты

    Если собираетесь использовать градиенты в блоках, которые будут перестраиваться при адаптации, помните следующее:

    • — градиент лучше делать фоном основного блока;
    • — не забывайте про запас фона;
      дизайн писем

      Применение горизонтального или диагонального градиента с запасом фона
    • — изображения должны быть с прозрачностью, в формате .png, .gif или .svg;
    • — при вертикальном линейном градиенте запас фона можно не делать;
      дизайн писем

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

    Динамика

    Так как почтовые клиенты и провайдеры пока не поддерживают JavaScript и большую часть CSS-свойств, динамику в дизайн письма вносят посредством GIF-анимации. Тут тоже есть свои нюансы.
    Немногие знают, но клиент Outlook просто не воспроизводит анимацию, а показывает лишь её первый кадр. Поэтому, если анимация у вас зациклена, убедитесь, что она начинается с нужного, самого информативного кадра. Для случаев, когда анимация воспроизводится единственный раз, что лишает нас возможности начать её с «нужного» момента, есть возможность в вёрстке подменять её на другое (заранее подготовленное) изображение.

    дизайн писем

    Пример GIF-анимации в дизайне письма «Столото»

    Список поддерживаемых свойств CSS у каждого провайдера свой. Есть почтовики, которые поддерживают hover-эффекты и умеют заменять одну картинку на другую. Таким образом мы можем создать видимость взаимодействия с кнопкой при наведении курсора мыши. При создании hover-эффекта вы ничем не рискуете. Пользователи, чья почта не поддерживает эти свойства, увидят статичный элемент дизайна письма, а счастливые обладатели «более продвинутой» почты получат приятный визуальный сюрприз.

    дизайн писем

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

    Границы

    У неровных вертикальных рамок вокруг адаптируемых перестроением блоков также есть свои особенности. Так как при перестроении высота блока увеличивается, а «художественная» рамка верстается методом множественного её повторения по вертикали, позаботьтесь о том, чтобы эта рамка в дизайне письма была бесшовной. Нарисуйте её так, чтобы её конец (низ) переходил в начало (верх) копии этой рамки, расположенной прямо под оригиналом, без видимых стыков.

    дизайн писем

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

    Разработаем дизайн
    Для вашей рассылки
    Напишите нам.
    Отправляя заявку, вы соглашаетесь на обработку персональных данных в соответствии с политикой конфеденциальности
    Поделиться статьёй
    Подписаться на рассылку