Дизайн писем. Рекомендации по разработке
Дизайн электронных писем, несомненно, является частью веб-дизайна. Но, несмотря на это, процесс разработки письма значительно отличается от разработки сайта или веб-страницы. Именно поэтому даже опытные веб-дизайнеры, впервые сталкиваясь с разработкой дизайна писем, допускают ошибки, которые не позволяют в точности воплотить задумку в жизнь и заставляют верстальщиков пожалеть о выборе профессии.
В этой статье я постараюсь предостеречь начинающих дизайнеров от некоторых ошибок и расскажу о вещах, о которых стоит помнить при работе над электронными письмами. Основополагающее отличие заключается в том, что вёрстка писем основывается на таблицах, а не на блоках, как большинство современных сайтов. Также не поддерживаются скрипты и большая часть свойств CSS. Не забывайте об этом и по возможности изучите особенности вёрстки.
Размер письма
Большинство почтовых клиентов и веб-интерфейсов почтовых провайдеров дают ограниченное пространство для отображения письма. Поэтому не делайте слишком широкие макеты.
Избыточная ширина может привести к появлению горизонтальной полосы прокрутки, потому что часть контента не будет видна пользователю.
Оптимальная ширина контентной части в дизайне письма — не более 600 пикселей. Желательно уместить в них и возможные тени от основного контейнера. Однако общий фон «под письмом» может быть любого размера и может быть залит любым паттерном или цветом.
Структура письма
Используйте в основе дизайн-макета письма модульную сетку из четырёх или трёх столбцов. Она оптимальна для решения большинства задач в дизайне адаптивных писем. Заранее разработайте несколько типовых шаблонов для разных типов писем. Это позволит сэкономить время при создании нового дизайна.
Адаптация под мобильные устройства
Существует два способа адаптации:
- Адаптация с помощью медиазапросов.
- Адаптация «резиновых» макетов.
Адаптация на медиазапросах применяется при разработке веб-страниц, но для дизайна писем это не лучшее решение. Например, Яндекс — один из крупнейших почтовых провайдеров в России — до сих пор не поддерживает данный подход к адаптации. Поэтому при разработке дизайна письма, подразумевающего адаптацию с помощью медиазапросов, нужно быть уверенным, что емейл создаётся для конкретного сегмента получателей, в котором нет адресов на Яндексе.
Актуальную информацию о том, какие из основных почтовых клиентов поддерживают медиазапросы, вы всегда можете посмотреть в нашем справочнике по поддержке стилевых свойств CSSGuide.
Основное решение для адаптации электронных сообщений — создание «резиновых» макетов с блочным перестроением внутренних элементов. Когда ширина письма указывается относительно (в процентах) и ограничивается лишь максимальным и минимальным размерами, дизайн письма будет подстраиваться под ширину устройства, на котором его открыли, а текст и блоки внутри будут перестраиваться, чтобы уместиться на экране.
Элементы дизайна письма при «резиновом» подходе адаптируются тремя основными способами. Назовём их условно: масштабирование, отсечение и перестроение.
Масштабирование
При этом типе адаптации элемент сжимается, подстраиваясь под ширину контента. Обычный текст адаптировать таким образом не получится, соответственно, сжиматься будет только графический контент — креативы и баннеры. Убедитесь, что надписи, детали и кнопки в вашем дизайне письма достаточно крупные и останутся читабельными (кнопки — кликабельными) при их уменьшении в два раза.
Отсечение
Этот тип адаптации также применим к графическому контенту в дизайне письма. При его использовании часть элемента, который не умещается по ширине, отсекается и становится невидимой для пользователя. При вёрстке есть возможность указать, с какой стороны будет происходить отсечение. Делайте так, чтобы в креативе вся важная информация и графика располагались на одной из его половин. Также не следует оставлять какие-то незначительные элементы выступающими с отсекаемой половины на «важную».
Перестроение
Этот тип адаптации подходит для любого контента письма, который расположен в двух соседних ячейках одной строки таблицы. В этом случае при нехватке ширины для отображения обеих ячеек одна из ячеек перестраивается под другую.
В вёрстке есть возможность указать, какая именно ячейка (правая или левая) будет перестраиваться вниз. Перестроение может происходить в несколько шагов — если ячеек в строке не две, а, скажем, три или четыре. При нехватке ширины сначала перестраивается крайняя ячейка, затем следующая с той же стороны и так далее.
При использовании трёх колонок в основе структуры части письма не стоит делать между элементами больших промежутков. Напротив, их нужно минимизировать, чтобы избежать широких пустых полей слева и справа от этих элементов на мобильном устройстве. Если в дизайне письма предусмотрен блок, который состоит из какого-то текста и картинки, иллюстрирующей его и расположенной сбоку от этого текста, то вполне логично перестроить текст под изображение.
Таким образом на мобильном устройстве мы увидим логичное и привычное представление статьи или товара. Оптимальное решение в этой ситуации — сделать соседние блоки одинаковыми по ширине и равными половине ширины письма. Этот тип адаптации вариативен и позволяет создавать нетривиальные структуры писем.
Иногда в блоках с фоном-картинкой, внутри которых происходит перестроение, необходимо оставлять определённый «запас» фонового изображения. В примере ниже наглядно показано использование дополнительного фона:
Если бы здесь не было «запаса», то текст «Путешествуйте с нами!» частично попал бы на белый фон тела письма и стал бы нечитабельным.
Не пересекайте строки
При вёрстке по табличному принципу ячейки и строки разделяются прямыми линиями. Следите за тем, чтобы содержимое одной строки не выбивалось за её границы и не пересекало горизонтальную разделительную линию. Это нестрашно при неадаптивном дизайне письма, но заставит мучиться верстальщиков, которые работают над адаптацией.
Данное ограничение дизайна писем справедливо для тех случаев, когда:
- первая строка целиком состоит из текстового блока, как на примере выше;
- первая и вторая строки состоят из двух ячеек. Верхняя строка адаптируется строго прямым перестроением (правая колонка переходит под левую), а общий элемент находится в левых (первых) ячейках обеих строк;
- первая и вторая строки состоят из двух ячеек. Верхняя строка адаптируется обратным перестроением, а общий элемент находится в правых (вторых) ячейках.
Для большей наглядности посмотрите на схемы допустимых решений, где 1 и 2 — ячейки первой строки, 3 и 4 — ячейки второй строки.
Шрифты
Шрифты, использованные в дизайне писем и отсутствующие в системе пользователя, будут заменены браузером на один из стандартных, что приведёт к искажению отображения письма. Используйте только безопасные веб-шрифты, которые гарантированно отображаются на экране пользователя так, как и было задумано дизайнером:
- Arial,
- Comic Sans MS,
- Courier New,
- Georgia,
- Impact,
- Times New Roman,
- Trebuchet MS,
- Verdana.
Используйте стандартные шрифты для основного контента, а также таких элементов, как, например, промокоды и номера телефонов, чтобы пользователь мог легко скопировать их в буфер обмена.
В мобильных почтовых приложениях шрифты часто заменяются на стандартные для операционной системы. Системные шрифты Android и iOS могут отличаться по ширине от того, который вы предусмотрели в дизайне письма. Поэтому не заполняйте блоки текстом впритык к их границе. Это чревато появлением лишних строк на мобильном устройстве.
Все альтернативные шрифты вставляются в вёрстку как изображения, поэтому письмо из картинок без текстовой части может восприниматься провайдером как спам. Использование нестандартных шрифтов допустимо в креативах и при накладывании на другие изображения. Если вы применяете их в основном тексте, учитывайте следующие моменты:
— при адаптации под мобильные устройства нестандартные шрифты в вёрстке ведут себя как обычные картинки;
— эти тексты могут масштабироваться либо перестраиваться согласно общим принципам адаптации письма. Если вы используете нестандартный шрифт, например, в качестве заголовка, то убедитесь в том, что:
- заголовок достаточно крупный для того, чтобы оставаться читабельным при уменьшении его в 2 раза, если планируется адаптация элементов дизайна письма масштабированием;
- заголовок не содержит слов шириной более 300 px, если планируется адаптация письма перестроением.
Графика
По возможности используйте векторные объекты для создания дизайна писем. Обычно это касается иконок и логотипов. Векторный объект, например в svg-формате, можно экспортировать из макета в виде растрового изображения, причём в любом необходимом разрешении и без потери качества. Поэтому неважно, какой размер изначально будет у изображения в исходнике.
В другой графике используйте картинки в два раза больше конечного разрешения. Например, если в дизайне письма вы используете картинку, занимающую 300×300 пикселей, то в её основе должно быть изображение не менее 600×600 пикселей. При работе в Photoshop это можно сделать превращением большой картинки в смарт-объект и последующим её уменьшением до необходимых размеров. Тогда такие картинки будет выглядеть качественно на любых экранах.
Стоит помнить, что изображения, которые в вёрстке будут использованы как background-image, необязательно делать больших размеров, чем фактический, так как задать размеры фона кодом в данный момент не представляется возможным. Может получиться так, что в итоговом письме фон ячейки окажется вдвое больше, чем нужно.
Градиенты
Если собираетесь использовать градиенты в блоках, которые будут перестраиваться при адаптации, помните следующее:
- градиент лучше делать фоном основного блока;
- не забывайте про запас фона;
Применение горизонтального или диагонального градиента с запасом фона - изображения должны быть с прозрачностью, в формате .png, .gif или .svg;
- при вертикальном линейном градиенте запас фона можно не делать;
Способ применения вертикального градиента - при использовании контрастного градиента убедитесь, что после перестроения светлое не окажется на светлом или тёмное на тёмном.
Динамика
Так как почтовые клиенты и провайдеры пока не поддерживают JavaScript и большую часть CSS-свойств, динамику в дизайн письма вносят посредством GIF-анимации. Тут тоже есть свои нюансы.
Немногие знают, но клиент Outlook просто не воспроизводит анимацию, а показывает лишь её первый кадр. Поэтому, если анимация у вас зациклена, убедитесь, что она начинается с нужного, самого информативного кадра. Для случаев, когда анимация воспроизводится единственный раз, что лишает нас возможности начать её с «нужного» момента, есть возможность в вёрстке подменять её на другое (заранее подготовленное) изображение.
Список поддерживаемых свойств CSS у каждого провайдера свой. Есть почтовики, которые поддерживают hover-эффекты и умеют заменять одну картинку на другую. Таким образом мы можем создать видимость взаимодействия с кнопкой при наведении курсора мыши. При создании hover-эффекта вы ничем не рискуете. Пользователи, чья почта не поддерживает эти свойства, увидят статичный элемент дизайна письма, а счастливые обладатели «более продвинутой» почты получат приятный визуальный сюрприз.
Существует возможность создавать интересные элементы, например такие как плавающее меню — «гамбургер». Но из-за слабой поддержки CSS их увидит лишь маленький процент пользователей. Вышеупомянутое меню, по сравнению с «классическим», показало себя хуже по количеству кликов. Поэтому до тех пор, пока провайдеры не расширят список поддерживаемых свойств, внедрение таких экспериментов в массы нецелесообразно.
Границы
У неровных вертикальных рамок вокруг адаптируемых перестроением блоков также есть свои особенности. Так как при перестроении высота блока увеличивается, а «художественная» рамка верстается методом множественного её повторения по вертикали, позаботьтесь о том, чтобы эта рамка в дизайне письма была бесшовной. Нарисуйте её так, чтобы её конец (низ) переходил в начало (верх) копии этой рамки, расположенной прямо под оригиналом, без видимых стыков.
Чтобы у вас перед глазами всегда были примеры правильных емейлов, заглядывайте к нам в портфолио. Там мы публикуем дизайны писем, которые разработали для клиентов, и работы западных коллег.
