Responsive design and breakpoints
When we talk about responsive design, we refer to the ability of a website to adapt and display correctly on various devices. This concept has gained significant relevance in recent years, as the use of mobile devices, such as phones and tablets, is not only growing but has become the primary means of internet access for most users today.
55% of users who connect to the internet daily do so mainly through their mobile phones, followed by users who primarily use computers, representing 42%.
This often leads many designers and user experience-focused design teams to approach website creation from a mobile-first perspective.
What are breakpoints?
This is where various concepts emerge concerning the creation of websites that can adapt to mobile screen resolutions (minimum of 320px horizontally) to desktop screens. Here, the term “breakpoints” is introduced.
Basic breakpoints
When we talk about breakpoints, we refer to the established resolutions where, depending on the web’s display, the content grid “changes”. This behavior involves modifying the content’s layout and properties based on screen width. These are defined as “basic breakpoints”:
- For mobile devices, it is common to set a range between vertical dimensions of 0 to 480px.
- For tablets, the range of resolutions expands significantly, from 480px to 960px horizontally.
- From 960px to 1328px, we have resolutions dedicated to desktops. Beyond 1328px, it is common or recommended to “lock” the web page’s capabilities.
Complete breakpoints
On the other hand, based on the needs of the wide variety of devices on the current market, we can define “complete breakpoints”, which enhance or complete responsive design capabilities, useful for small devices or various types of tablets, as well as much larger computers. Here, we establish new breakpoints:
- For mobile devices, we divide two special measures, setting a breakpoint at 320px: small mobile devices from 0 to 320/360px, dedicated to screens like smartwatches and small mobiles; 320/360px to 480px for larger mobile devices.
- Between 480px and 960px dedicated to tablets, we place a complete breakpoint at 768px.
- Between 960px and 1368px, dedicated to desktop resolutions, we place a complete breakpoint at 1024px, which can be problematic because it is based on very specific devices, such as Apple computers.
Finally, we must emphasize that, depending on a website’s specific needs, some behaviors of the previously mentioned breakpoints may fall short, making it necessary to create custom breakpoints. However, these are not recommended.
We might think that the ideal number of breakpoints is as many as possible to make our website highly adaptable, but this is not the case. The goal of breakpoints is to create adaptable intervals that cover general devices, not specific ones. Therefore, our ideal website should have up to 3 specific breakpoints, with a maximum of 4 (if there is a demonstrated widespread use of certain dimensions), generally covering the previously mentioned intervals.
It is common that within these intervals, some initially designed elements do not display correctly, remaining misplaced or not fitting the design. For such cases, there are “media queries”: properties that define the pixels at which an element will change as the resolution changes. In other words, media queries allow us to successfully and dynamically implement high-fidelity layouts with our responsive designs.
Responsive design and breakpoints are fundamental for creating websites that adapt to a wide variety of devices. It is crucial to find a balance with an appropriate number of breakpoints to ensure a smooth user experience without overly complicating the development and maintenance of the site. In the end, a well-planned and executed approach to responsive design enhances accessibility and usability.
This is a translation of the following article from our corporate website:
