Complete guide to Responsive Web Design

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread">https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇🏻" title="Rückhand Zeigefinger nach unten (heller Hautton)" aria-label="Emoji: Rückhand Zeigefinger nach unten (heller Hautton)">
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"

{ 2 / 16 }
Responsive web design is not a kind of program or framework. We can say it& #39;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 onlyhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="⚡" title="Hochspannungszeichen" aria-label="Emoji: Hochspannungszeichen">

{ 3 / 16 }
https://abs.twimg.com/emoji/v2/... draggable="false" alt="1️⃣" title="Tastenkappe Ziffer 1" aria-label="Emoji: Tastenkappe Ziffer 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.

{ 4 / 16 }
https://abs.twimg.com/emoji/v2/... draggable="false" alt="2️⃣" title="Tastenkappe Ziffer 2" aria-label="Emoji: Tastenkappe Ziffer 2"> The second important point to note is that don& #39;t use large fixed width or height element.

It can cause trouble. Let& #39;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

{ 5 / 16 }
https://abs.twimg.com/emoji/v2/... draggable="false" alt="3️⃣" title="Tastenkappe Ziffer 3" aria-label="Emoji: Tastenkappe Ziffer 3"> Use HTML <picture> tag

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

{ 6 / 16 }
https://abs.twimg.com/emoji/v2/... draggable="false" alt="4️⃣" title="Tastenkappe Ziffer 4" aria-label="Emoji: Tastenkappe Ziffer 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;
}

{ 7 / 16 }
https://abs.twimg.com/emoji/v2/... draggable="false" alt="5️⃣" title="Tastenkappe Ziffer 5" aria-label="Emoji: Tastenkappe Ziffer 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. Try to use themhttps://abs.twimg.com/emoji/v2/... draggable="false" alt="😉" title="Zwinkerndes Gesicht" aria-label="Emoji: Zwinkerndes Gesicht">

{ 8 / 16 }
https://abs.twimg.com/emoji/v2/... draggable="false" alt="6️⃣" title="Tastenkappe Ziffer 6" aria-label="Emoji: Tastenkappe Ziffer 6"> Use box-sizing: border-box

Don& #39;t know you consider with point valid or not but small thing can make big impact.

Box-sizing: border-box; forces an element to adjust it& #39;s padding and border inside width and height of that element

CONT...https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten">

{ 9 / 16 }
https://abs.twimg.com/emoji/v2/... draggable= Use box-sizing: border-boxDon& #39;t know you consider with point valid or not but small thing can make big impact.Box-sizing: border-box; forces an element to adjust it& #39;s padding and border inside width and height of that elementCONT...https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten">{ 9 / 16 }" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="6️⃣" title="Tastenkappe Ziffer 6" aria-label="Emoji: Tastenkappe Ziffer 6"> Use box-sizing: border-boxDon& #39;t know you consider with point valid or not but small thing can make big impact.Box-sizing: border-box; forces an element to adjust it& #39;s padding and border inside width and height of that elementCONT...https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten">{ 9 / 16 }" class="img-responsive" style="max-width:100%;"/>
Even small 4px border can damage the responsiveness. Hence I always consider box-sizing border-box for RWD.

{ 10 / 16 }
https://abs.twimg.com/emoji/v2/... draggable="false" alt="7️⃣" title="Tastenkappe Ziffer 7" aria-label="Emoji: Tastenkappe Ziffer 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.

{ 11 / 16 }
Here is the basic syntax of media query

Check out the detailed thread on media query https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔽" title="Nach unten zeigendes Dreieck" aria-label="Emoji: Nach unten zeigendes Dreieck">

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔗" title="Link Symbol" aria-label="Emoji: Link Symbol"> https://twitter.com/Prathkum/status/1363063942994685952?s=20

{">https://twitter.com/Prathkum/... 12 / 16 }
https://abs.twimg.com/emoji/v2/... draggable="false" alt="8️⃣" title="Tastenkappe Ziffer 8" aria-label="Emoji: Tastenkappe Ziffer 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

{ 13 / 16 }
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 https://abs.twimg.com/emoji/v2/... draggable="false" alt="😅" title="Lächelndes Gesicht mit offenem Mund und Angstschweiß" aria-label="Emoji: Lächelndes Gesicht mit offenem Mund und Angstschweiß">

{ 14 / 16 }
https://abs.twimg.com/emoji/v2/... draggable="false" alt="9️⃣" title="Tastenkappe Ziffer 9" aria-label="Emoji: Tastenkappe Ziffer 9"> Use frameworks if possible

Sometimes it might be a tedious task to handle responsiveness if you& #39;re wirting pure CSS. Try to use frameworks because they can save a lot of time designing a responsive website

{ 15 / 16 }
I think that& #39;s pretty much it for this thread. Did I miss something?

Feel free to add your suggestion below and thanks for reading https://abs.twimg.com/emoji/v2/... draggable="false" alt="❤️" title="Rotes Herz" aria-label="Emoji: Rotes Herz">
You can follow @Prathkum.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled:
There are a lot of misconceptions about the Turkish diaspora in Germany. Since i just finished writing an essay about this topic I thought it's time to give other people
Read more
Las mejores calculadoras online en 2020A thread http://totumat.com/2020/11/26/las-mejores-calculadoras-online-en-2020/ Cuando se estudian asignaturas que requieren de cálculos complicados, nada mejor que contar con una buena calculadora.
Read more
Mitigating #ClimateChange is as much about taking up new techs as about leaving others behindMost studies focus on #coal's global downfall but another #energy tech decline is loomingRead my new
Read more