Quick overview and tips to make you web page responsive

👉 ABSTRACT

In this I had covered some quick tips and overview of RWD

1️⃣ Use meta viewport element

2️⃣ Don't use large fixed width

3️⃣ Try to use Layouts

4️⃣ Use box-sizing: border-box

5️⃣ Media Queries are saviour

6️⃣ Use "auto" in media

7️⃣ Use frameworks if possible

Responsive web design is not a kind of program or framework. We can say it's a combination of various concepts using which we try to make our web page look good on all devices

The great thing is that you can achieve RWD using HTML and CSS only⚡

In order to make a RWD, you just need to consider one thing

"Ability of content to fit inside any device that look good and it will be for user to interact with that"

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. 

2️⃣ The second important point to note is that 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

3️⃣ 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. Try to use them😉

4️⃣ Use box-sizing: border-box

This 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

CONT...👇

Even small 4px border can damage the responsiveness. Hence I always consider box-sizing border-box for RWD.

5️⃣ 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.

If you don't know about, comment below and I'll make a separate thread on it

6️⃣ 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 😅

7️⃣ 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