Understanding responsive websites?
Understanding Responsive Websites?
What is a Responsive Website?
When a responsive website is opened on any device, each webpage displays its content correctly without being covered or overflowing by other webpages. For example, when opening the TutorialsPoint.com website on any device, users will see that the content of the webpage remains the same, but the replacement content is different to make the content easier to read.
Thus, the basic principle of a responsive website is to make content visible and stylish on any device.
Why do we need responsive websites?
Now, the question is why do we need responsive websites? Here’s the answer.
In the early days, users could only access websites from desktop computers, but today, users access websites from devices of varying sizes, such as mobile devices and tablets. In fact, most website traffic comes from mobile devices, not desktop computers.
Today, every business operates on the internet and attempts to acquire customers online through a website. If a user accesses your website from a mobile device and your website isn’t responsive, they’ll immediately leave and switch to a competitor’s website.
Therefore, responsive websites can be used to attract more customers and visitors.
How do I get started creating a responsive website?
We need to use common browser size breakpoints and style the HTML element accordingly. Here are the common breakpoints.
Mobile: 360 x 640 px
Tablet: 768 x 1024 px
Laptop: 1366 x 768 px
HD Desktop: 1920 x 1080 px
First, we must add the following meta tag to the < head > section.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Now, our HTML content will remain the same for the web page, but we need to write it in a way that is easily readable on any device. CSS.
Example 1 (Setting Element Sizes as Percentages)
In the example below, we have a “container” div element that contains two “col” div elements. We’ve set the dimensions of the container div element and the “col” div element as percentages.
When output, users can see that it’s readable on any device size.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 100%;
height: 100px;
background-color: #f1f1f1;
display: flex;
flex-direction: row;
}
.col {
width: 47%;
margin: auto 1%;
height: 100%;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 100px;
font-size: 10px;
}
</style>
</head>
<body>
<h2>By placing Creating a responsive website by setting HTML element dimensions as percentages</h2>
<div class="container">
<div class="col">
Column 1
</div>
<div class="col">
Column 2
</div>
</div>
</body>
</html>
Example 2 (Using Media Queries)
In the following example, we use media queries to create a responsive website. Using media queries, we can add breakpoints and style the website differently for each device.
Here, you can see that we’ve changed the dimensions of the “main” div for devices with a width less than 600px. We’ve also used media queries to change the font size, font color, and margins for mobile devices.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.main {
width: 50%;
height: 50vh;
display: flex;
align-items: center;
text-align: center;
margin: 10px auto;
flex-direction: column;
}
img {
width: 100%;
height: 100%;
}
.description {
width: 100%;
height: 100%;
font-size: 30px;
color: red;
margin-top: 20px;
}
/* writing the above CSS Code for Table and Mobile Devices Using Media Query */
@media screen and (max-width: 600px) {
.main {
width: 100%;
height: 100vh;
margin: 5px auto;
}
.description {
font-size: 20px;
color: blue;
margin-top: 10px;
}
}
</style>
</head>
<body>
<h2> Creating Responsive Websites Using Media Queries in CSS </h2>
<div class = "main">
<img src = "https://yt3.googleusercontent.com/H_Xbai9qfD-0DWSLfOuwMa4dieJHcz-tJa18UaoUf6C7TerPWvcuhatFAudCfGVJ-dszbWDnhA=s900-c-k-c0x00ffffff-no-rj"
alt = "logo">
<div class = "description">
Above is the TutorialPoints logo. The logo is responsive and will be displayed in the center of the screen.
</div>
</div>
</body>
</html>
Example 3 (Using the clamp() Function)
In the following example, we use the clamp() function to make our webpage responsive. The clamp() function requires three parameters: the minimum width, the percentage, and the maximum width.
Here, we pass 400px as the first argument to the clamp() function, 30% as the second argument, and 600px as the third argument. This means that the card’s width will never be less than 400px or greater than 600px on any device. If 30% of the screen width is between 400px and 600px, that value will be set as the card’s width.
In the output, users can observe the cards on different devices and check whether they are responsive.
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<style>
.card {
height: 400px;
width: clamp(400px, 30%, 600px);
background-color: rgb(13, 247, 247);
padding: 5px;
border-radius: 12px;
border: 2px solid green;
}
img {
height: 90%;
width: 100%;
border-radius: 12px;
}
.content {
font-size: 20px;
font-weight: bold;
text-align: center; padding: 10px;
color: green;
}
</style>
</head>
<body>
<h2> Creating a Responsive Website with the CSS Clamp() Function </h2>
<div class = "card">
<img src = "https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg"
Alt = "tree image">
<div class = "content">
Save the Environment!
</div>
</div>
</body>
</html>
Example 4 (Introducing Flexbox)
In the following example, we introduce Flexbox to create a responsive website. We can use display flex to display any HTML element as a flexbox. After that, we can use various CSS properties to customize the flexbox’s contents.
Here, we have a row div that contains multiple col divs. The row div’s dimensions change based on the device size, but the col div’s dimensions are fixed. Therefore, we use the flex-wrap: wrap CSS property to wrap the content within the row div. This displays the total number of col divs within a single row based on the row’s width.
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<style>
.row {
height: auto;
width: 90%;
margin: 0 auto;
background-color: yellow;
padding: 10px 20px;
border: 2px solid green;
border-radius: 12px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.col {
height: 200px;
min-width: 200px;
background-color: red;
border: 2px solid green;
border-radius: 12px;
margin: 10px 20px;
}
</style>
</head>
<body>
<h2>Create a <i>responsive website</i> using media queries in CSS. </h2>
<div class = "row">
<div class = "col">
</div>
<div class = "col">
</div>
<div class = "col">
</div>
<div class = "col">
</div>
<div class = "col">
</div>
</div>
</body>
</html>
In this tutorial, you learned how to make a website responsive. The examples above taught you how to use various CSS properties, functions, and rules to create a responsive website. Developers need to use all of these together to create a live website. Here, we used a single property in a single example for learning purposes only.