Responsive design y breakpoints

Cuando hablamos de responsive design, nos referimos a la capacidad de adaptación y visualización de una página web en los distintos dispositivos en los que se visualiza. Este concepto adopta una relevancia en los últimos años mayor, ya que el uso de dispositivos móviles, como teléfonos o tablets, no solo es creciente, sino el acceso principal a internet de la mayoría de usuarios hoy en día. 

El 55% de usuarios que se conectan al día a internet lo hacen a través de sus móviles principalmente, seguidos por los usuarios que lo hacen principalmente con ordenador, representando un 42%. 

Esto provoca que en muchas ocasiones, a la hora de abordar la creación de páginas web, muchos diseñadores y equipos de diseño enfocado a experiencia de usuario lo hagan desde una perspectiva centrada en el móvil primordialmente. 

¿Qué son los breakpoints?

Aquí, es donde comienzan a surgir distintos conceptos respecto a la hora de crear páginas web que tengan capacidades de adaptación en resoluciones de pantalla de móvil (mínimas de 320px horizontales) a desktop. Es aquí donde se introduce el término de “breakpoints” o puntos de corte. 

Breakpoints básicos

Cuando hablamos de breakpoints, nos referimos a las resoluciones establecidas en las que dependiendo de la visualización de la web, la retícula de contenido “cambia”. Es un comportamiento en el que dependiendo de la definición del ancho de pantalla, el ordenamiento de los contenidos y sus propiedades se modifican para adaptarse. Estos vienen dados por los puntos exactos en los que se pasa de un tipo de pantalla a otro, siendo estos establecidos como “breakpoints básicos”:

• Para dispositivos móviles es común delimitar una línea entre las dimensiones verticales de 0 a 480px. 
• Para los tablets la variedad de resoluciones se abre muchísimo, siendo desde los 480px a los 960px horizontales. 
• De 960px hasta 1328px, contamos con resoluciones dedicadas a desktop. A partir de aquí, es común o recomendado que a partir de 1328 px, las capacidades de páginas web se queden “bloqueadas”.

Breakpoints completos

Por otro lado, según las necesidades que puedan tener la amplia variedad de dispositivos en el mercado actual, se pueden definir los conocidos como “breakpoints completos”, puesto que añaden o completan las capacidades de responsive design, muy útiles para dispositivos pequeños o distintos tipos de tableta, así como ordenadores mucho más grandes. Aquí situamos nuevos puntos de corte:

• En dispositivos móviles, dividimos 2 medidas especiales en dispositivos móviles situando un breakpoint en los 320px: dispositivos móviles pequeños que van desde los 0 a los 320/360px, dedicados a pantallas como los smartwatch y distintos móviles pequeños; 320/360px a 480px para dispositivos móviles de mayor tamaño.
• Entre el 480px y 960px dedicados a tablet, situamos un punto de corte completo en el 768 px.
• Entre 960px y 1368px, dedicados a las resoluciones de desktop, situamos un punto de corte completo en el 1024px, un breakpoint que llega a ser conflictivo porque se fundamenta en dispositivos muy concretos, como los ordenadores de Apple. 

Finalmente, debemos de hacer hincapié en que, según las necesidades personalizadas de una página web u otra, algunos comportamientos de los breakpoints anteriormente mencionados se pueden quedar cortos, por los que acaba siendo necesario realizar puntos de corte personalizados. Sin embargo, no son recomendados.

Podríamos pensar que el número ideal de breakpoints implica el mayor posible, puesto que haría muy adaptable nuestra web, sin embargo esto no es así. El objetivo de los breakpoints es crear intervalos adaptables que abarquen dispositivos en general, no concretos. Es por ello que nuestra página web ideal debería de tener hasta 3 breakpoints concretos, con un máximo de 4 (en caso de que se demuestre el uso generalizado de unas dimensiones concretas), ya que suelen darse por esos 3 intervalos ya anteriormente mencionados.

Es común el caso de que dentro de ese intervalo, algunos elementos inicialmente diseñados no se visualicen correctamente, quedando en el aire o no correspondiéndole al diseño. Para esos casos, existen los “media queries”: propiedades que definen los píxeles en los que un elemento va a cambiar con el paso de resolución. Es decir, que los “media queries” son los que nos permiten en maquetación realizar con éxito y en vivo las maquetas de mayor fidelidad con nuestros diseños en responsive. 

El responsive design y los breakpoints son fundamentales para crear páginas web que se adapten a una amplia variedad de dispositivos. Es crucial encontrar un equilibrio entre un número adecuado de breakpoints para asegurar una experiencia de usuario fluida sin complicar en exceso el desarrollo y mantenimiento del sitio. Al final, un enfoque bien planificado y ejecutado en responsive design mejora la accesibilidad y la usabilidad.

Foto de portada de Daria Strategy en Unsplash.