Содержание

    Что нужно знать емейл-маркетологам о новых айфонах и iOS 11

    Согласно исследованию компании Litmus, в первой половине 2017 треть всех емейлов были открыты с айфонов. Нововведения iOS и выпуск телефонов Apple всегда влияли на мир емейл-маркетинга. Чего же нам ждать после презентации новых айфонов и iOS 11?

    Компания Apple дала возможность разработчикам приложений познакомиться с новой iOS 11 до массового запуска на мобильных устройствах. Специалисты Litmus внимательно изучили её и новые айфоны, чтобы поделиться с емейл-маркетологами последней информацией.

    iOS 11 и видео в HTML5

    Apple то поддерживали тег <video> HTML5, то снова от него отказывались. Летом, после выпуска бета-версии iOS 11, прошли слухи о том, что компания в очередной раз приостанавливает поддержку HTML5-видео. Они не подтвердились.

    Видео в теле письма можно и нужно размещать. В iOS 10/11 в видеоплеере вместо первого кадра по умолчанию показывается белый фон. Чтобы этого избежать, используйте атрибут poster (poster=’’’’). В предыдущих версиях iOS, если превью не было задано, в письме отображался первый кадр видео.

    iOS 7

    iOS 10/11

    Подробности о просмотре видео внутри письма можно узнать в этой статье.

    Размеры экранов и разрешение

    iPhone 8iPhone 8 Plus
    Размер эрана4.7 inches5.5 inches
    Разрешение1337×7501920×1080
    Плотность пикселей326 ppi401 ppi
    Коэффициент плотности пикселей23

    «Восьмёрки» имеют такой же размер и разрешение, как и их предшественники. Поэтому все медиазапросы, которые работали на iPhone 7 и iPhone 7 Plus, подойдут новым iPhone 8 и iPhone 8 Plus.

    iPhone 8 (крупный план):

    @media screen and (max-device-width: 320px) and (max-device-height: 568px) { /* Insert styles here */ }

    iPhone 8 (стандартный просмотр) and iPhone 8 Plus (крупный план):

    @media screen and (max-device-width: 375px) and (max-device-height: 667px) { /* Insert styles here */ }

    iPhone 8 Plus (стандартный просмотр):

    @media screen and (max-device-width: 414px) and (max-device-height: 776px) { /* Insert styles here */ }

    Экран у iPhone X длиннее, чем у iPhone 8 Plus. Обычно изменения физических параметров экрана влияют на мобильную адаптацию макета.

    Дисплей 4.7″ vs. дисплей iPhone X
    iPhone X
    Размер эрана5.8 inches
    Разрешение2436×1125
    Плотность пикселей458 ppi
    Коэффициент плотности пикселей3

    Но емейл-маркетологи могут вздохнуть с облегчением: ширина экранов осталась прежней и никаких изменений в медиазапросах не требуется.

    Медиазапрос для iPhone X:

    @media screen and (max-device-width: 375px) and (max-device-height: 812px) { /* Insert styles here */ }

    Увеличение длины экрана даёт дополнительные 20 % свободного места. Теперь в инбоксе видно больше писем, а емейлы отображают больше информации.

    Автомасштабирование на iOS 11

    Проблемы с автомасштабированием появились ещё в iOS 10, и iOS 11 унаследовала их. В новой операционной системе содержимое письма либо смещается, либо меняет масштаб.

    Пример смещения емейла на iOS 11

    Дополнительный метатег в разделе <head> в коде письма решает эту проблему:

    <meta name="x-apple-disable-message-reformatting">

    Оптимизация для экранов с высокой плотностью пикселей

    iPhone X получил дисплей Super Retina c разрешением 2436×1125 пикселей, или 458 пикселей на дюйм. Этот дисплей обладает самой высокой плотностью пикселей среди всех айфонов.
    Сейчас проблема оптимизации изображений под Retina стоит как никогда остро. Если разработчики проигнорируют это, изображения в письме будут выглядеть нечёткими и мозаичными.

    Неоптимизированное vs. Retina-оптимизированное изображение

    Если создавать изображения с двух- и трёх- (iPhone X и линейка Plus) кратным коэффициентом масштабирования, время загрузки увеличится. Пользователи будут раздражены и негативно настроены.
    Старайтесь использовать инструменты для оптимизации изображений, которые сохранят качество при незначительном увеличении размера файла.

    CSS-хаки на iOS

    В 2016 году Реми Парментир обнаружил возможность использовать директиву @supports в CSS для таргетирования iOS.
    Чтобы применить стилевые свойства только на iOS-устройствах, добавьте директиву @supports и пропишите в ней стилевое свойство -webkit-overflow-scrolling. Все остальные устройства проигнорируют данные стилевые свойства.
    iOS 11, в отличие от младших версий, поддерживает задание цвета в формате #RGBA. Чтобы применить стилевые свойства только для iOS 11 (и выше), поставьте после решётки (#) 4 символа (вместо стандартных 6 или сокращённых 3) в директиве @supports.

    Пример медиазапроса с таргетированными iOS  10 и iOS 11:

    @supports (-webkit-overflow-scrolling:touch) and (color:#ffff) {
    /* Insert CSS here */
    }

    Источник: litmus.com

    Несмотря на доминирование Android (более 80 %) на мобильном рынке, устройства на iOS популярны среди активных интернет-пользователей. Важно заботиться о корректном отображении писем на них.

    1. Retina-адаптация
      Подавляющее большинство экранов сейчас делают с повышенной плотностью пикселей — обеспечьте чёткость ваших картинок в письме.
    2. Медиазапросы
      Год назад их поддержку анонсировал Gmail.com. Mail.ru — в этом году.
      При вёрстке емейл-сообщений учитывайте почтовых провайдеров, которые не поддерживают медиазапросы. Для них подойдёт блочная адаптация. Сейчас в вёрстке писем происходит то же, что в начале 2000-х происходило в веб-вёрстке, — используются таргетированные медиазапросы и хаки. Они позволяют применять те или иные стилевые свойства только для конкретного почтового клиента, тем самым обеспечивая приемлемое отображение на любых платформах, вне зависимости от уровня поддержки CSS.

    Антон Чирков

    руководитель отдела разработки, EMAILMATRIX

    Поделиться статьёй
    Подписаться на рассылку