Responsive web design ensures that your website appears correctly and is well-positioned on various devices such as desktop computers, tablets, and smartphones.
Responsive web design involves utilizing HTML and CSS to adjust, conceal, reduce, expand, or reposition content, ensuring it appears visually appealing on various screen sizes.
- Configure the viewport
Let's see how to set the viewport.
To Learn More: Configuring the viewport
- Adaptive Images
Images that are able to adapt and adjust smoothly to different browser sizes are commonly referred to as responsive images.
How to make an Image Responsive?
1. By using the width property
Adjust the CSS width attribute to 100% in order to ensure the image is responsive and capable of resizing both larger and smaller as needed.
Example
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<body>
<h2> Responsive Image </h2>
<p> When we set the CSS width property to 100%, it makes the image responsive.
Resize the browser window to see the effect. </p>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" style="max-width:100%; height:auto;" alt="Responsive Example">
</body>
</html>
Note: A problem with the above method (width: 100%) is that the image can be scaled up to be larger than its original size. So, it is better to use the max-width property instead.
2. By using the max-width Property
This approach is widely regarded as the most optimal and commonly employed since it guarantees that the image will resize proportionally if necessary, but it will never enlarge beyond its original dimensions.
Example
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<body>
<h2>Responsive Image</h2>
<p>"max-width:100%" makes the image responsive and also ensures that the image
doesn't get bigger than its original size.</p>
<p>Resize the browser window to see the effect.</p>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" style="max-width:100%;height:auto;">
</body>
</html>
3. Change images according to the browser width
With the help of the HTML <picture> tag, you have the ability to display multiple images based on the width of the browser. This feature allows for automatic switching of images when the browser size is adjusted, catering to different devices such as desktop computers and mobile phones.
Example
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>Change Images Depending on Browser Width</h2>
<p>Resize the browser width, and the image will change at 600px and 1500px.</p>
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">(Change image)
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">(Change image)
<source srcset="flowers.jpg">
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Flowers" style="width:auto;">
</picture>
</body>
</html>
Responsive Text-size
To achieve responsive text sizing, we can utilize the "vw" unit, standing for viewport width. This allows the text size to adjust based on the width of the browser window.
Example
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:clamp(24px, 5vw, 48px);">Responsive Heading</h1>
<p style="font-size:clamp(16px, 3vw, 24px);">Responsive paragraph text.</p>
<p>Resize the browser window to see how the text size changes.</p>
</body>
</html>
Output:
Responsive Heading
Responsive paragraph text.
Resize the browser window to see how the text size changes.
Note: viewport specifies the browser window size. 1vw = 1% of viewport width. Means, if the viewport is 100cm wide, 1vw is 1.0cm.
Media Query
Another approach to creating responsive websites is by utilizing media queries.
To read more: HTML Media Query
Responsive Layouts with Flexbox
Flexbox is widely used for creating responsive designs as it helps in adjusting content to different screen sizes effectively.
Example
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.box {
flex: 1 1 200px; /* grow, shrink, min-width */
background: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>Responsive Flexbox Layout</h2>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
Output:
Responsive Layouts with CSS Grid
CSS grid streamlines the creation of a responsive design with two or multiple columns.
Example
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
}
.grid-item {
background: lightcoral;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>Responsive Grid Layout</h2>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
</body>
</html>
Output:
Responsive Media (Videos and iframes)
Videos and iframes have a tendency to disturb the design of a webpage if they are not responsive. One way to address this issue is by enclosing them in a container element and utilizing CSS to make them adaptable to different screen sizes.
Example
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<head>
<style>
.responsive-video {
position: relative;
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
overflow: hidden;
}
.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h2>Responsive Video</h2>
<div class="responsive-video">
<iframe width="560" height="315" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</body>
</html>
Output:
Conclusion
Responsive web design ensures that websites display effectively and are visually appealing across various devices. Developers now have access to a wide array of tools for creating and adjusting web experiences, ranging from basic techniques like defining the viewport and using responsive images to more sophisticated approaches like employing Flexbox, CSS Grid, and media queries.
It is essential to conduct testing on various devices instead of focusing on fixing specific sizes. Implementing the latest CSS methodologies like max-width, clamp, and responsive layouts is crucial. Mastering these strategies will enable you to develop websites that are both user-friendly and resistant to future changes.