Лого vc.ru

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

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

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

Руководитель отдела дизайна и креатива агентства 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 их увидит маленький процент пользователей. Вышеупомянутое меню, по сравнению с «классическим», показало себя хуже по количеству кликов. Поэтому до тех пор, пока провайдеры не расширят список поддерживаемых свойств, внедрение таких экспериментов в массы вряд ли можно назвать целесообразным.

Границы

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

Присылайте свои колонки и интерфейсные кейсы на interface@vc.ru.

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

0

Полностью согласен

0

Артур, сам знаешь, что от менеджеров никуда не деться )

0

Саш, ну смотри, описываю типичный сценарий в крупных проектах:

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

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

0

Приведённый список безопасных шрифтов будет поддерживаться на смартфонах?

Arial - на андроиде заменится на Roboto
Comic Sans MS - винда онли
Trebuchet MS - винда онли

Это на вскидку. Всегда надо делать кроссплатформенные фоллбэки. Хотя бы на sans-serif

0

Спасибо большое, прям гора с плеч)
Момент со шрифтами в письме на смартфоне очень актуален для меня сейчас. Обыскала весь интернет, но не нашла ничего внятного.
А вы об этом где-то читали или пришли опытным путём?

0

Шесть лет верстаю письма :)

Я, например, использую вот такое семейство шрифтов

font-family: -apple-system, BlinkMacSystemFont, helvetica, roboto, arial, serif;

Что дает условную нативность типографики и в целом очень приятный результат на смартфонах

0

А дизайнеру необходимо прорисовывать письмо с каким-то одним шрифтом из семейства, или с каждым?

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

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

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

Дизайнеры на винде, обычно отрисовывают макеты в Arial. Заднеприводные любят использовать Гельветику. Я предпочитаю San Francisco.

0

Согласен с ненадобностью мобильной версии в том случае, если это простой шаблон из 2х или 4х колонок, где интуитивно понятно что, куда и как перестраивается или в случае, если "нестандартный" макет разрабатывался в сцепке с верстальщиком, который и будет с ним работать в дальнейшем. В других случаях не стоит пренебрегать адаптированной версией. Тем более, что на нее уходит немного времени.

0

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

Прямой эфир
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления