Introduction

In today's digital age, it is crucial for websites and applications to be responsive and adapt to various screen sizes. Mobile responsiveness ensures that users can access and navigate through content seamlessly, regardless of the device they are using.

When designing for specific breakpoints, it is essential to focus on the amount of screen space available to your app rather than the screen size itself. This blog post will explore the concept of mobile responsiveness and provide recommendations for designing at different breakpoints.

Small: Designing for Screens Smaller than 640px

The small breakpoint refers to screens that are smaller than 640px. When targeting this breakpoint, it is important to create a visual separation between the left and right edges of the app window. One way to achieve this is by setting the left and right window margins to 12px.

This slight margin creates a clear distinction between the content and the edges of the screen. By implementing this recommendation, users will have a comfortable viewing experience on smaller devices, allowing them to focus on the app's content without feeling overwhelmed by the limited screen space.

Medium: Designing for Screens Between 641px and 1007px

The medium breakpoint encompasses screens ranging from 641px to 1007px. At this size, it is crucial to maintain a consistent and visually pleasing layout. To achieve this, it is recommended to set the left and right window margins to 24px.

This increased margin size provides a more spacious and balanced look, ensuring that the content is well-organized and easily readable. By giving the app's elements room to breathe, users will have a better user experience, allowing them to navigate through the app effortlessly.

Large: Designing for Screens 1008px and Larger

For screens that are 1008px and larger, the large breakpoint, it is important to utilize the available screen space effectively. Similar to the medium breakpoint, it is recommended to set the left and right window margins to 24px.

This margin size creates a visual separation between the app's content and the edges of the screen, enhancing the overall user experience. By implementing this recommendation, users will perceive the app as more organized and professional, ensuring that they can easily interact with the content and features.

TLDR

Size class	Breakpoints	Typical screen size (diagonal)	Devices	Window sizes
Small	640px or less	4" to 6"; 20" to 65"	Phones, TVs	320x569, 360x640, 480x854
Medium	641px to 1007px	7" to 12"	Phablets, tablets	960x540
Large	1008px or greater	13" and larger	PCs, laptops, Surface Hubs	1024x640, 1366x768, 1920x1080

A helper utility to check screen breakpoints in JS based application to handle responsiveness.

const SCREEN = {
  large1920: window.innerWidth <= 1920,
  large1600: window.innerWidth <= 1600,
  large1536: window.innerWidth <= 1536,
  large1366: window.innerWidth <= 1366,
  large1440: window.innerWidth <= 1440,
  large1280: window.innerWidth <= 1280,
  large1024: window.innerWidth <= 1024,
  medium962: window.innerWidth <= 962,
  medium810: window.innerWidth <= 810,
  medium800: window.innerWidth <= 800,
  medium768: window.innerWidth <= 768,
  medium700: window.innerWidth <= 700,
  medium600: window.innerWidth <= 600,
  small414: window.innerWidth <= 414,
  small375: window.innerWidth <= 375,
  small360: window.innerWidth <= 360,
};

export { SCREEN };

Conclusion

Mobile responsiveness is crucial in today's digital landscape. Designing for specific breakpoints allows apps and websites to adapt to different screen sizes, ensuring a seamless user experience.

Whether designing for small, medium, or large screens, it is important to consider the available screen space and create visual separations using appropriate window margins. By following these recommendations, developers and designers can create mobile-responsive interfaces that cater to the needs of their users, regardless of their device.