What is Responsive Web Design?

Responsive web design is the practice of building a website using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (It includes desktops, laptops, tablets, and mobile phones).
Responsive web design is the way to design a website where the position of the website content set automatically according to the device size.

Why Responsive Web Design required?

Mobile internet is growing like crazy, and day by days mobile internet user increase at the rapid stage. Web surfing on the mobile device is growing at an astronomical pace, but the old websites over the internet were not optimized for the mobile device.

To increase the more traffic from mobile users, the website must be responsive and optimized as per the mobile device. Nowadays users use laptops, desktops, tablets and mobile for internet surfing and that’s why responsive web design comes in the picture.

When you check you Google Webmaster/ Search Console account you got a notification that Google started mobile-first indexing. Means that if you want a higher rank in the search engine like Google your website must be responsive and optimized for mobile SEO.

Making web pages responsive

Set the viewport

To make web pages responsive as per device, we need to set the viewport using metadata. you can set viewport using metadata like the following example.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

This viewport metadata give instruction to the browser on how to control the page’s dimensions and scaling.

Make responsive images

To make responsive images always give width and height to the image in percentage. For example

<img src=”img1.jpg” style=”width:100%;”>

In this example, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead. For example

<img src=”img1.jpg” style=”max-width:100%;height:auto;”>

Make responsive text

You can use “viewport width” in short “vw” to make text responsive according to device. For example

<h1 style=”font-size:10vw”>Hello World</h1>

Please note that, Here 10vw means 10% of viewport width.

Media queries

Media queries are simple filters that can be applied to CSS styles. Media queries helps to define different CSS styles for different device and resolution. Example

@media (query) {
/* CSS Rules used when query matches */
}

Here is the list of Parameters that you can pass with the media queries

  • min-width – Rules applied for any browser width greater than the value defined in the query.
  • max-width – Rules applied for any browser width less than the value defined in the query.
  • min-height – Rules applied for any browser height greater than the value defined in the query.
  • max-height – Rules applied for any browser height less than the value defined in the query.
  • orientation=portrait – Rules applied for any browser where the height is greater than or equal to the width.
  • orientation=landscape – Rules for any browser where the width is greater than the height.

Here is the simple example by w3schools.com
<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}

.main {
float: left;
width: 60%; /* The width is 60%, by default */
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>

Run the above example. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_responsive_media_query

You can also refer this Google Example about the responsive web design.

Run this URL in different devices
https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/responsive/weather-2.html

Video by Googlesamples on responsive web design.