Используйте стандартные шрифты и векторные объекты
Девять правил разработки дизайна писем.
Руководитель отдела дизайна и креатива агентства Emailmatrix Юрий Гусев написал колонку об особенностях разработки дизайна писем.
![Используйте стандартные шрифты и векторные объекты](https://png.cmtt.space/paper-media/41/45/6e/8895ff80b35e08.jpg)
Дизайн электронных писем, несомненно, является частью веб-дизайна. Но, несмотря на это, процесс разработки письма значительно отличается от разработки сайта или веб-страницы. Именно поэтому даже опытные веб-дизайнеры, впервые сталкиваясь с разработкой дизайна писем, допускают ошибки, которые не позволяют в точности воплотить задумку в жизнь и заставляют верстальщиков пожалеть о выборе профессии.
В этой статье я постараюсь предостеречь начинающих дизайнеров от некоторых ошибок и расскажу о вещах, которые стоит помнить при работе над электронными письмами. Основополагающим отличием является то, что вёрстка писем основывается на таблицах, а не на блоках (как большинство современных сайтов). Также не поддерживаются скрипты и большая часть свойств CSS. Не забывайте об этом, и по возможности изучите особенности вёрстки таким способом.
Размер письма
Большинство почтовых клиентов и веб-интерфейсов почтовых провайдеров дают ограниченное пространство для отображения письма. Поэтому не делайте слишком широкие макеты.
Избыточная ширина может привести к появлению горизонтальной полосы прокрутки, потому что часть контента не будет видна пользователю.
Оптимальная ширина контентной части письма составляет не более 600 пикселей. Желательно уместить в них и возможные тени от основного контейнера. Однако общий фон «под письмом» может быть любого размера и может быть залит любым паттерном или цветом.
![Используйте стандартные шрифты и векторные объекты](https://png.cmtt.space/paper-media/0e/eb/2c/59bb5b5f2ea1b2.png)
Структура письма
Используйте в основе дизайн-макета письма модульную сетку из четырёх или трёх столбцов. Они оптимальны для решения большинства задач в дизайне адаптивных писем. Заранее разработайте несколько типовых шаблонов для разных типов писем. Это позволит сэкономить время при создании нового дизайна.
![Используйте стандартные шрифты и векторные объекты](https://png.cmtt.space/paper-media/35/2e/a1/ba7519843d7443.png)
![Используйте стандартные шрифты и векторные объекты](https://png.cmtt.space/paper-media/91/c1/ac/ef5f33224a3632.png)
Адаптация под мобильные устройства
Существует два способа адаптации:
- адаптация «резиновых» макетов;
- адаптация с помощью медиазапросов.
Адаптация на медиазапросах применяется при разработке веб-страниц, но для писем подобный подход – не лучшее решение. Дело в том, что немногие мобильные почтовые клиенты поддерживают работу медиазапросов. Например, популярные в России мобильные почтовые клиенты Yandex и Mail.ru медиазапросы не поддерживают, а Gmail начал с ними работать лишь с сентября 2016 года.
Outlook c его мобильными приложениями (на iOS и Android) и здесь смог выделиться: долгое время он поддерживал медиазапросы, однако в последних версиях отказался от них.
Основным решением для адаптации электронных сообщений является создание «резиновых» макетов с блочным перестроением внутренних элементов. Когда ширина письма указывается относительной (в процентах) и ограничивается лишь максимальным и минимальным размерами. Такое письмо будет подстраиваться под ширину устройства, на котором его открыли, а текст и блоки внутри будут перестраиваться, чтобы уместиться на экране.
Элементы письма при «резиновом» подходе адаптируются тремя основными способами. Назовём их условно: масштабирование, отсечение и перестроение.
Масштабирование
При этом типе адаптации элемент сжимается, подстраиваясь под ширину контента. Обычный текст адаптировать таким образом не получится, соответственно, сжиматься будет только графический контент, такой как креативы и баннеры. Убедитесь, что надписи, детали и кнопки в вашем дизайне письма достаточно крупные и останутся читаемыми (кнопки — кликабельными) при их уменьшении в два раза.
![Используйте стандартные шрифты и векторные объекты](https://png.cmtt.space/paper-media/1b/33/21/d9c5ff453bed83.png)
Отсечение
Этот тип адаптации также применим к графическому контенту. При его использовании часть элемента, который не умещается по ширине, отсекается и становится невидимой для пользователя. При вёрстке имеется возможность указать, с какой стороны будет происходить отсечение. Делайте так, чтобы в креативе вся важная информация и графика располагались на одной из его половин. Также не следует оставлять какие-то незначительные элементы выступающими с отсекаемой половины на «важную».
![Используйте стандартные шрифты и векторные объекты](https://png.cmtt.space/paper-media/ae/67/a5/6e6dcd691d455b.png)
Перестроение
Этот тип адаптации подходит для любого контента письма, который расположен в двух соседних ячейках одной строки таблицы. В этом случае при нехватке ширины для отображения обеих ячеек одна из ячеек перестраивается под другую.
В вёрстке есть возможность указать, какая именно ячейка (правая или левая) будет перестраиваться вниз. Перестроение может происходить в несколько шагов — в случае, если ячеек в строке не две, а, скажем, три или четыре. При нехватке ширины сначала перестраивается крайняя ячейка, затем следующая с той же стороны и так далее.
При использовании трёх колонок в основе структуры части письма не стоит делать между элементами больших промежутков. Напротив, их стоит минимизировать, чтобы избежать широких белых полей слева и справа от этих элементов на мобильном устройстве. Если в дизайне письма предусмотрен блок, который состоит из какого-то текста и картинки, иллюстрирующей его и расположенной сбоку от этого текста, то вполне логично перестроить текст под изображение.
Таким образом на мобильном устройстве мы увидим логичное и привычное представление статьи или товара. Оптимальное решение в этой ситуации — сделать соседние блоки равными по ширине и равными половине ширины письма. Этот тип адаптации вариативен и позволяет создавать нетривиальные структуры писем.
![Используйте стандартные шрифты и векторные объекты](https://png.cmtt.space/paper-media/57/c1/af/9acfe1bb8f7123.png)
Не пересекайте строки
Табличный принцип вёрстки разделяет ячейки и строки прямыми линиями. Следите за тем, чтобы содержимое одной строки не выбивалось за её границы и не пересекало горизонтальную разделительную линию. Это нестрашно при неадаптивном дизайне, но заставит мучиться верстальщиков, которые работают над адаптацией.
![Используйте стандартные шрифты и векторные объекты](https://png.cmtt.space/paper-media/e6/0b/c2/9a2ea05c81b653.png)
![Используйте стандартные шрифты и векторные объекты](https://png.cmtt.space/paper-media/92/8f/fe/97428c8cfb437d.png)
Шрифты
Шрифты, использованные в дизайне писем и отсутствующие в системе пользователя, в итоге будут заменены браузером на один из стандартных, что приведёт к искажению отображения письма. Используйте только безопасные веб-шрифты, которые гарантированно отображаются на экране пользователя так, как и было задумано дизайнером.
Список безопасных шрифтов:
- Arial;
- Comic Sans MS;
- Impact;
- Tahoma;
- Trebuchet MS;
- Verdana;
- Courier New;
- Lucida Console.
Используйте стандартные шрифты для основного контента, а также таких элементов, как, например, промокоды и номера телефонов, чтобы пользователь мог легко их скопировать в буфер обмена.
Все альтернативные шрифты вставляются в вёрстку как изображения, поэтому письмо из картинок без текстовой части может восприниматься провайдером как спам. Использование «нестандартных» шрифтов допустимо в креативах и при накладывании их на другие изображения. Если вы применяете их в основном тексте, учитывайте следующие моменты.
«Нестандартные» шрифты в вёрстке являются изображениями. При адаптации под мобильные устройства они ведут себя иначе относительно обычного текста.
Если заголовок по ширине занимает больше половины, убедитесь, что:
- Заголовок достаточно большой и остаётся читабельным при уменьшении его размера в два раза.
- Середина макета приходится на пробел между словами в заголовке.
![Используйте стандартные шрифты и векторные объекты](https://png.cmtt.space/paper-media/29/ef/9c/17cd732c0fdcdc.png)
Графика
По возможности используйте векторные объекты для создания дизайна писем. Обычно это иконки и логотипы. Вектор позволяет избегать размытия, которое случается при использовании растровых изображений на экранах Retina и дисплеях с разрешениями больше 1800 пикселей.
В другой графике используйте картинки в два раза больше конечного разрешения. Например, если в письме вы используете картинку, занимающую 300x300 пикселей, то в её основе должно быть изображение не менее 600x600 пикселей. При работе в Photoshop это это можно сделать перемещением большой картинки в смарт-объект и последующим её уменьшением до необходимых размеров.
Градиенты
Если в дизайне письма применяется градиент в области, которая будет подвержена перестроению при адаптации, старайтесь использовать вертикальные или горизонтальные линейные градиенты. Они наиболее приспособлены для этой задачи.
При работе с горизонтальными не делайте их слишком контрастными, например, от белого к чёрному. В этом случае светлые элементы или текст на тёмном фоне после перестроения могут оказаться на таком же светлом и станут нечитабельными. Другие градиенты практически невозможно адаптировать. Ждём, когда почтовые-клиенты начнут поддерживать CSS-свойства.
Пример этой особенности виден на картинке ниже:
![Используйте стандартные шрифты и векторные объекты](https://png.cmtt.space/paper-media/c0/69/34/1e4469970fdb80.png)
![Используйте стандартные шрифты и векторные объекты](https://png.cmtt.space/paper-media/1b/ea/eb/d3d36f35521132.png)
Это правило не является абсолютным, и бывают случаи, когда градиенты любого типа имеют право на существование. Поэтому при выборе градиента следует исходить из конкретной задачи и вида адаптации.
Динамика
Так как на данный момент почтовые клиенты и провайдеры не поддерживают JavaScript и большую часть CSS-свойств, динамику в письма вносят посредством GIF-анимации. Тут тоже есть своя особенность. Немногие знают, но клиент Outlook просто не воспроизводит анимацию, а показывает лишь её первый кадр. Поэтому, если анимация у вас зациклена, убедитесь, что она начинается с нужного, самого информативного кадра. Для случаев, когда анимация воспроизводится единственный раз, что лишает нас возможности начать её с «нужного» момента, есть возможность в вёрстке подменять её на другое (заранее подготовленное) изображение.
Список поддерживаемых свойств CSS у всех провайдеров разный. Есть почтовики, которые поддерживают hover-эффекты и умеют заменять одну картинку на другую. Таким образом мы можем создать видимость взаимодействия с кнопкой при наведении курсора мыши. При создании hover-эффекта вы ничем не рискуете. Пользователи, чья почта не поддерживает эти свойства, увидят статичный элемент, а счастливчики с «более продвинутой» почтой получат приятный визуальный сюрприз.
Существует возможность создавать интересные элементы, например, такие как плавающее меню — «гамбургер». Но по причине слабой поддержки CSS их увидит маленький процент пользователей. Вышеупомянутое меню, по сравнению с «классическим», показало себя хуже по количеству кликов. Поэтому до тех пор, пока провайдеры не расширят список поддерживаемых свойств, внедрение таких экспериментов в массы вряд ли можно назвать целесообразным.
Границы
У неровных вертикальных рамок вокруг адаптируемых перестроением блоков также есть свои особенности. Так как при перестроении высота блока увеличивается, а «художественная» рамка верстается методом множественного её повторения по вертикали, позаботьтесь о том, чтобы эта рамка в дизайне письма была бесшовной. Нарисуйте её так, чтобы её конец (низ) переходил в начало (верх) копии этой рамки, расположенной прямо под оригиналом, без видимых стыков и границ.
![Используйте стандартные шрифты и векторные объекты](https://png.cmtt.space/paper-media/87/3e/54/e455c41d71eedb.png)
![Используйте стандартные шрифты и векторные объекты](https://png.cmtt.space/paper-media/ee/72/a1/ebafaa1cd2a7db.png)
Достаточно связать в рабочем процессе дизайнера и верстальщика напрямую, а не при помощи испорченного телефона в виде менеджера. И проблемы нет.
Полностью согласен
Артур, сам знаешь, что от менеджеров никуда не деться )
Я, например, использую вот такое семейство шрифтов
font-family: -apple-system, BlinkMacSystemFont, helvetica, roboto, arial, serif;
Что дает условную нативность типографики и в целом очень приятный результат на смартфонах
А дизайнеру необходимо прорисовывать письмо с каким-то одним шрифтом из семейства, или с каждым?
Перешел по ссылке на сайт - сразу статью читать перехотелось