Gmail тепер підтримує Responsive Design. Що зміниться в email-маркетингу?

Адаптивне верстання (Responsive design) – вже кілька років де-факто стандарт розробки сайтів і веб-додатків. Не озиратись на адаптивність для мобільних пристроїв – все одно, що поставити хрест на видимості свого сайту пошуковими системами.

Справа тут не тільки в тому, що таким чином відсікається значна частина користувачів, які виходять в мережу з мобільних пристроїв. Адже сайтам зі зручним адаптивним дизайном віддає перевагу пошукова видача Google.

Що трапилося?

Адаптивний дизайн вже довгий час використовується і в електронній пошті, однак підтримується далеко не всіма поштовими сервісами. До недавнього часу одним з цих серверів був Gmail. Здавалося б, євангелісти “Mobile-friendly” філософії повинні були прагнути до того, щоб Responsive Design був доступний у всіх сервісах. Але в Google пояснювали свою відмову від розширеної css-підтримки міркуваннями безпеки.

14 вересня офіційний блог Gmail анонсував підтримку медіазапитів у відображенні вхідних листів і використання тега style для опису правил відображення листа, а вже з початку жовтня почав запускати адаптивний дизайн для користувачів.

Адаптивне верстання базується на використанні CSS-правила @media (медіазапит), завдяки якому можна призначити всіїй веб-сторінці або її окремим елементам різні властивості в залежності від типу пристрою, його розміру екрану та інших параметрів.

Ось як тепер виглядає адаптивний дизайн в мобільному клієнті Gmail:

gmail-responsive-design-difference

Також тепер у email-дизайнерів добряче розширився інструментарій роботи зі шрифтами.

Що зміниться в email-маркетингу?

Досить багато.

  1. Кращий доступ до інформації Активна аудиторія Gmail нараховує понад один мільярд користувачів щомісяця. Всі вони тепер мають доступ до адаптивно зверстаних електронних листів.
  2. Підвищення UX Відповідно до проведених досліджень, близько 40% учасників опитування користувачів сервісів електронної пошти сказали, що видалять повідомлення, якщо воно не буде правильно виглядати на мобільному пристрої. Використання Responsive Design в листі не створює у користувача труднощів під час читання, а це означиає відсоток відчиняємості та кліків у таких листів буде набагато вище.
  3. Краща доступність Медіа запити служать не тільки для відстеження ширини екранів, але і для запуску різних сценаріїв в залежності від типу пристрою, на якому відкрита сторінка. Наприклад, тепер в Gmail буде набагато простіше користуватися налаштуваннями screen-reading (програми для звукового відтворення тексту з екрану).
  4. Спрощене створення листів для розсилок З наявністю адаптивного верстання під часстворення листів для розсилки не потрібно турбуватися, чи не розповзеться вона на більшій частині моніторів підписчиків. Якщо раніше доводилося користуватися нагромадженням милиць у вигляді inline-стилів або використовувати “гібридний дизайн” (Hybrid Email Design), тепер набагато простіше скористатися медіа запитами.
  5. Завдання тренду Тепер, коли домінант серед email-сервісів оголосив про підтримку адаптивного верстання, конкурентам доведеться прийняти виклик і також рано чи пізно перейти на Responsive Design.

Технічна документація

Вперше серед email-сервісів Google надав офіційну документацію за створенням листів.

Властивості (css-properties):

  • 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

Юля Заліховська

Керівник відділу продажів

Дізнайтеся про рекламу для вашого бізнесу!

Задайте Юлі питання про просування сайту в інтернеті.

Натискаючи на кнопку, ви даєте згоду на обробку персональних даних і погоджуєтеся з політикою конфіденційності

Підтримувані медіа запити (Media queries)

Типы (types):

  • all
  • screen

Запити(queries):

  • min-width
  • max-width
  • min-device-width
  • max-device-width
  • orientation
  • min-resolution
  • max-resolution

Ключові слова (keywords):

  • and
  • only

gmail-responsive-design-font-control

На цей момент підтримується не весь спектр медіа запитів, однак варто очікувати розширення підтримки в недалекому майбутньому. Найактуальніша інформація за підтримуваними параметрами css знаходиться на сторінці документації.


Аліна Глазиріна

головний редактор блогу Inweb

Підпишіться і будьте в курсі!

Аліна пише про головні новини інтернет-маркетингу
Користувальницької угоди