Используйте стандартные шрифты и векторные объекты

Девять правил разработки дизайна писем.

Руководитель отдела дизайна и креатива агентства Emailmatrix Юрий Гусев написал колонку об особенностях разработки дизайна писем.

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

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

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

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

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

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

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

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

Адаптация на медиазапросах применяется при разработке веб-страниц, но для писем подобный подход – не лучшее решение. Дело в том, что немногие мобильные почтовые клиенты поддерживают работу медиазапросов. Например, популярные в России мобильные почтовые клиенты Yandex и Mail.ru медиазапросы не поддерживают, а Gmail начал с ними работать лишь с сентября 2016 года.

Outlook c его мобильными приложениями (на iOS и Android) и здесь смог выделиться: долгое время он поддерживал медиазапросы, однако в последних версиях отказался от них.

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

Элементы письма при «резиновом» подходе адаптируются тремя основными способами. Назовём их условно: масштабирование, отсечение и перестроение.

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

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

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

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

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

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

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

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

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

• Arial;
• Comic Sans MS;
• Impact;
• Tahoma;
• Trebuchet MS;
• Verdana;
• Courier New;
• Lucida Console​.

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

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

«Нестандартные» шрифты в вёрстке являются изображениями. При адаптации под мобильные устройства они ведут себя иначе относительно обычного текста.

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

• ​Заголовок достаточно большой и остаётся читабельным при уменьшении его размера в два раза.
• Середина макета приходится на пробел между словами в заголовке.

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

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

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

При работе с горизонтальными не делайте их слишком контрастными, например, от белого к чёрному. В этом случае светлые элементы или текст на тёмном фоне после перестроения могут оказаться на таком же светлом и станут нечитабельными. Другие градиенты практически невозможно адаптировать. Ждём, когда почтовые-клиенты начнут поддерживать CSS-свойства.

Пример этой особенности виден на картинке ниже:

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

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

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

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

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

#Интерфейсы