Member-only story
What are breakpoints in web UI design? And how to use them?
A breakpoint is the range of predetermined screen sizes that have specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size/ viewport and orientation.
BUT!!! Does that work in real life?
Due to the variety of Grids and Design Systems, we now have multiple predetermined breakpoints to increase our confusion in UI Designs.
Ok, so how to save ourselves from this set of rules by these systems?
Rather than being concerned with system breakpoints, the best practice is to build for your smallest viewport. When you expand the viewport, there arrives a point where the design looks crap over there add a custom breakpoint.
Start with MFA
Approaching the mobile-first design is the best approach for a responsive design. It allows you to layout the content that is most important to your customers, clearly and logically on the smallest screen real-estate.
Max-Width for your mobile viewport will be 1st breakpoint.
