[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "create", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-158433683", "adfox_url": "//ads.adfox.ru/228129/getCode?p1=bxbwd&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid21=&puid22=&puid31=&fmt=1&pr=" } } ]
{ "author_name": "Редакция vc.ru", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 18, "likes": 15, "favorites": 24, "is_advertisement": false, "section_name": "default", "id": "23255" }
Редакция vc.ru
3 459

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

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

Поделиться

В избранное

В избранном

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

Границы

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

#Интерфейсы

Популярные материалы
Показать еще
{ "is_needs_advanced_access": false }

Комментарии Комм.

0 новых

Популярные

По порядку

Прямой эфир

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