Mastering responsive Web Design
Tags: webdev, codenewbie, css, programming
Published: 2021-02-27 05:03:02

I haven't posted anything from the last somedays. Though I have written 12 articles related to JavaScript, React and CSS. 

I still struggle with making the website responsive. I know beginners surf on the web(i had done this earlier) to make the website responsive but what they get is just an explanation of small concepts. 

Here in this post, I am gonna clear everything about how to master Responsive Web Design.   

---

# 600+ Free Design resources

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6q3qdida0rc6r3zpuua2.jpeg)

Resources. Freebies. Learn.
We're making things easier on Internet.

Visit - [600+ free design resources](https://www.producthunt.com/posts/600-free-design-resources/)


---

### Know Responsive vs Adaptive Design

##### Responsive

- Dynamic changes to the appearance of the website. 
- Depend on the screen size and orientation of the device. 

##### Adaptive

- Adaptive design uses a few fixed layouts and then selects the best layout for the current screen sizes. 


---


### Use relative units

Instead of using an absolute unit start using relative units. 

**Absolute units** => Don't use {cm, mm, in, pc, px, pt}

**Relative unit** => Use {em, rem, lh, vw, vh}

---

### Divide design into Breakpoints

Breakpoints are predefined areas of measurement that allow you to re-arrange your web layout dependent on the size of the browser or device. 

**Bootstrap responsive breakpoints** 

- Small device = `@media (min-width:576px) {...} `
- Medium device = `@media (min-width:768px) {...}`
- Large device = `@media (min-width:992px) {...}`
- Extra large device = `@media (min-width:1200px) {...}`


---

### Understand Max and Min values

Understand when to use Max and Min values. 

- It will work when the device width is greater than or equal to 1024px. 

```css
@media (min-width: 1024px){
    h1 {
      font-size: 1rem;
     }
  }
```

- It will work when the device is less than or equal to 1024px

```css
@media (max-width: 1024px){
    h1 {
      font-size: 0.5rem;
     }
  }
```

---

### Use nested objects

Nested objects or container are the objects that are inside another object. 

It allows controlling the nested element instead of constantly having to control each element. 

```HTML

<div class="parent">
   <span class="nested-element-1">Read</span>
   <p class="nested-element-1">RAHULISM></p>
   <p class="nested-element-1">Articles</p>
</div>

<!-- STYLE -->
<style>   
  .parent span {
    color: black;
  }
  .parent p {
    color: blue;
  }
</style>  
```

---

### Mobile or Desktop first

##### When Desktop First is Appropriate

- When the sales are high on desktop
- User interfaces are rich
- Focusing on complex and enhanced visuals
- Website which has productivity tools or business-related service
- Highly refined user experience


##### When Mobile First is Appropriate

- Simple and minimalistic websites
- User experience is optimized for mobile
- Website like entertainment, news or another on-the-go category. 

---

### Understand Web VS System Fonts

Every piece of typography or font that is loaded up on your website is going out to a server and make a request and come back. 

- System fonts are default fonts and they are fast to load
- Web fonts slow down your load times for the user who are browsing your site

SOME SAFE WEB FONTS THAT ARE RENDERED CORRECTLY

Georgia, Times New Roman/Times, Arial / Helvetica, Comic Sans, Lucida Sans Unicode, Tahoma / Geneva, Courier New. 

---


#### Bitmap vs vector images 

Bitmap images are stored as a series of tiny dots called pixels, 

A vector image is an artwork made up of points, lines and curves that are based upon mathematical equations, rather than solid coloured square pixels. 

###### What to use? 

**VECTOR IMAGE**: More scalable than bitmap, Ability to increase the size of the graphic without pixelation and Better Quality. 

---

😎Thanks For Reading | Happy Coding🤓


Get weekly newsletter of amazing articles I posted this week and some offers or announcement. Subscribe from <a href="https://mailchi.mp/9f73b65b9c38/rahulism" target="_blank">Here</a>

<a href="https://www.buymeacoffee.com/rahxuls" target="_blank"> <img src="https://res.cloudinary.com/rahulism1/image/upload/v1608182430/bmc_nbxakd.png"></a>