Article

Creating A Better Responsive Design in Web Development

October 27, 2017
UI/UX
Harshit Prasad
Guest Author

A better responsive design nowadays becoming a challenge. To become a good competitor in the market, one should make their website UI design such that:

  • It should be eye-catching for the users on the first-time visit to the website.
  • Rather than having complex UI features, it should be easy to use with simple UI features. 

Developers should be more oriented towards the material design. Material design is currently the most popular front-end design trending. To make the website a better competitor in the market, we made sure it should be responsive as well to the following devices:

  • Mobile screen devices:
    • 320px - Smaller screen size
    • 375px - Medium screen size
    • 425px - Larger screen size
  • Tablets:
    • 768px - default screen size for tablets
  • Laptops:
    • 1024px - Smaller screen size
    • 1440px - Larger screen size
  • 4K:
    • 2560px - Default screen size.

We targeted these devices using @media queries in CSS3. For example, if I want to make the site responsive to the mobile devices, I will be using: 

@media screen and (min-width: 320px) and (max-width: 425px) { 
  // do something
}


Here, min-width: 320px means that the screen size should be greater than and equal to 320px and max-width: 425px means that the screen size should be less than and equal to 425px.

It is not necessary to use only these dimensions. Suppose if there is break in UI design between 320px and 425px then, one can add that screen size using @media query. In this case, nested @media queries play a quite good role. 

@media screen and (min-width: 320px) and (max-width: 425px) { 
  // do something
  // let's say, break in UI design is observed at 375px
  // add nested @media query
  @media screen and (min-width: 375px) { 
    // do something
  }
}

It is a good practice to add breakpoints in nested form for better responsiveness.

Resources

Last updated: October 24, 2017