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

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

Visit - 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.

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

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

@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.


<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 Here

Mastering responsive Web Design