Что нужно знать емейл-маркетологам о новых айфонах и 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, если превью не было задано, в письме отображался первый кадр видео.
Подробности о просмотре видео внутри письма можно узнать в этой статье.
Размеры экранов и разрешение
| iPhone 8 | iPhone 8 Plus | |
|---|---|---|
| Размер эрана | 4.7 inches | 5.5 inches |
| Разрешение | 1337×750 | 1920×1080 |
| Плотность пикселей | 326 ppi | 401 ppi |
| Коэффициент плотности пикселей | 2 | 3 |
«Восьмёрки» имеют такой же размер и разрешение, как и их предшественники. Поэтому все медиазапросы, которые работали на 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. Обычно изменения физических параметров экрана влияют на мобильную адаптацию макета.
| 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 унаследовала их. В новой операционной системе содержимое письма либо смещается, либо меняет масштаб.
Дополнительный метатег в разделе <head> в коде письма решает эту проблему:
<meta name="x-apple-disable-message-reformatting">Оптимизация для экранов с высокой плотностью пикселей
iPhone X получил дисплей Super Retina c разрешением 2436×1125 пикселей, или 458 пикселей на дюйм. Этот дисплей обладает самой высокой плотностью пикселей среди всех айфонов.
Сейчас проблема оптимизации изображений под 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 популярны среди активных интернет-пользователей. Важно заботиться о корректном отображении писем на них.
- Retina-адаптация
Подавляющее большинство экранов сейчас делают с повышенной плотностью пикселей — обеспечьте чёткость ваших картинок в письме.- Медиазапросы
Год назад их поддержку анонсировал Gmail.com. Mail.ru — в этом году.
При вёрстке емейл-сообщений учитывайте почтовых провайдеров, которые не поддерживают медиазапросы. Для них подойдёт блочная адаптация. Сейчас в вёрстке писем происходит то же, что в начале 2000-х происходило в веб-вёрстке, — используются таргетированные медиазапросы и хаки. Они позволяют применять те или иные стилевые свойства только для конкретного почтового клиента, тем самым обеспечивая приемлемое отображение на любых платформах, вне зависимости от уровня поддержки CSS.Антон Чирков
руководитель отдела разработки, EMAILMATRIX
