Responsive web design, also called RWD design, describes a modern web design approach that allows websites and pages to render (or display) on all devices and screen sizes by automatically adapting to the screen, whether it’s a desktop, laptop, tablet, or smartphone.
Responsive web design works through Cascading Style Sheets (CSS), using various settings to serve different style properties depending on the screen size, orientation, resolution, color capability, and other characteristics of the user’s device. A few examples of CSS properties related to responsive web design include the viewport and media queries.
1. Setting Viewport
What is Viewport?
The viewport is the area of the browser's window in which the web page is displayed. It is not always the same as the rendered web page. For this reason, browsers provide scrollbar so that you can access the complete page.
Syntax:
<meta name="viewport" content="width=device-width, initial-scale=1.0">width: width property controls the size of the viewport. In the above example, it is set to equal the device width.
initial-scale: It controls the zoom level when the webpage is first loaded. We will look at this property in more detail in a separate article.
Example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Setting the Viewport</h2>
<p>This Example shows how to add Viewport</p>
</body>
</html>Output:
This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling.
2. Responsive Image
Responsive images are images that scale nicely to fit any browser size.
If the CSS width property is set to 100%, the image will be responsive and scale up and down.
Example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Responsive Image</h2>
<p>Resize the browser window to see the effect.</p>
<img src="https://static.wixstatic.com/media/0f65e1_4c6cc8eb23a24ccea95a57fcbacf2b32~mv2.jpg" style="width:100%;">
</body>
</html>Output:
Image using Max-width:100%
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Responsive Image using Max-width:100% </h2>
<p>When you resize the window, the image will be the same (Original Size).</p>
<p>Resize the browser window to see the effect.</p>
<img src="https://static.wixstatic.com/media/0f65e1_4c6cc8eb23a24ccea95a57fcbacf2b32~mv2.jpg" style="max-width:100%; height:auto;">
</body>
</html>Output:
3. Responsive Text Size
The text size can be set with a "vw" unit, which means the "viewport width".
Example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 style="font-size:5vw;">Responsive Text</h1>
<p style="font-size:3vw;">Resize the browser window to see how the text size scales.</p>
<p style="font-size:3vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>
</body>
</html>Output:
4. Responsive Web Page
Below Example includes Responsive Text, Responsive Image and Responsive Web Page. Resize the Browser Windows to see the results.
Example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.menu {
float: left;
width: 20%;
text-align: center;
}
.menu a {
background-color: pink;
padding: 8px;
margin-top: 7px;
display: block;
width: 100%;
color: black;
}
.main {
float: left;
width: 50%;
padding: 0 20px;
}
.right {
background-color: pink;
float: left;
width: 30%;
padding: 15px;
margin-top: 7px;
text-align: center;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
@media only screen and (max-width: 620px)
{
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
}
</style>
</head>
<body style="font-family:Verdana;color:Black;">
<div style="background-color:pink;padding:3px;text-align:center;">
<h1>Welcome</h1>
</div>
<div style="overflow:auto">
<div class="menu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
<div class="main">
<h2>The Tech Platform</h2>
<p>The Tech Platform is your own platform, managed by you as your blog/website where you share your expertise, knowledge through your content (articles/videos/blogs and more) on your own platform and will not pay any expenses for your own site hosting for a life time.
</p>
</div>
<div class="right">
<h2>About</h2>
<p>The Tech Platform will help you reach the audience with its 100,000 + user hits throughout the world every day and with a set of following features you will have on this tech platform</p>
</div>
</div>
<img src="https://static.wixstatic.com/media/0f65e1_ed95aaf43cb54648a6ec40c552d0894e~mv2.jpg" style="max-width:50%; height:auto;" class="img">
<div style="background-color:pink;text-align:center;padding:10px;margin-top:7px;">www.thetechplatform.com</div>
</body>
</html>Output:
Advantages:
User experience friendly: Responsive web design is specially designed to respond according to customer’s or user’s behaviors and their needs, according to screen size, etc. It is used to create a website that adjusts smoothly to different screen sizes especially for mobile viewing. Therefore, it increases reach to customers and users on small devices like mobiles, tablets, etc.
SEO friendly: Responsive websites are generally responsible for ranking top at SEO (Search Engine Optimization). On mobile devices or small devices, a responsive website loads much faster as compared to a desktop or laptop. This automatically increases positive user experience that in turn gives a higher ranking to the website on SEO.
Increase profit and sale: Responsive web design is easy to create and faster to implement. This is because there is no requirement for another website for small devices. A responsive website is specially designed to fit all screen sizes. Therefore, one can save time, effort, maintenance costs and development cost associate with creating another website for small devices. It generally increases user experience and reaches more audiences through small devices. More will be an audience, more will be profit and sale.
Low maintenance: Responsive websites are designed to fit all screen sizes. There is no change in content and other elements to fit on a different device. This website uses the same content across all devices. There is only one website that fits all screen sizes so the cost of maintaining two websites is also saved because maintaining a separate site for a small device requires a lot of testing and support. Managing a single website requires less maintenance, less cost, saves time, etc.
Easy to track users: Responsive websites take less time to load, saves time, money, save development effort of creating another website for small devices. One can use this time and effort to track their site visitors.
Disadvantages:
Slow page loading: Though, responsive websites are easy to maintain, but it sometimes takes a long time to load the page. It includes some high-resolution images and videos that sometimes require a lot of time to load.
Navigation is tough: Responsive websites are specially designed to fit on small devices. But maintaining the simplicity of large websites for small devices sometimes becomes difficult. This is because small devices have less screen size and this turn make it more difficult to navigate website through small devices.
Time-consuming development: Responsive websites are essential but take a lot of time in the development process as compared to the development time of normal websites.
The Tech Platform