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

8 Responsive Web Design Best Practices to Know in 2021

Rahul Hacker Noon profile picture

@RAHULISMRahul

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.