Initially, building websites was accessible, we had to focus on a single layout and code the design. Due to the advancement of different mobile devices, smartwatches, and smart televisions, websites are now concentrated on fitting all these sizes. This has increased the workload of developers and designers. Now we have to make our websites perfect so that no matter which device the user uses, they would have the best website experience. To achieve the best experience, we add a responsive design to the websites. This is commonly referred to as RWD(Responsive Web Design).
Responsive web design is the art of building a website which can fit away according to each gadget and each screen size, regardless of how huge or tiny, versatile or work area. Responsive web design is engaged in giving an intuitive and satisfying experience for everybody. PC and wireless clients have the same advantage as responsive websites. Responsive web design is achieved through meta tags which are provided by the HTML language. We can also use Flexible Layouts, Flexible Grids, and media queries to attain a responsive website.
How to set up the viewport?
To set up the website's viewport, as we have seen, we can use the three CSS components, but here's something HTML provides us for making our websites responsive!
So what is it?
It's the <meta> tag. The <meta> tag is used to set the viewport of the website. The viewport allows the browser to check, scale, and control the dimensions of the page.
The width property in the meta tag is used to control the size of the viewport. The initial scale is used to control how the users can zoom in and out on the web pages.
Observe the difference between the layouts if we add the viewport property and ignore the viewport property.
Key
Values
Description
width
Size in pixels or the special value device-width
Sets the width of the page to the width of the screen
initial-scale
Numeric value
Sets the initial zoom level of the page
maximum-scale
Numeric value
Sets the maximum zoom level of the page,
Avoid specifying this value and leave the user in charge of the same.
minimum-scale
Numeric value
Sets the value indicating how much the user can zoom out. Avoid specifying this value.
height
Size in pixels to set the height of the viewport.
Avoid using or setting a value for this as it is not supported widely.
user-scalable
It can be set to no
When set to no, it prevents the user from zooming in.
Avoid setting this value.
Media Queries
Media queries were worked as an augmentation to media types commonly discovered while focusing on and including styles. Media queries give the capacity to indicate various kinds for the individual program and gadget conditions, the width of the viewport or gadget direction, for instance. Having the option to apply remarkably designated styles opens up a universe of chance and influence to responsive website composition.
Media queries are used for adjusting the following properties:
Width and the height of the viewport
Orientation
Resolution of the device.
Media queries are generally used because they can edit more than one property.
Initialize Media Queries
There are two ways to initialize the media queries in the website. We can use the @media rule inside an existing style sheet, import a new stylesheet using the @import rule, or link to a separate stylesheet from within the HTML document. Generally speaking, using the @media control inside an existing style sheet is recommended to avoid additional HTTP requests.
@media not|only mediatype and (expressions) {
//CSS-Code;
}
Let’s consider an example to understand the media queries better:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
@media screen and (min-width: 1000px) {
body {
background-color: lightgrey;
}
}
</style>
</head>
<body>
<h1>Hey Ninja Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 1000px wide or wider.</p>
</body>
</html>
OUTPUT for different screen size
When viewport is greater than 1000px:
Result when the viewport is lesser than 1000px:
Flexible Layouts
A flexible layout is a way of making websites dynamically adjustable to any width of the device. These flexible layouts are made using a component called flexible grids. To get a responsive design, you need to use CSS styles to add some grid, margin, and CSS units correctly to get the desired output.
Now, CSS offers two kinds of units, and the first is Absolute Units: pixels, cm, pt, mm, and inches. Any unit we use in terms of length in real-life could be used for measuring a website component. Since there is a vast difference in pixel layout and these real-life values, we should always use pixels or points to define any property.
The second type of the unit is Relative Units which are again classified into two types,
Units that are relevant on the font-size: em and rem
Units that are relevant to the viewport: (vw, vh, vmin, and vmax)
The flexible layouts are not based on fixed relative units, as they need to be responsive. They should adjust their values according to the width of the browser screen.
To understand the concept better, let's make a responsive grid using HTML and CSS.
<!doctype html>
<title>Example</title>
<style>
.wrapper {
display: flex;
}
.wrapper > div {
font-size: 4vh;
color: white;
background: hotpink;
margin: .1em;
padding: .3em;
border-radius: 3px;
flex: 1;
}
.wrapper.wrapper > div {
background: pink;
color: hotpink;
}
</style>
<div class="wrapper">
<div>1
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
<div>2</div>
<div>3</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
OUTPUT
Frequently Asked Questions
Q1. What is a viewport in HTML?
Ans: The viewport in a website is the area of the window in which web content can be seen. The viewport is often not of the same size as the rendered page, due to which the browser provides scrollbars for the user to scroll around and access all the content on the webpage.
Q2. What is HTML Responsive Design?
Ans: Responsive web design is the act of building a website reasonable to chip away at each gadget and each screen size, regardless of how huge or tiny, versatile or work area. Responsive web design is engaged in giving an intuitive and satisfying experience for everybody.
Q3. What are the three essential elements included in a responsive website?
Ans: The three elements of a responsive website are:
→ the media query
→ the web browser (using viewport)
→ the responsive layouts and grids (responsive content)
Q4. What are the advantages of a responsive web design?
Ans: The advantages of responsive web design are:
→ It attracts a broader audience.
→ It is easier to monitor websites.
→ Offers Consistency in design
→ Boosts SEO of the website
Key Takeaways
This article has covered all the essential information about making your website responsive using HTML Responsive Web Design. Responsive web design is the art of building a website so that it chips away at each gadget and each screen size, regardless of how huge or tiny, versatile or work area. Responsive web design is engaged in giving an intuitive and satisfying experience for everybody. PC and wireless clients have the same advantage as responsive websites. Responsive web design is achieved through meta tags which are provided by the HTML language. In this article, we have discussed the three main elements used to make a website responsive: the media query, the viewport of the website, and the flexible layouts and elements in HTML and CSS.
We have provided a fantastic Web Development course for you, and we feel it could be the perfect aid to make you better than the rest of the developers.
Happy Learning Ninjas!
Live masterclass
Master PowerBI using Netflix Data
by Ashwin Goyal, Product @ HRS Groups, Ex - Udaan, OYO
305+ registered