Михаил Терентьев
Gmail будет поддерживать медиа-запросы
«Причем, далее поддержка CSS в Gmail будет только расширяться, как и контроль email-дизайнеров над отображением сообщений», — утверждает Пирс Волуччи (Pierce Vollucci), менеджер по продуктам Google.
Это великолепная новость для email-сообщества, которая окажет серьезное влияние на проектирование и разработку электронной почты.
Поддержка адаптивных писем и <style>
Ранее Gmail не поддерживал классы или идентификаторы в <head> электронных писем. Это вынудило дизайнеров обратиться к встраиванию CSS для стилизации и модернизации своих рассылок. Теперь же Gmail внедряет внутреннюю CSS с классами и идентификаторами, что исключает необходимость встраивать CSS для этого email-клиента. Также новость означает, что Gmail наконец обеспечит поддержку медиазапросов — и адаптивных писем.
Другими словами, теперь Gmail адекватно отобразит следующий код:
<html>
<head>
<style>
.colored {
color: blue;
}
#body {
font-size: 14px;
}
@media screen and (min-width: 500px) {
.colored {
color:red;
}
}
</style>
</head>
<body>
<div id=“body”>
<p>Hi Pierce,</p>
<p class=“colored”>
This text is blue if the window width is
below 500px and red otherwise.
</p>
<p>Jerry</p>
</div>
</body>
</html>
Полный список поддерживаемых CSS можете посмотреть в нижней части этого поста — или в официальной документации Gmail. Вот перечень медиазапросов, которые скоро станут доступны:
Поддерживаемые типы
- all
- screen
Поддерживаемые запросы
- min-width
- max-width
- min-device-width
- max-device-width
- orientation
- min-resolution
- max-resolution
Поддерживаемые ключевые слова
- and
- only
Что это означает для электронных писем?
Грядущие обновления сигнализируют о важном поворотном пункте в развитии email и потоков работ (workflow). Это позволит дизайнерам и маркетологам создавать более доступные email-кампании без необходимости встраивать CSS.
Влияние на рынок: медиа-запросы станут нормой
Многие электронные письма полагаются на медиа-запросы при тонкой настройке контента и дизайна — для оптимизации опыта на разных форматах экранов. Однако, медиа-запросы работают не везде. Наиболее заметный недостаток саппорта был характерен для Gmail — снятие кода с <head> вместе с любыми стилями и медиа-запросами внутри.
Но при поддержке Gmail, более 75% email-клиентов начнут способствовать адаптивному дизайну. Надеемся, это станет нормой и для остальных почтовых клиентов, таких как email-служба Windows Phone.
Повышается необходимость в шаблонных макетах
«Гики» и активисты давно ищут пути борьбы с недостаточной поддержкой медиа-запросов в Gmail. Один из вариантов — техника «Великолепной четверки», включающей функцию CSS calc() и «три ширины»: свойства width, min-width и max-width.
Дизайнеры! Пришло время попрощаться со столь сложными структурами макетов. Но имейте в виду — таблицы Outlook вам по-прежнему нужны.
Попрощайтесь со встраиванием CSS
«Встроенные» стили перемещают CSS и связанные с ним инструкции форматирования из блока стилей внутри <head> вашего письма — в <body> HTML. Исторически сложилось, что если стили не встроены, то стилизация тела письма не отображается в Gmail.
Благодаря обновлениям, исчезнет необходимость в самостоятельном встраивании CSS. Теперь email-дизайнеры могут использовать встроенные стили, помещенные в <head> HTML-документов. Встроенный CSS будет поддерживаться на всех основных email-клиентах.
Электронная почта станет доступнее
Доступность имейлов крайне важна для успеха кампаний. Если абонент не может прочесть письмо и взаимодействовать с ним, нет никакой возможности воздействовать на него. Благодаря поддержке встроенной CSS, дизайнеры могут отделить стили от контента и использовать семантическую, доступную разметку своих писем.
Хотя большой текст и удобные кнопки улучшают доступность, вы должны оптимизировать код страницы под программы-скринридеры. Помните об этом, чтобы обеспечить здоровый баланс текста и изображений в дизайне, и адаптируйте письменный контент в имейлах для донесения главного сообщения.
Скрин-ридеры настраиваются в CSS с помощью «pitch», «pitch-range», «speak-punctuation» и «speech-rate». Gmail упростил для маркетологов и это, сделав письма более доступными и читабельными.
Растущая поддержка типографики
Грядет еще одно важное обновление — дополнительная поддержка CSS-свойств шрифтов. Например, Gmail включит такие атрибуты, как column-count column-gap, что позволит создавать столбцы текста без таблиц. Кроме того, font-kerning и font-variant-caps открывают дополнительные возможности к стилизации шрифтов. Но судя по всему, веб-шрифты не будут доступны в следующем релизе.
Грядет дополнительная поддержка фона
Gmail вводит дополнительную поддержку свойств «background» в CSS, как-то: background-clip, background-position, и главное — background-size. С background-size электронные письма получат масштабируемые и адаптивные фоновые изображения.
Официальная документация
Впервые крупный почтовый клиент опубликовал официальные документы по поддержке CSS и HTML. Это — новаторский шаг в индустрии. Спасибо тебе, Gmail!
Итак, в Gmail и Inbox от Gmail будут поддерживаться следующие CSS-свойства:
- azimuth
- background
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- box-sizing
- break-after
- break-before
- break-inside
- caption-side
- clear
- color
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- direction
- display
- elevation
- empty-cells
- float
- font
- font-family
- font-feature-settings
- font-kerning
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-weight
- height
- image-orientation
- image-resolution
- isolation
- letter-spacing
- line-height
- list-style
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- object-position
- opacity
- outline
- outline-color
- outline-style
- outline-width
- overflow
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- pause
- pause-after
- pause-before
- pitch
- pitch-range
- quotes
- richness
- speak
- speak-header
- speak-numeral
- speak-punctuation
- speech-rate
- stress
- table-layout
- text-align
- text-combine-upwrite
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-style
- text-indent
- text-orientation
- text-overflow
- text-transform
- text-underline-position
- unicode-bidi
- vertical-align
- voice-family
- width
- word-spacing
- writing-mode
Что будет дальше, и какие нововведения последуют от остальных email-клиентов? Подпишитесь на нашу рассылку, и регулярно получайте свежие новости по email-дизайну и почтовому маркетингу!
Источник: litmus.com
Дарья Горбачева 
Ирина Хафизова 
Жанна Азарян 
Георгий Матавкин