How to make a Website Responsive?

Responsive Web Design

How to make a Website Responsive?

You just need to consider one thing in order to make a Responsive Web Design (RWD). "Ability of content to fit inside any device that look good and it will be for user to interact with that".

How to make a Website Responsive? (Cont...)

Responsive web design (RWD) is not a kind of program or framework.
It's a combination of various concepts using which we try to make our web page look good on all devices.
RWD can be achieved using HTML and CSS only.

How to make a Website Responsive? (Cont...)

1. First and foremost thing in order to make RWD is <meta> viewport element. It forces page to follow the screen-width of the device.

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

How to make a Website Responsive? (Cont...)

2. Don't use large fixed width or height element. It can cause trouble.

Let's say an element having width 500px but user is viewing on a device having width smaller than 500px In such cases, use min-width or max-width.

How to make a Website Responsive? (Cont...)

3. Use HTML <picture> tag.

The HTML <picture> element allows you to define different images for different browser window sizes.

<picture>
    <source media="(min-width: 650px)" srcset="/path">
    <source media="(min-width: 465px)" srcset="/path">
    <img src="/path">
</picture>

How to make a Website Responsive? (Cont...)

4. Responsive text size.

Although you can make text responsive using media queries but you can also use "viewpoet" width as well.

h1 { 
	font-size: 10vw; 
}

How to make a Website Responsive? (Cont...)

5. Try to use Layouts.

Using Grid or Flex layout always beneficial in order to make a web page responsive. Both these layout are not hard to learn.

6. Use box-sizing: border-box.

Small thing can make big impact.

box-sizing: border-box; forces an element to adjust it's padding and border inside width and height of that element.

How to make a Website Responsive? (Cont...)

7. Media Queries are saviour.

Media query is a rule to include a block of CSS properties only if a certain condition is true. It is very useful in order to make a RWD.

@media screen and (min-width: 480px) {
	.element {
    	width: 100px;
    }
}

How to make a Website Responsive? (Cont...)

8. Use "auto" in media.

Almost 99% a web page contains images or videos, and in order to make them responsive, use "auto".

If the width property is set to a percentage and the height is set to "auto", the image will be responsive.

In order to improve further, you can use max-width in image so that quality of image will be persist. After all it can also be considered as responsive

How to make a Website Responsive? (Cont...)

9. Use frameworks if possible.

Sometimes it might be a tedious task to handle responsiveness if you're wirting pure CSS.

Try to use frameworks because they can save a lot of time designing a responsive website.