Gmail будет поддерживать медиа-запросы

2 387
Gmail будет поддерживать медиа-запросы

Дизайнеры, радуйтесь — Gmail наконец меняется! 31 августа 2016 Gmail начал поддерживать CSS-свойство display:none. Несколько дней назад они же анонсировали, что к концу месяца начнут поддержку <style> и медиазапросов.

«Причем, далее поддержка 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

2 388