How to design a responsive website?

A responsive website is a website that looks good and amazing on all devices i.e. desktops, tablets, and cell phones. A website should have a responsive design to make it responsive. It’s all about playing around with HTML and CSS for changing the size, hiding, or enlarging the screen.

Let’s see an example and what does responsive means while resizing a website,

Desktop

The website design on Desktop −

Tablet

The website design looks like this on a tablet. You can easily compare the changes with the above shown desktop screenshot −

Mobile

The website design looks like this on Mobile −

To develop a responsive website, which looks good irrespective of the device size, you need to work on the following concepts −

Viewport

A viewport is used to control layout on mobile browsers. It is used inside the <meta> tag to give the browser instructions on how to work for controlling the web page’s dimensions and scaling.

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

Here, 

The width=device-width sets the width of the page in order to follow the screen-width of the device. The initial-scale=1.0 is to set the initial zoom level. This helps when the page gets loaded by the web browser for the first time.

Media Queries

With Media queries, add a breakpoint where some parts of the design behave differently on each side of the breakpoint. 

Image width and height property

For images to be responsive, you need to set the width property to 100% and height to auto.