What is HTML responsive?
HTML responsive design is the process of using HTML and CSS properly to design the webpage which should fit and look good not only in web browsers but also in all other devices.
Its the proper usage of HTML and CSS to resize, hide, shrink, enlarge, or move the content.
The webpage content should look good on any screen in any devices like desktops, tablets, and phones etc.
What is a Responsive Website?
Responsive Website design is a process by which the designed webpage display should provide a good quality user experience on both traditional, mobile and other devices.
Its the proper way of maintaining the display sizes of the webpage in all devices.
How to make a Responsive Website ?
There are basically 3 ways to create a responsive website, they are
1. Add responsive meta tags in your HTML document
2. Apply media queries to your layout
3. Make images responsive
4. Ensure your typography will be easily readable on mobile devices
1. Add responsive meta tags in your HTML document
What is HTML <meta></meta> tag?
The HTML <meta> element is used to specify the character set, page description, keywords, authors and other metadata on the webpage.
Metadata is mainly used by browsers, search engines, and other web services to rank your webpage better.
Why <meta></meta> tags are used ?
<meta></meta> tags are used by browsers, search engines and other web services.
Metadata will not be displayed on the page, but is machine parsable.
What is The Viewport in <meta></meta> tag ?
Viewport is the user’s visible area of a web page.
This varies from one device to another, it will be smaller on a mobile phone than on a computer screen.
If we are browsing our html document with a phone or a tablet, viewport control the page’s dimensions and scaling.
HTML coding for a website !!!
Click to Learn More about – HTML Tutorial for beginners
How to set the viewport ?
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
width=device-width
This sets the width of the page to follow the screen-width of the device
initial-scale=1.0
This sets the initial zoom level when the page is first loaded by the browser.
Precautions before using Viewport.
1. The Users can scroll the webpage vertically but horizontal scrolling is not possible in desktop and other devices.
2. If the user forcefully tries to scroll horizontally, or zoom out, to see the whole web page it results in a poor user experience.
Rules to be followed before using Viewport
1. Never use large fixed width elements.
2. Never let the content rely on a particular viewport width to render well.
3. Use CSS media queries to apply different styling for small and large screens.
Example :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>
2. Apply media queries to your layout
Example :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: orange;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: blue;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: green;
}
.aside {
background-color: brown;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: grey;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>CSTechbook</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</div>
<div class="col-6">
<h1>Body</h1>
</div>
</div>
<div class="footer">
<p>Footer column</p>
</div>
</body>
</html>
Output :
3. Make images responsive
If we set the CSS width property to 100%, it makes the image responsive, It automatically resizes the browser window in other devices to see the effect.
Example :
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>Responsive Image</h2>
<img src="https://secureservercdn.net/192.169.221.188/s30.e0b.myftpupload.com/wp-content/uploads/2020/06/HTML-PixTeller-1-2.png" style="width:100%;">
</body>
</html>
Output :
4. Ensure your typography will be easily readable on mobile devices
Viewport units used in Fluid Typography
There are four viewport units are available to us:
1. vw – viewport width
2. vh – viewport height
3. vmin – the smaller value of the viewport’s width and height
4. vmax – the larger value of the viewport’s width and height
Here we can mention the text size
We can Resize the browser window to see how the text size changes.
Example :
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:10vw;">Font size is 10vw.</h1>
<p style="font-size:6vw;">Font size is 6vw.</p>
<p style="font-size:4vw;">Font size is 4vw.</p>
<p style="font-size:2vw;">Font size is 2vw.</p>
</body>
</html>
Output :
