Puntos de ruptura en el diseño responsivo

¿Qué significan los puntos de ruptura?

Los puntos de ruptura, o sólo breakpoints en inglés, son las medidas de anchura que utilizamos para el diseño responsivo. Con esas medidas aplicamos los estilos CSS con los tamaños concretos y definidos por las media queries. Con otras palabras, los puntos de ruptura son saltos en los que la pantalla va a cambiar de layout.

Ya sabemos que el diseño responsivo es una solución de desarrollo web para aplicar versiones de las páginas web a los diferentes dispositivos de navegación por la red. Así que el diseño responsivo se adapta a los diferentes tamaños del navegador, seguido la misma estructura HTML. A medida que se amplía o se disminuye el tamaño de la pantalla, la página web que es responsiva va adaptar sus elementos y disposiciones con esa nueva dimensión.

Las medidas de los dispositivos

Hoy ya existe un estándar de las medidas de las aplicaciones que evitan romper el estilo CSS de nuestras páginas, referentes a los dispositivos más utilizados en el mercado (por ejemplo el iPhone, iPad etc.). El desarrollo sigue según las necesidades de cada diseño web y la distribución de sus espacios definidos. De esa forma no adaptamos sólo el grid de la web con las media queries apropiadas, también utilizamos los puntos de ruptura para elementos únicos que necesitan de una optimización concreta para determinada resolución, que va a personalizar y dejar nuestro diseño web con la mejor performance.

La mejor práctica en los puntos de ruptura del dispositivo es diseñar primero para la página más pequeña, que logra ser el móvil. El concepto es conocido como Mobile First que piensa el layout y desarrolla primero una página para los dispositivos móviles. Después de eso, se añade los puntos de ruptura de manera a ampliar el tamaño, como el tablet y por fin el desktop.

Los breakpoints estándar son:

● Móviles: entre 320 y 480 píxeles.

● Tablets: entre 768 y 1024 píxeles.

● Pantallas grandes: más de 1200 píxeles.

La ventaja de centrarse en el diseño y no en los dispositivos es asegurar que nuestro diseño se adapta a cualquier dispositivo que aparezca con nuevos tamaños. Hay que tener en cuenta que con pantallas mayores debemos considerar un diseño fullscreen (de esquina a esquina) o establecer un ancho máximo (con la propiedad max-width). Y es importante recordar que las media queries identifican el ancho de página y también hacen referencia a la densidad del pixel, la orientación etc.

El objetivo principal del diseño web es mejorar la experiencia del usuario. Por eso los puntos de ruptura son indispensables para diseñar experiencias porque se adaptan a los diferentes dispositivos digitales.

Para saber más, conoce nuestro curso de Layouts Responsivos aquí en Alura Latam.

Puedes leer también:

• ¿Sitio web único y responsivo o sitios dedicados?
• Creación de componentes CSS con el estándar BEM
• ¿Cómo lidiar con los límites de resolución en sitios responsivos?