Учебник: CSS фиксированное позиционирование в интерактивной электронной почте

  1. Замочить мяч
  2. Абсолютное позиционирование с использованием полей
  3. Выявить эффект прокрутки
  4. Запасы и Причуды Обработки
  5. Причудка: исчезающий баскетбол
  6. Причудливый: iOS Mail Cache
  7. Проверьте код!
  8. Вы любите инновационную электронную почту?
  9. Автор: Алекс Ильхан

В своей предыдущей статье   Что нужно знать о фиксированном позиционировании CSS в электронной почте   Джастин рассказал, как фиксированная позиция может использоваться в электронных письмах, и каковы некоторые из их причуд, особенно в почтовом клиенте iOS

В своей предыдущей статье Что нужно знать о фиксированном позиционировании CSS в электронной почте Джастин рассказал, как фиксированная позиция может использоваться в электронных письмах, и каковы некоторые из их причуд, особенно в почтовом клиенте iOS.

Эта статья демонстрирует забавный пример, который мы создали, и покажет, как вы можете создать свою собственную интерактивную электронную почту, которая использует преимущества фиксированного позиционирования.

Замочить мяч

Принимая вдохновение из электронной почты Taco Bell в его предыдущая статья Джастин придумал электронное письмо, в котором используется фиксированное позиционирование, чтобы помочь даже таким фанатам электронной почты, как Майкл Джордан. Прокручивая электронную почту, получатель заставляет баскетбол падать сквозь облака, обруч и в мусорное ведро. Естественно, этот пример работает только в клиентах, которые поддерживают фиксированное позиционирование - iOS и клиент Samsung Android.

Отправьте себе пример здесь ,

Этот пример также имеет дополнительный сюрприз в том, что ура Swoosh! и да! появляются так же, как мяч проходит через обруч.

Как и в примере с Taco Bell, базовый дизайн начинается с 3 слоев. Фоновый слой, средний слой с баскетболом и передний слой с облаками и баскетбольной сеткой. Слой фона и переднего плана имеет «абсолютное позиционирование» (в кавычках, потому что мы не используем position: absolute), тогда как баскетбольный слой имеет фиксированное положение, поэтому мяч остается в фиксированном положении на экране, в то время как сцена прокручивается, когда пользователь прокручивает электронная почта.

Абсолютное позиционирование с использованием полей

В электронной почте Taco Bell использовалась позиция: абсолютная, которая поддерживается iOS и большинством клиентов webkit. Однако необъяснимо это не поддерживается почтовым клиентом Samsung android , Поэтому мы прибегаем к изящному трюку, созданному нашим другом Марком Роббинсом, который использует поля для абсолютно точного позиционирования элементов.

Направляйтесь к Блог Rebelmail если вы хотите прочитать мельчайшие детали этого. Само собой разумеется, что мы применяем эту технику к нижнему и верхнему слою, чтобы верхний слой располагался поверх нижнего.

<стиль> # фон, # передний план {позиция: относительная; топ: 0px; макс высота: 0px; Переполнение: видимый; Дисплей: встроенный блок; } </ style> <div style = "position: относительный; высота: 1212px; ширина: 550px;"> <div id = "background" style = "z-index: 200;"> <img src = "https: / /.../bball-background.png "style =" display: block; "> </ div> <div id =" fixedlayer "style =" z-index: 300; позиция: фиксированная; верх: 200px; "> <img src = "https: //.../bball-tall.png"> </ div> <div id = "foreground" style = "z-index: 400;"> <img src = "https: / /.../bball-foreground.png "style =" display: block; "> </ div> </ div>

Выявить эффект прокрутки

Выявление приветствий, когда мяч входит в обруч, требует добавления еще двух слоев под начальными 3 слоями. Один слой абсолютно позиционирован с Swoosh и Да! cheers расположены рядом с обручем и другим слоем между cheers и фоном, который содержит блокирующий слой с прозрачными квадратами. Слой блокировки фиксируется (так что он остается в том же положении), как баскетбол. Квадраты расположены так, что они появляются с обеих сторон баскетбольного мяча. На изображении ниже слой блокировщика затемнен, чтобы показать эффект блокирования.

Когда баскетбольный мяч проходит через обруч, прозрачные квадраты проходят над крутым словом, и слово появляется!

Используя эту же технику, вы можете создавать электронные письма «охоты за сокровищами», в которых могут быть сделаны специальные коды, которые появятся после того, как получатель прокрутит письмо до определенной позиции.

Запасы и Причуды Обработки

Поскольку единственными клиентами, поддерживающими фиксированное позиционирование, являются те, которые поддерживают медиазапросы, мы изначально скрываем весь контейнер и показываем запасной контент. Затем в медиа-запросе максимальной ширины устройства мы скрываем резервный контент и показываем интерактивный контент. Это работает для iOS Mail и некоторых версий Android.

<style> @media (max-device-width: 1024px) {.kinetic {display: block! важный; Макс высота: доли не важно; } .fallback {display: none! важный; }} </ style> <div class = "fallback"> Если бы вы работали в более прохладном почтовом клиенте, вы могли бы ... Dunk the Ball! </ div> <div class = "kinetic" style = "display: none ; max-height: 0; переполнение: скрыто; "> ... интерактивный контент ... </ div>

Как описано в нашем предыдущая статья о фиксированном позиционировании iOS имеет несколько причуд, когда речь идет о фиксированном позиционировании, которое мы должны принять во внимание. Обязательно ознакомьтесь с этими причудами, если вы решите поэкспериментировать с фиксированным позиционированием в электронной почте. Вот еще пара, которую мы нашли с этим письмом.

Причудка: исчезающий баскетбол

По какой-то причине, после того, как пиксель отслеживания, добавленный нашим ESP, заканчивает загрузку (30-60 секунд), баскетбол исчезнет! Мы не смогли найти способ обойти эту ошибку, и мы не можем удалить пиксель отслеживания. Тем не менее, 30 секунд - это примерно столько, сколько просматривают большинство писем. Если мы найдем решение для этого, мы дадим вам знать!

Причудливый: iOS Mail Cache

Если приложение Почта получателя было открыто в течение длительного времени, электронная почта может загружаться неправильно. Обычно это приводит к тому, что баскетбол отображается слишком высоко в электронном письме и прячется за верхним текстовым блоком вместо того, чтобы оставаться зафиксированным в центре экрана. Это можно исправить, убив приложение (дважды нажав кнопку «Домой», перетащите приложение «Почта» за пределы экрана), а затем снова открыв письмо. Это еще один вариант, для которого мы ищем исправления, и мы сообщим вам, если мы это выясним.

Проверьте код!

Пришли себе пример ,

См код ,

Вы любите инновационную электронную почту?

Присоединяйтесь к сообществу EOA и получайте доступ к официальным документам, шаблонам и целому сообществу фанатов электронной почты единомышленников!

Присоединяйтесь к сообществу EOA и получайте доступ к официальным документам, шаблонам и целому сообществу фанатов электронной почты единомышленников

Автор: Алекс Ильхан

Приветствуя весь путь из Англии, Алекс привносит свой опыт разработки электронной почты вместе с бесконечным потоком чашек чая и британского цинизма. Следуйте за ним в Твиттере: @omgitsonlyalex.