Development of responsive design make reading emails on mobile devices easier. On the other hand, the side effect is the fact that to read the massive letters now you need a lot of scrolling. As a result, to the end of the message get only the most persistent readers. If you give people the ability to quickly navigate through email, it would greatly improve the situation.
The described technique works only in the email application Mail for iPhone (Android version in development).
Reader mode
The described technique allows the user to independently control the content of the letter – with a special button letter transforms in version for reading divided into several pages that can be accessed with a click.
Activation
A button to enable “reader mode” is wrapped in a label that switches the checkbox with the id of the cell navigation. To display items in this mode, use the pseudo-class :checked, the menu in the top of the panel is set to position:fixed:
<style>
.toolbar-container{
position:fixed;
top:0px; left:0px;
display:none;
...
}
#navbox:checked ~ .toolbar-container{
display:block!important;
}
#navbox:checked ~ .articles-container{
height:100%;
overflow:hidden;
position:fixed;
top:50px;
left:0px;
}
</style>
<input id="navbox" type="checkbox">
<label for="navbox" >Activate Reader Mode</label>
<div class="toolbar-container">...hidden toolbar content ... <div>
<div class="articles-container">
article1, article2, article3...
</div>
Pagination of articles
Article wrapped in two containers. When activated the selector :checked, outer container displays the content on the full width and height of the visible area of the screen. The outer container is also set at a fixed value at the top of email messages minus the space occupied by the menu.
The inner container occupies the width of the visible area multiplied by the number of articles. Articles also occupy a width in the viewport and shifted to the left. This allows you to organize them in a horizontal position, displaying one article at a time.
Then you create a radio-element for each article, when the selector :checked is set in a certain radio-element, the inner container is shifted left or right by the number of “width crane” (vw) of each article. Adding a transition allows for the “sliding effect” while browsing articles:
#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;}
The value of vw does not work on Android, so you’ll have to arrange the articles one above the other and show the right, hiding or changing its z-index.
Moving on articles
To navigate through the articles, create labels of arrows, which will be activated by clicking the appropriate radio-element. These labels are hidden by default and displayed only a couple associated with the currently visible article.
<style>#navbox:checked ~ #a1radio:checked ~ .toolbar-cont .a1nav,#navbox:checked ~ #a2radio:checked ~ .toolbar-cont .a2nav,#navbox:checked ~ #a3radio:checked ~ .toolbar-cont .a3nav{ display:block;}</style> <div class="nav-arrows a1nav"> <label> </label><label for="a2radio">»</label></div><div class="nav-arrows a2nav"> <label for="a1radio">«</label><label for="a3radio">»</label></div><div class="nav-arrows a3nav"> <label for="a2radio">«</label><label> </label></div>Index menu of articles
Index menu contains a list of labels associated with articles in a hidden and absolutely positioned div, and is displayed when the user clicks on a menu, use the selector :hover.
Interesting point, often if the menu is hidden right after selecting the element, the mail client just ignores the selection. To cope with this problem you can add the transition and delay.
Code
To work with the code of the example you can in the builder of one of the email services. In text form it is presented under the spoiler:
The code of the example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
* {
margin:0;
padding:0;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.5;
color:#333333;
}
img{
max-width:100%;
}
body {
-webkit-text-size-adjust:none;
width: 100%!important;
height: 100%;
}
h1,h2{
margin-bottom:15px;
line-height: 1.3;
font-weight:300;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 22px;
}
.toolbar-cont{
max-height:none!important;
overflow:visible!important;
z-index:10;
width:100%;
position:fixed;
top:0px;
left:0px;
display:none;
height:50px;
background-color:#eeeeee;
border-bottom:1px solid #222222;
}
.toolbar{
height:50px;
line-height:50px;
display:block;
text-decoration:none;
}
.toolbar-menu{
z-index:10;
text-align:center;
position:absolute;
top:51px;
overflow:hidden;
transition: all 0.3s;
-webkit-transition: all 0.3s;
transform: rotateX(90deg);
-webkit-transform: rotateX(90deg);
transform-origin: top;
-webkit-transform-origin: top;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.toolbar-menu label{
display:block;
padding:5px 20px 5px 20px;
}
.toolbar:hover + .toolbar-menu{
display:block;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
}
.articles-cont{
background-color:#ffffff;
}
#navbox:checked ~ .articles-cont{
width:100%;
height:100%;
overflow:hidden;
position:fixed;
top:50px;
left:0px;
}
#navbox:checked ~ .articles-cont .articles{
position:absolute;
left:0px;
width:303vw;
transition: all 0.3s;
-webkit-transition: all 0.3s;
height:100%;
}
#navbox:checked ~ .articles-cont .articles .art{
width:100vw;
float:left;
height:1000px;
overflow:hidden;
}
#navbox:checked ~ .articles-cont .articles .art div{
width:90vw;
padding:20px 5vw 10px 5vw;
}
input{
max-height:0;
display:none;
}
.nav-arrows{
float:right;
display:none;
}
.nav-arrows label{
cursor:pointer;
display:inline-block;
vertical-align:middle;
text-align:center;
height:50px;
width:50px;
font-size:30px;
font-weight:bold;
}
#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;
}
#navbox:checked ~ #a1radio:checked ~ .articles-cont .a1,
#navbox:checked ~ #a2radio:checked ~ .articles-cont .a2,
#navbox:checked ~ #a3radio:checked ~ .articles-cont .a3{
height:100%;
overflow-y:scroll;
}
#navbox:checked ~ #a1radio:checked ~ .toolbar-cont .a1nav,
#navbox:checked ~ #a2radio:checked ~ .toolbar-cont .a2nav,
#navbox:checked ~ #a3radio:checked ~ .toolbar-cont .a3nav{
display:block;
}
.closer{
display:inline-block;
vertical-align:middle;
text-align:center;
height:50px;
width:50px;
font-size:30px;
font-weight:bold;
float:left;
}
#navbox:checked ~ .opener{
display:none;
}
#navbox:checked ~ .toolbar-cont{
display:block!important;
}
@media screen and (max-width: 480px) {
#cbox-capable:checked ~ .opener div{
margin:10px auto;
background-color:#1abc9c;
color:#ffffff;
border-radius:5px;
display: block !important;
max-height:50px !important;
line-height:50px;
text-align:center;
vertical-align:middle;
}
}
</style>
</head>
<body>
<div id="main-cont" style="padding:20px;">
<h1>FreshInbox</h1>
<div style="dislay:block;width:350px;margin:0px auto;max-width:100%">
<img src="http://placehold.it/350x150">
</div>
<!--[if !mso 9]><!-->
<input id="cbox-capable" type="checkbox" style="display:none!important;max-height:0;visibility:hidden;" checked>
<input id="navbox" type="checkbox" style="display:none!important;max-height:0;visibility:hidden;">
<label for="navbox" class="opener">
<div style="display:none;max-height:0px;overflow:hidden;cursor:pointer">Reader Mode</div></label>
<input id="a1radio" name="qradio" type="radio" checked style="display:none!important;max-height:0;visibility:hidden;">
<input id="a2radio" name="qradio" type="radio" style="display:none!important;max-height:0;visibility:hidden;">
<input id="a3radio" name="qradio" type="radio" style="display:none!important;max-height:0;visibility:hidden;">
<div class="toolbar-cont" style="display:none;max-height:0px;overflow:hidden;">
<label for="navbox" class="closer">x</label>
<div class="nav-arrows a1nav">
<label> </label><label for="a2radio">»</label>
</div>
<div class="nav-arrows a2nav">
<label for="a1radio">«</label><label for="a3radio">»</label>
</div>
<div class="nav-arrows a3nav">
<label for="a2radio">«</label><label> </label>
</div>
<a href="#" class="toolbar">Article Index...</a>
<div class="toolbar-menu" style="text-align:left;background-color:#C8DEFA;border:1px solid #888888;font-size:15px;">
<label for="a1radio">Yahoo! Mail Fixes Media Query Bug. Yahoo!!!</label>
<label for="a2radio">Outlook.com and Background Images</label>
<label for="a3radio">Gmail iOS Increases Email Font Sizes – Again</label>
</div>
</div>
<!--<![endif]-->
<div class="articles-cont">
<div class="articles">
<div class="art a1"><div>
<h2>Yahoo! Mail Fixes Media Query Bug. Yahoo!!!</h2>
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.
<HR>
</div></div>
<div class="art a2"><div>
<h2>Outlook.com and Background Images</h2>
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.
<HR>
</div></div>
<div class="art a3"><div>
<h2>Gmail iOS Increases Email Font Sizes – Again</h2>
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.
<HR>
</div></div>
</div>
</div>
</div>
</body>
</html>
<b>
This text is a translation of the article “Режим читателя: Пагинация в мобильных email-письмах” published by @lol_wat on habrahabr.ru.
About the CleanTalk service
CleanTalk is a cloud service to protect websites from spam bots. CleanTalk uses protection methods that are invisible to the visitors of the website. This allows you to abandon the methods of protection that require the user to prove that he is a human (captcha, question-answer etc.).
