[Перевод] Режим читателя: Пагинация в мобильных email-письмах
В блоге FreshInbox опубликован пост об интересной экспериментальной техники реализации пагинации в письмах мобильных почтовых рассылок. Ее использование позволяет создавать письма, получатели которых могут перемещаться по контенту без необходимости скроллинга.
Развитие адаптивного дизайна сделало чтение писем на мобильных устройствах легче. С другой стороны, побочным эффектом стал тот факт, что для чтения «массивных» писем теперь нужно много скроллить. В итоге до конца послания добираются только самые стойкие читатели. Если дать людям возможность быстрой навигации по письму, это бы значительно улучшило ситуацию.
Описываемая техника работает только в почтовом приложении Mail для iPhone (версия для Android в разработке).
Режим читателя
Описываемая техника позволяет пользователю самостоятельно контролировать контент письма — с помощью специальной кнопки письмо трансформируется в версию для чтения, разделенную на несколько страниц, к которым можно получить доступ с помощью клика.Активация
Кнопка для включения «режима читателя» обернута в ярлык, который переключает чекбокс с помощью id ячейки навигации. Для отображения элементов в этом режиме используется псевдокласс :checked, меню в верху панели установлено в position:fixed:
...hidden toolbar content ...
article1, article2, article3...
Пагинация статей
Статьи обернуты в два контейнера. Когда активируется селектор :checked, внешний контейнер отображает контент на полную ширину и высоту видимой области экрана. Внешний контейнер также устанавливается на фиксированном значении в верхней части email-сообщения минус пространство, занимаемое меню.
Внутренний контейнер занимает ширину видимой области умноженной на число статей. Статьи также занимают ширину в viewport и сдвигаются влево. Это позволяет упорядочить их в горизонтальной позиции, отображая одну статью за раз.
Затем создается радио-элемент для каждой статьи, когда селектор :checked устанавливается в определенный радио-элемент, внутренний контейнер сдвигается влево или вправо на число «ширин крана» (vw) каждой статьи. Добавление перехода позволяет добиться «эффекта скольжения» при перелистывании статей:
#navbox:checked ~ #a1radio:checked ~ .articles-cont .articles{
left:0px;
}
#navbox:checked ~ #a2radio:checked ~ .articles-cont .articles{
left:-100vw;
}
#navbox:checked ~ #a3radio:checked ~ .articles-cont .articles{
left:-200vw;
}
Величина vw не работает на Android, поэтому придется располагать статьи одну над другой и показывать нужную, пряча или изменяя ее z-индекс.Перемещение по статьям
Для перемещения по статьям создадим ярлыки стрелок, которые будут при нажатии активировать нужный радио-элемент. Эти ярлыки по-умолчанию скрыты и отображается только пара, связанная с видимой в данный момент статьей.
Индексное меню статей
Индексное меню содержит список ярлыков, связанных со статьями в скрытом и абсолютно спозиционированном диве (div) и отображается, когда пользователь кликает на меню, с помощью селектора :hover.
Интересный момент, часто, если меню скрывается сразу после выбора элемента, почтовый клиент просто игнорирует сделанный выбор. Справиться с этой проблемой можно, добавив переход и задержку.
Код
Поработать с кодом примера можно в билдере одного из почтовых сервисов. В текстовом виде он представлен под спойлером:
Код примера
FreshInbox
Yahoo! Mail Fixes Media Query Bug. Yahoo!!!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Outlook.com and Background Images
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Gmail iOS Increases Email Font Sizes – Again
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Другие материалы о верстке писем в блоге «Печкина»:
