Introduction to Responsive Design
Tags: css, webdev, html, design
Published: 2021-06-16 17:34:17

A good website should be readable and appealing when used across all devices of any size.
Such a website must fit and scale automatically to screens of different sizes.

## What is this blog about?
In this blog we will be focusing on _some_ of the techniques used to make a website responsive and create best user experiences.

## Prerequisites for this blog
This blog assumes that you are familiar with the basics of HTML and CSS.

## What is ***Responsive Design***?
> Responsive web design is the concept of using HTML and CSS to build layouts that adapt to all screen sizes, resolutions, and devices.

<hr />
## Responsive Design Techniques
Three techniques are discussed in this blog that are used to make websites and pages more responsive:
1. [Setting Viewport](#1-setting-the-viewport)
1. [Fluid widths and layouts](#2-fluid-widths)
1. [Media Queries](#3-media-queries)

***Check out the website and code shown in the blog [here](https://responsive-design-demo.netlify.app/).***



### 1. Setting the ***viewport***
* What is **Viewport**?
  * A viewport is the area of the screen that is visible to the user. 
  * This area is smaller in devices such as mobile phones or tablets when compared to a PC.

<br />
* Why should you **set the viewport**?
  * The viewport gives instructions to the browser on how to set the width of the screen such that it scales to the width of the device
  * It also informs to zoom the content such that it's intended for the device at hand.
  * This ensures that the content does not appear zoomed out and does not appear as it does on a desktop layout.  

<br />
* How do you **set the viewport**?
  * The viewport is set inside the `<head>` using the `<meta>` tag.
    ```html
     <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
     </head>
    ```
  <br />
  * What does the above code mean?
    * `width=device-width`: sets the width of the screen to the width of the device.
    * `initial-scale=1.0`: sets the initial zoom/ scale to 1

Look at the images below, and see the difference in screen width (in mobile browsers) and content size
1. Without <meta> viewport tag
   ![Mobile screen browser width without viewport](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvq9urk5hiasyaogwot4.png)
   * Notice how the content is zoomed out and the image does not adjust to the screen size and width of the device.
1. With <meta> viewport tag
   ![Mobile screen browser width with viewport](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i6i4rymtyolgbm0rmgwh.png)
   * Although the image does scale to the size of the screen, the image is not responsive. To handle this, we use [Fluid Widths](#2-fluid-widths).
   


### 2. ***Fluid Widths***
* What is **fluid width**?
  * **Fluid-widths** are relative measurements, that are responsive to change in screen size and viewports.
  * This is in contrast to **fixed-layouts**, which are static measurements and are non-responsive.
  * Fluid widths use the entire width of the browser, and such a layout is called ***liquid layout*** or ***fluid layout***.

<br />
* Why should we **use fluid width**? 
  * Take the example of a sample page in the image below. 
    ![Sample website with image and scrollbar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7u5qt0rwsu9k2dd69r8e.png)
  * Notice how when the size of the browser shrinks, a horizontal tab appears to view the entire image. 
    ![That won't do at all](https://tenor.com/view/well-that-wont-do-at-all-not-good-enough-not-okay-not-helpful-lucifer-morningstar-gif-16834111.gif)
  * This is definitely not looking good, and does not provide a good user experience. 
  * Since the image is not responsive, it does not shrink in size when the browser width (or viewport width) reduces. This is where fluid width comes into play.

<br />
* How can we use **fluid-widths**?
   * Instead of using pixels (px), use percentages (%) , viewport height (vh) and viewport width (vw).
   * Image in the example website above uses 500px as it's width. 
   * To make this a fluid image, we can use percentages or vw to set a width. 
     ```css
     img {
         width: 80% | 50vw;
     }
     ```
  * Percentages occupy space relative to width or height of the parent element. Whereas vw / vh take up space relative to width or height of the viewport.
  * Now, as the size of viewport decreases, the image also shrinks relatively. 
  * There comes a point when the image shrinks and ends up becoming very small.
  * To tackle this, we can set a minimum height or width, below which, the image should not be shrunk. 
    ```css
     img {
        min-width: 300px;
     }
    ```
  * Now the image will not shrink below `300px` even if the viewport size becomes smaller than this. 
  
* Fluid widths and layouts are incredibly useful when you have to handle multimedia content in your site. 
* Another simple use of fluid width is when you set a max-width for a container in the body and center the content within it.
  * max-width ensures that the content will not overflow beyond this width, and will be shrunk if it becomes greater than the specified width.


### 3. Media Queries 
* What are **media queries**?
  * Media queries are series of CSS styles applied to elements in the page for a particular viewport or screen size.
  * Multiple media queries can be added to the same style sheet each focusing on viewport or device of a particular size.
  * The size of screen at which a media query is added are called ***breakpoints***.
  * You can create web pages initially for mobile devices with minimal content, and then extend the same page to devices of larger size. 
      * This is called ***mobile-first design*** and is highly common among developers.

<br />
* Why do we need **media-queries**?
  * Let's take the sample webpage in the image below, and try to introduce media queries.
    ![Sample webpage with an image and text displayed side by side](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qyi7bdhq1n3165o63zou.png)
  * Obviously there is nothing wrong with the image or text in the image above. 
  * But when you view this page in a smaller device (a tablet or mobile), the image and text shrink to become so small that it looks unappealing. 
    ![Sample webpage with an image and text displayed side by side in a mobile device](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43lwgyz9l1w4qdpbbp3q.png)
    
    ![Kinda messy](https://media1.tenor.com/images/fd959fd0c2d6d9b2cc9fc049f2296489/tenor.gif?itemid=18699813.gif)
  * Situations like these can easily be handled using **media queries.**

<br />
* How do we add **media queries**?
    ```css
     @media screen and (max-width: 768px) {
         .flex-container {
             flex-direction: column;
         }
     }
    ```
  * What does the above code mean?
      * The above code targets all devices whose width is less than 768px (mobile devices).
      * Then applies styling to the flex-container such that the image and text are displayed vertically instead of horizontally.
      * ***NOTE***: This style is applied to the `flex-container` class only if the web page is displayed as ***screen*** (not printed document) **AND** the ***width of the viewport is at most 768px*** (width <= 768px).
      * Once the breakpoint is crossed (769px), the image and text are displayed horizontally.


## CONCLUSION
* We have seen three highly used techniques for creating a good  responsive website.
* Viewports and liquid layouts are highly useful when breakpoints in a website are not continuous. 
* That is when there is a gap between in the viewport size where media query is introduced. 
* Although all styles and media queries can be added to the same stylesheet, it is a good practice to support media queries and generic styles.


There are modern techniques such as *grid* and *flexbox layout*, which are also gaining popularity.
They handle gaps between breakpoints better than the above mentioned technology.

But nevertheless, the 3 discussed techniques are not **obsolete**. They are still practiced by developers, and are often used along with the modern techniques.

> In conclusion, ***responsive design does not end here***. 

There are many resources available on the internet that are helpful in mastering responsive design.
I suggest doing a Google search to explore more about this topic.

Lastly, I would also recommend using the best of both worlds! The 3 technologies discussed here as well as the modern techniques.

> ***Be responsible and make your sites responsive!***

Hope you had a good read. Do leave a heart, pin or save it, and share this among your dev friends!