Create a responsive web page with 2 simple steps.
You may have noticed some changes in a webpage design in following circumstances: while viewing the webpage from different devices, while adjusting the screen size of the webpage, or changing the page orientation of the webpage. Have you ever thought about the idea behind this design change? Well, it’s all because of Responsive Web Design.
Earlier people mostly used desktop computers; therefore, the web applications were designed according to the convenience of the desktop computer users. Later, due to the advancement of technology people started to use smartphones more. So, the demand for a mobile version of the web application was increased. Different users view the same webpage through different devices. In order to provide better user experience, we can apply Responsive Web Design, which is an approach that allows web design to adjust automatically with the different devices and screen sizes.
Get started….
Though this sounds complicated, it’s very easy to create. You only need some basic knowledge of HTML and CSS. Even JavaScript is not required for this.
Just look at this simple example,
The webpage in the above figure looks so static. If we adjust the size some of the content get hidden, you need to scroll the horizontal bar to read the hidden content. Different users may view this page in different devices. So, we need to provide a suitable satisfying design for their device. Let’s see how to make it more compatible.
In this example, I want to make the above page more responsive. I want to design two different views. One for a desktop computer and another one for a mobile.
How to create responsive webpage?
Step 1: Set viewpoint
First you should add <meta> tag in your web page. This gives you a control on the dimensions of the web page. The part “ width=device-width” part makes your screen width adjust with the device.
<head>
<title> CakeShop </title>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0">
</head>
Step 2: Add Media Query
By using this media Query we can simply execute the code that is relevant for the particular device. @media rule is used here. If the given condition matches with the device, the corresponding code will be executed on that device. We can add breakpoints in the places where we need to execute different code.
<style>
.paragraph {
float: left;
width: 25%; /* For desktops: */
padding: 20px;
border:10px inset rgb(39, 10, 10);
height: 349px;
background-color: rgba(228, 220, 220,0.842);
font-size: 20px ;
color: rgb(9, 9, 43);
}
.image {
float: left;
width: 25%; /* For desktops: */
padding: 5px 5px;
overflow: hidden;
text-align: center;
background-color: rgba(114, 105, 105,0.842);
}
@media only screen and (max-width:500px) {
/* For mobiles: */
.paragraph, .image {
width: 100%;
}
} </style>
So now have done the coding part related to responsive web design. Then we can complete the latter part of the code by using HTML and CSS. Therefore the output will be similar to the Figure 2.
Here you can see the new web page looks more web responsive than the earlier one. I hope you get the basic idea on how to make a Web page more responsive. To make your page even more web responsive you can add more breakpoints and relevant codes.
Cheers and Have a nice day!😊
