Учебник: 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.

Похожие

Как вы проверяете производительность жесткого диска?
Как вы проверяете производительность жесткого диска? Последнее изменение: 02.11.2016, Автор статьи: Вальдемар Миотк Все данные, которые хранятся на нашем компьютере, в большинстве случаев хранятся на жестком диске. У большинства компьютеров есть только один такой диск, хотя вы можете легко добавить больше. Повреждение жесткого диска
Вы используете Gmail? Meet Inbox - новое приложение для управления электронной почтой от Google
... IOS , Однако, как и в случае запуска Gmail рынка услуг, доступ к Inbox ограничен. Для получения доступа, пожалуйста, отправьте запрос на inbox@google.com и ... наберись терпения. Нам это удалось, и мы не очень сожалеем об этом! :) Я приглашаю вас на мой подкаст! Главным героем каждого эпизода
50 факторов на месте - влияющих на позиционирование сайта
По словам самого Google, существует более 200 различных факторов, влияющих на позиционирование страниц в результатах поиска. Деятельность, связанная с позиционированием, не может быть сведена только к получению ссылок и размещению любого контента на сайте. Сегодня мы решили опубликовать список из 50 факторов, связанных с позиционируемым доменом и содержанием контента, размещенного
Как принимать платежи PayPal без ввода адреса электронной почты
У вас есть учетная запись PayPal и вы хотите, чтобы другим было проще вносить деньги в ваш кошелек? Или, может быть, вы хотите скрыть адрес электронной почты? Мы можем создать собственную ссылку, которая после нажатия сразу отправляет клиента на платеж к нашему аккаунту, без необходимости делиться вашим адресом электронной почты.
Феномен рассвета или эффект Сомоги? Какая разница?
Вы просыпаетесь утром и измеряете уровень сахара в крови перед завтраком. И это высоко. Выше, чем обычно утром. Что происходит? Там может быть две причины. Как явление рассвета, так и эффект Сомоги могут поднять уровень глюкозы в крови утром натощак, но по разным причинам. Оба
FAQ Хостинг Вам нужна помощь? - ОВХ
Хостинг Как установить несколько сайтов на одном хостинге? Как создать сайт? Как опубликовать сайт на хостинге? Как войти на хостинг через FTP? Как мне изменить пароль FTP? Что делать, если у вас проблемы с FTP? Я получил сообщение об ошибке. Что это значит? 404 Эта ошибка возникает, когда вы хотите войти на страницу, которая не существует. Также возможно, что адрес сайта был введен неправильно. 403
... iOS 10, iOS 11 или последней версии iOS 12 по беспроводной сети, обновление iOS вообще не отображает...
... iOS 10, iOS 11 или последней версии iOS 12 по беспроводной сети, обновление iOS вообще не отображается в настройках или появляется сообщение «Невозможно проверить наличие обновлений». Произошла ошибка при проверке обновления программного обеспечения. »? Проверьте шаги в этом посте, чтобы исправить их легко. От iMobie | Опубликовано: 06 сентября 2018, Последнее обновление: 07 сентября 2018 Не удается выполнить обновление программного
Невозможно войти в бэкэнд Magento
Изменено 15 декабря 2012 г. Написано 02 февраля 2010 Когда вы переносите свой веб-сайт Magento из другого местоположения или меняете доменное имя, под которым он работает, вы можете столкнуться с проблемой, из-за которой вы больше не можете войти в админ-панель Magento. Вот различные решения этой проблемы. Автор Jisse Reitsma, основатель Yireo, разработчик Magento Master 2017, тренер разработчиков
Norton - одно из старейших имен в области безопасности ПК, и, несмотря на некоторые взлеты и падени...
Norton - одно из старейших имен в области безопасности ПК, и, несмотря на некоторые взлеты и падения, оно остается одним из лучших. В настоящее время Symantec предлагает несколько версий своего долгоживущего антивирусного программного обеспечения. Norton Security Premium , который стоит 110 долларов в год. После этого Нортон Делюкс ($ 90 / год),
Дешевое позиционирование - самим миром SEO - zgred.pl
Некоторое время назад я опубликовал две записи, которые обсуждали тему затрат на позиционирование. Первая запись должна была подчеркнуть тот факт, что дешевое позиционирование не дешево. это сколько стоит позиционирование? зависит от многих факторов - в том числе от объема работы, которую отправитель должен потратить на выполнение отдельных задач, включая свою собственную работу. Вторая запись, немного
Планируете ли вы начать продавать в интернете? Подумай внимательно.
Отчет eCommerce 2016 Barometer показывает, что стоимость польского рынка электронной коммерции через пять лет может удвоиться. Звучит очень оптимистично, поэтому неудивительно, что в 2016 году интернет-магазин стал вторым по популярности бизнесом в Польше. Если вы также решили развивать свой бизнес в Интернете

Комментарии

Вы пытаетесь пойти по доступным ценам, потому что вы должны, потому что вы хотите, или потому что вы действительно думаете, что получите хороший дизайн?
Вы пытаетесь пойти по доступным ценам, потому что вы должны, потому что вы хотите, или потому что вы действительно думаете, что получите хороший дизайн? Здесь нет правильного ответа, но вы должны точно знать, что предлагает 99designs. Для многих людей это именно то, что им нужно. Это приносит дизайн в рамках бюджета. Для других не так уж и много. Это целенаправленное мошенничество с 99designs , но не все равно.
Вы хотите издать книгу, но не знаете, с чего начать?
Вы хотите издать книгу, но не знаете, с чего начать? Или, может быть, вы не удовлетворены современными реалиями традиционного издания и хотите взять дело в свои руки, но боитесь ли вы сделать первый шаг? В ближайшие недели я постараюсь рассказать об этом самым простым и понятным способом. Пошагово покажите путь от готовой рукописи в ящике стола до полки в книжном магазине, не обязательно физической. Мы поговорим о различиях между традиционным изданием и самоизданием, и
Знаете ли вы, что InMotion может сбросить ваши учетные данные, если вы их забыли?
Знаете ли вы, что InMotion может сбросить ваши учетные данные, если вы их забыли? ), cpanel или phpmyadmin из J! установки, вы можете легко установить «Пароль по умолчанию Joomla». Выполните следующие действия, чтобы получить доступ к администратору, если вы забыли учетные данные для входа. На CollectiveRay мы пишем блоги веб-дизайна для веб-мастеров и пользователей сайта. Подпишитесь или следите за нашими страницами, чтобы оставаться
Вы хотите описать свою работу или о чем вы обычно говорите с клиентами?
Вы хотите описать свою работу или о чем вы обычно говорите с клиентами? Вы можете разместить его на сайте без проблем. Фотографии из студии, описание оборудования, объектов, видов услуг, возможность прямого контакта ... Ваши будущие клиенты это оценят! Вы присутствуете в социальных сетях? Вы можете отправлять людей обратно на свой сайт без каких-либо проблем. Ваш собственный адрес сайта также выглядит профессионально.
Вы получили этот маленький прилив допамина, когда вы перезагрузили страницу?
Вы получили этот маленький прилив допамина, когда вы перезагрузили страницу? С этими изменениями наш тест снова проходит. Наш новый код эффективно сравнивает прямую и обратную строки и возвращает true, если строка одинакова вперед и назад, и false в противном случае. Этот код является чистой функцией, потому что он просто делает одну вещь, и делает это последовательно, учитывая постоянное входное значение, не создавая никаких побочных эффектов, не внося никаких изменений
К сожалению, даже бесплатные платформы электронной коммерции «Открытый код» не является хорошим решением для всех, почему?
К сожалению, даже бесплатные платформы электронной коммерции «Открытый код» не является хорошим решением для всех, почему? Время и стоимость внедрения платформы Прежде всего, запуск полнофункционального интернет-магазина на основе открытых источников - бесплатные инструменты требуют много времени. Если у вас есть основы программирования, то это будет лишь жертвой вашего времени, но если вы занимаетесь «зеленой» тематикой, вам наверняка придется
Вы женаты сейчас, что вы купите для маона?
Вы женаты сейчас, что вы купите для маона? Вы хотите быть идеальным в каждом дюйме, поэтому вы ищете что-то действительно уникальное. К сожалению, это идет так много, потому что время летит, время и множество идей медленно истекают. Это, очевидно, нормальная вещь, но вам абсолютно не о чем беспокоиться. В этой сложной ситуации вы можете рассчитывать на вмешательства подарочных супергероев из интернет-магазина MyGiftDNA. С их помощью, идея подарка для этого будет найдена быстро. Добро пожаловать!
Может быть, вы знаете топ-3 или даже топ-5 социальных сетей, но знаете ли вы, что происходит за ними?
Может быть, вы знаете топ-3 или даже топ-5 социальных сетей, но знаете ли вы, что происходит за ними? Мы поддерживаем список 15 самых популярных социальных сетей в мире . Новые социальные сети приходят и уходят, но они выдержали испытание временем. Мы обновляем этот список сайтов социальных сетей новыми данными по мере их появления. Данные в этом списке объединяют посетителей социальных сетей по всему миру и США. Фактические числа ежемесячных посетителей собираются с разных
Вы мечтаете об одном из ультрамобильных ноутбуков Surface и имеете ли вы компанию?
Вы мечтаете об одном из ультрамобильных ноутбуков Surface и имеете ли вы компанию? У вас также есть возможность совершить отличные покупки, которые вы также включите в стоимость! Microsoft Surface для компаний - да, я слышал об этой идее очень давно, но только сейчас настал момент для настоящих бетонов. Гигант из Редмонда и его польское отделение в сотрудничестве с польским магазином X-KOM предлагает возможность удобного лизинга своих самых востребованных компьютеров из линейки Surface! Таким
Вы когда-нибудь вносили какие-то изменения в свой код, а потом обнаружили, что он вызвал что-то еще?
Вы когда-нибудь вносили какие-то изменения в свой код, а потом обнаружили, что он вызвал что-то еще? Я уверен, что большинство из нас есть. Это почти неизбежно, особенно когда у вас больше кода. Одна вещь зависит от другой, и тогда ее изменение нарушает что-то другое. Но что, если этого не произошло? Что если бы у вас был способ узнать, когда что-то сломалось в результате какого-то изменения? Это было бы здорово. Вы можете изменить свой код, не беспокоясь о том, что
Или, может быть, вы хотите скрыть адрес электронной почты?
Или, может быть, вы хотите скрыть адрес электронной почты? Мы можем создать собственную ссылку, которая после нажатия сразу отправляет клиента на платеж к нашему аккаунту, без необходимости делиться вашим адресом электронной почты.

Вы любите инновационную электронную почту?
Как вы проверяете производительность жесткого диска?
Или, может быть, вы хотите скрыть адрес электронной почты?
Феномен рассвета или эффект Сомоги?
Какая разница?
Что происходит?
Как создать сайт?
Как опубликовать сайт на хостинге?
Как войти на хостинг через FTP?
Как мне изменить пароль FTP?