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

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

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

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

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

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

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

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

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

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

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

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

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

Не пропустіть