Website adaptive layout
Website adaptive layout allows pages automatically adapt to the screens of tablets and smartphones. Mobile internet traffic increases year by year. In order to process this traffc, you need to offer the users an adaptive website with a convenient interface.
Search engine systems use a range of criteria for evaluating website adaptiveness while visiting via mobile devices. Google tries to simplify the use of the Internet for mobile users by marking mobile-adaptive websites with a special note mobile-friendly. Yandex also has an algorithm that outputs websites with a mobile/adaptive version for users in mobile search.
What is an adaptive layout?
The adaptive layout means the absence of a horizontal scroll bar and scaled areas when viewed on any device, readable text and large areas for clickable elements. With the help of media queries, you can manage the layout and location of blocks, rebuilding the template so that it adapts to different screens.
For responsive design, the width of the main container is set in %, while it can be equal to both 100% of the browser window width or less. The width of the grid columns is also set in %. In an adaptive design, the width of the main container and the grid columns are fixed with values in px.
The technique of adaptive rubber layout considered in this lesson will work fine on a two-column template, making the website responsive and easy-to-view on mobile devices. The template means different compositing of the pages’ main content. In this article, I want to analyze and make sense of the main page layout.
Home page layout
The webpage includes three main blocks: a header, a wrapper container for the main content and sidebar, and a footer. As the design trigger points, let’s take 768px and 480px.
At the first point, we hide the top menu and move the sidebar under the container with posts. At the second point, we will change the layout of the header elements, cancel the positioning of the socials in posts and cancel the footer columns alignment.
1. Meta Tags and <head> section
1) Add the necessary files to the <head> section – a link to the used fonts, the jQuery library, and the prefix-free plugin (in order not to write browser prefixes for the properties):
<! DOCTYPE html>
<html>
<head>
<meta charset = “utf-8”>
<meta name = “viewport” content = “width = device-width, initial-scale = 1”>
<title> Adaptive site layout </ title>
<link rel = “stylesheet” type = “text / css” href = “https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic|Playfair+Display:400,700&subset = latin, cyrillic “>
<link rel = “stylesheet” type = “text / css” href = “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css”>
<link rel = “stylesheet” type = “text / css” href = “style.css”>
<script src = “https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js”> </ script>
<script src = “https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js”> </ script>
</ head>
<body>
2. Webpage header
In <header> we place the following container elements:
logo <a class=”logo”>;
Button for toggling the main menu <div class=”nav-toggle”>;
Main menu <ul id=”menu”>;
Website search form <form id=”searchform”>.
<header>
<nav class = “container”>
<a class=”logo” href=””>
<span> L </ span>
<span> o </ span>
<span> G </ span>
<span> o </ span>
</a>
<div class = “nav-toggle”> <span> </ span> </ div>
<form action = “” method = “get” id = “searchform”>
<input type = “text” placeholder = “Search online …”>
<button type = “submit”> <i class = “fa fa-search”> </ i> </ button>
</ form>
<ul id = “menu”>
<li> <a href=””> Blog </a> </ li>
<li> <a href=””> Portfolio </a> </ li>
<li> <a href=””> About the Author </a> </ li>
</ ul>
</ nav>
</ header>
3. The block with a short article content
The article overview will be wrapped in <article id=”post-1″ class=”post”>:
<div class=”container”>
<div class=”posts-list”>
<article id=”post-1″ class=”post”>
<div class=”post-image”><a href=””><img src=”https://html5book.ru/wp-content/uploads/2016/05/rasskaz_slovar_rodnoy_prirodi.jpg”></a></div>
<div class=”post-content”>
<div class=”category”><a href=””>Design</a></div>
<h2 class=”post-title”>Spring</h2>
<p>English is very rich in words relating to the seasons and to natural phenomena associated with them. </ P>
<div class = “post-footer”>
<a class=”more-link” href=””> Continue reading </a>
<div class = “post-social”>
<a href=”” target=”_blank”> <i class = “fa fa-facebook”> </ i> </a>
<a href=”” target=”_blank”> <i class = “fa fa-twitter”> </ i> </a>
<a href=”” target=”_blank”> <i class = “fa fa-pinterest”> </ i> </a>
</ div>
</ div>
</ div>
</ article>
<article id = “post-2” class = “post”>
…
</ article>
</ div> <! – end div class = “posts-list” ->
4. Sidebar
In sidebar <aside>, we will add a list of categories, last notes and the subscribe for e-mail form:
<aside>
<div class = “widget”>
<h3 class = “widget-title”> Categories </ h3>
<ul class = “widget-category-list”>
<li> <a href=””> Design </a> (2) </ li>
<li> <a href=””> Layout </a> (5) </ li>
<li> <a href=””> Video </a> (1) </ li>
</ ul>
</ div>
<div class = “widget”>
<h3 class = “widget-title”> Recent entries </ h3>
<ul class = “widget-posts-list”>
<li>
<div class = “post-image-small”>
<a href=””> <img src = “https://html5book.ru/wp-content/uploads/2016/05/rasskaz_slovar_rodnoy_prirodi.jpg”> </a>
</ div>
<h4 class = “widget-post-title”> Spring </ h4>
</ li>
<li>
<div class = “post-image-small”>
<a href=””> <img src = “https://html5book.ru/wp-content/uploads/2016/05/rasskaz_Russia.jpg”> </a>
</ div>
<h4 class = “widget-post-title”> Summer </ h4>
</ li>
<li>
<div class = “post-image-small”>
<a href=””> <img src = “https://html5book.ru/wp-content/uploads/2016/05/rasskaz_rodnaya_priroda_osen.jpg”> </a>
</ div>
<h4 class = “widget-post-title”> Autumn </ h4>
</ li>
</ ul>
</ div>
<div class = “widget”>
<h3 class = “widget-title”> Newsletter Subscription </ h3>
<form action = “” method = “post” id = “subscribe”>
<input type = “email” name = “email” placeholder = “Your email” required>
<button type = “submit”> <i class = “fa fa-paper-plane-o”> </ i> </ button>
</ form>
</ div>
</ aside>
</ div> <! – end div class = “container” ->
5. Footer
In the footer, we will place copyright, socials, and a link for our email:
<footer>
<div class = “container”>
<div class = “footer-col”> <span> My blog © 2016 </ span> </ div>
<div class = “footer-col”>
<div class = “social-bar-wrap”>
<a title=”Facebook” href=”” target=”_blank”> <i class = “fa fa-facebook”> </ i> </a>
<a title=”Twitter” href=”” target=”_blank”> <i class = “fa fa-twitter”> </ i> </a>
<a title=”Pinterest” href=”” target=”_blank”> <i class = “fa fa-pinterest”> </ i> </a>
<a title=”Instagram” href=”” target=”_blank”> <i class = “fa fa-instagram”> </ i> </a>
</ div>
</ div>
<div class = “footer-col”>
<a href=”mailto:admin@yoursite.ru”> write a letter </a>
</ div>
</ div>
</ footer>
<script>
$ (‘. nav-toggle’). on (‘click’, function () {
$ (‘# menu’). toggleClass (‘active’);
});
</ script>
</ body>
</ html>
6. General CSS styles
General styles, сброс стилей браузера по умолчанию:
*, *: after, *: before {
box-sizing: border-box;
padding: 0;
margin: 0;
transition: .5s ease-in-out; / * add smooth transitions for all page elements * /
}
ul {
list-style: none;
}
a {
text-decoration: none;
outline: none;
}
img {
display: block;
width: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-family: ‘Playfair Display’;
font-weight: normal;
letter-spacing: 1px;
}
body {
font-family: ‘Open Sans’, arial, sans-serif;
font-size: 14px;
line-height: 1;
color: # 373737;
background: # f7f7f7;
}
/ * add stream cleaning for all containers inside which the child elements are wrapped * /
header: after, .container: after, footer: after, .widget-posts-list li: after, #subscribe: after {
content: “”;
display: table;
clear: both;
}
/ * style class that controls the width of the mesh container * /
.container {
margin: 0 auto;
width: 100%;
max-width: 960px;
padding: 0 15px;
}
7. Styles for the cap and its contents
header {
width: 100%;
background: white;
box-shadow: 3px 3px 1px rgba (0,0,0, .05);
padding: 15px 0;
margin-bottom: 30px;
position: relative;
}
/ * logo * /
.logo {
display: block;
float: left;
}
.logo span {
color: white;
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
margin: 5px 0;
text-align: center;
text-shadow: 2px 2px 1px rgba (0,0,0, .4);
}
.logo span: nth-child (odd) {
background: # EF5A42;
}
.logo span: nth-child (even) {
background: # F8B763;
}
/ * menu * /
#menu {
float: right;
}
#menu li {
display: inline-block;
margin-right: 30px;
}
#menu a {
color: # 111;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
display: block;
line-height: 40px;
}
#menu a: hover {
color: # EF5A42;
}
#menu li: last-child {
margin-right: 0;
}
/ * search form * /
#searchform {
float: right;
margin-left: 46px;
display: inline-block;
position: relative;
}
#searchform input {
width: 170px;
float: left;
border: none;
padding-left: 10px;
height: 40px;
overflow: hidden;
outline: none;
color: # 9E9C9C;
font-style: italic;
}
#searchform button {
background: transparent;
height: 40px;
border: none;
position: absolute;
right: 10px;
color: # EF5A42;
cursor: pointer;
font-size: 18px;
}
#searchform input: focus {
outline: 2px solid # EBEBE3;
}
/ * menu switch button that appears with a width of 768px * /
.nav-toggle {
display: none;
position: relative;
float: right;
width: 40px;
height: 40px;
margin-left: 20px;
background: # EF5A42;
cursor: pointer;
}
.nav-toggle span {
display: block;
position: absolute;
top: 19px;
left: 8px;
right: 8px;
height: 2px;
background: white;
}
.nav-toggle span: after, .nav-toggle span:
content: “”;
position: absolute;
display: block;
left: 0;
width: 100%;
height: 2px;
background: white;
}
.nav-toggle span: before {
top: -10px;
}
.nav-toggle span: after {
bottom: -10px;
}
/ * class that will be added to the top menu when you click on the button and show the hidden menu * /
# menu.active {
max-height: 123px;
}
8. Styles for the main content block
/ * left container * /
.posts-list {
margin-bottom: 30px;
width: 64%;
float: left;
}
/ * block for the article * /
.post {
margin-bottom: 35px;
}
.post-content p {
line-height: 1.5;
padding-bottom: 1em;
}
.post-image {
margin-bottom: 30px;
}
.category {
margin-bottom: 15px;
}
.category a {
color: # F8B763;
text-transform: uppercase;
}
.post-title {
margin-bottom: 12px;
font-size: 26px;
}
/ * block with the “continue reading” button and social networking buttons * /
.post-footer {
border-top: 1px solid # EBEBE3;
border-bottom: 1px solid # EBEBE3;
position: relative;
margin-top: 15px;
}
.more-link {
position: relative;
display: inline-block;
font-size: 10px;
text-transform: uppercase;
color: white;
line-height: 44px;
padding: 0 22px;
background: # 3C3D41;
letter-spacing: 0.1em;
white-space: nowrap;
}
.more-link: after {
content: ”;
display: block;
position: absolute;
width: 0;
height: 0;
top: 0;
right: 0;
border: solid transparent;
border-width: 22px 18px;
border-left-color: # 3C3D41;
transform: translateX (100%);
}
.post-social {
position: absolute;
left: auto;
top: 50%;
right: 0;
text-align: right;
transform: translateY (-50%);
padding: 0;
font-size: 12px;
}
.post-social a {
display: inline-block;
margin-left: 8px;
color: # F8B763;
width: 25px;
height: 25px;
line-height: 23px;
text-align: center;
border-radius: 50%;
border: 1px solid;
}
9. Styles for out sidebar
/ * right container * /
aside {
width: 33%;
float: right;
}
/ * block for widgets * /
.widget {
padding: 20px 15px;
background: white;
font-size: 13px;
margin-bottom: 30px;
box-shadow: 3px 3px 1px rgba (0,0,0, .05);
}
.widget-title {
font-size: 18px;
padding: 10px;
margin-bottom: 20px;
text-align: center;
border: 2px solid # F8B763;
box-shadow: 3px 3px 0 0 # F8B763;
}
.widget-category-list li {
border-bottom: 1px solid # EBEBE3;
padding: 10px 0;
color: # c6c6c6;
font-style: italic;
}
.widget-category-list li: last-child {
border-bottom: none;
}
.widget-category-list li a {
color: # 626262;
margin-right: 6px;
font-style: normal;
}
.widget-category-list li a: before {
content: “\ f105”;
display: inline-block;
font-family: ‘FontAwesome’;
margin-right: 10px;
color: # c6c6c6;
}
.widget-posts-list li {
border-top: 1px solid # EBEBE3;
padding: 15px 0;
}
.widget-posts-list li: nth-child (1) {
border-top: none;
}
.post-image-small {
width: 30%;
float: left;
margin-right: 15px;
}
.widget-post-title {
float: left;
}
/ * subscription form * /
#subscribe {
position: relative;
width: 100%;
padding: 15px 0;
}
#subscribe input {
width: 100%;
display: block;
float: left;
border: 2px solid # EBEBE3;
padding: 0 0 0 10px;
height: 40px;
position: relative;
outline: none;
color: # 9E9C9C;
font-style: italic;
}
#subscribe button {
padding: 0 15px;
background: transparent;
height: 40px;
border: none;
position: absolute;
right: 0;
color: # EF5A42;
cursor: pointer;
font-size: 18px;
}
#subscribe input: focus + button {
background: # EF5A42;
color: white;
}
10. Styles for the footer
Let’s divide the website footer into three equal columns:
footer {
padding: 30px 0;
background: #3C3D41;
color: white;
}
.footer-col {
width: 33.3333333333%;
float: left;
}
.footer-col a {
color: white;
}
.footer-col:last-child {
text-align: right;
}
.social-bar-wrap {
text-align: center;
}
.social-bar-wrap a {
padding: 0 7px;
font-size: 18px;
}
11. Media queries
@media (max-width: 768px) {
/ * show the button to switch the top navigation * /
.nav-toggle {
display: block;
}
header {
padding: 10px 0;
}
/ * hide the top menu
#menu {
max-height: 0;
background: white;
float: none;
position: absolute;
overflow: hidden;
top: 63px;
right: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 3;
}
/ * we make it so that they are located under each other * /
#menu li {
display: block;
text-align: center;
border-bottom: 1px solid # EBEBE3;
margin-right: 0;
}
/ * 100% width * /
.posts-list, aside {
width: 100%;
float: none;
}
.widget-post-title {
font-size: 1.5em;
}
}
@media (max-width: 480px) {
/ * Cancel wrapping * /
.logo {
float: none;
margin: 0 auto 15px;
display: table;
}
.logo span {
margin: 0 2px;
}
/ * position of the header
#menu {
top: 118px;
}
/ * align search from left * /
#searchform {
float: left;
margin-left: 0;
}
/ * remove the button to the center * /
.post-footer {
border-top: none;
border-bottom: none;
text-align: center;
}
/ * Cancel the social network buttons * /
.post-social {
position: static;
text-align: center;
transform: none;
margin-top: 20px;
}
.widget-post-title {
font-size: 1.2em;
}
/ * cancel wrapping for footer columns * /
.footer-col {
float: none;
margin-bottom: 20px;
width: 100%;
text-align: center;
}
.footer-col: last-child {
text-align: center;
margin-bottom: 0;
}
}
12. A script for a mobile menu
jQuery code initially added to is responsible for toggling the top menu when you click on the button (the height of the menu switches from zero to equal to its content), the jQuery code that we previously added to the page markup before the closing </body> tag responds:
<script>
$ (‘. nav-toggle’). on (‘click’, function () {
$ (‘# menu’). toggleClass (‘active’);
});
</ script>