8 Responsive Web Design Best Practices to Know in 2021 by@RAHULISM

8 Responsive Web Design Best Practices to Know in 2021

Rahul Developer and Blogger explains the 8 responsive web design best practices that have helped him master this element of web development, and might help you make your websites responsive in 2021. Use relative units instead of using an absolute unit start using relative units. Divide design into Breakpoints that allow you to re-arrange your web layout dependent on the size of the browser or device. Understand Web VS System Fonts and understand Web VS system Fonts. Use nested objects instead of controlling the nested element instead of constantly controlling each element.
image
Rahul Hacker Noon profile picture

Rahul

Developer and Blogger

I still struggle with making websites responsive. I know beginners surf the web (or at least, that's what I did) in an attempt to learn how to make websites responsive, but what you'll find is fragmented explanations of smaller concepts.

In this post, I'm going to try my best to explain the 8 responsive web design best practices that have helped me master this element of web development, and might help you make your websites responsive in 2021.

1. Responsive vs Adaptive Design: Understand the difference

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.

2. 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}

3. 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) {...}

4. 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;
         }
      }
    

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

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

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

8. 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 🤓

SUPPORT ME

Also published here.

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.