Responsive Web Design son muchas cosas, es optimización para tres elementos fundamentales, navegadores y sistemas operativos, velocidades y anchuras de pantalla. En este caso vamos a tratar sobre la optimización para pantallas, los tipos de pantallas y los saltos que el diseño debe pegar para ir adaptándose.

Observarás que un diseño adaptable es responsivo a los cambios de la ventana del navegador. A medida que la hacemos mayor o menor la plantilla de la página va cambiando para adaptarse mejor a las nuevas dimensiones. Al estirar la pantalla observarás que, de una única columna en definiciones pequeñas, pasa a ser de dos columnas en una anchura de pantalla mayor, luego pasa a tener tres columnas cuando amplias todavía más el espacio y así indefinidamente, tal como el diseñador haya definido.

A esos saltos en los que un diseño cambia de un layout a otro, a medida que va agrandándose la ventana del navegador les llamamos breakpoints y se producen gracias a las media queries. En este artículo hablaremos de los breakpoints y sobre cuáles son los puntos ideales en los que realizarlos.

Los breakpoints no deben orientarse a dispositivos

Este es el punto más importante del artículo, puesto que generalmente las personas con menos experiencia en Responsive Web Design tienden a asumir que existen unas medidas estándar en las que se deben aplicar los breakpoints. Podría haberlas conforme a las dimensiones de diversos dispositivos, como iPhone, iPad, ordenadores con pantallas estándar y luego hablaremos de ellas, pero la realidad o la recomendación va por otro lado.

Como vimos en los capítulos de introducción en el Manual de Responsive, uno de los motivos por los que existe esta filosofía de diseño es el de no crear versiones distintas para distintos tipos de sistemas. No creamos una versión para móviles, otra para tabletas y otra para ordenadores. Eso debe haber quedado claro. Pues de la misma manera, no creamos breakpoints orientados a dispositivos. El motivo es el mismo: es imposible que puedas generar tantos saltos como tipos de pantallas y sus resoluciones, etc.

Si te empeñases en crear breakpoints con las dimensiones de dispositivos en la cabeza, vas a tener que crear saltos para cientos de dispositivos. Cuando saquen un nuevo modelo o una nueva marca seguro que no quieres actualizar tus saltos para que la web se vea bien en ellos. Es imposible alcanzar a todos los dispositivos, todas las marcas y modelos. Es imposible que conozcas todas las dimensiones de pantalla, las existentes hoy y las que puedan existir mañana.

Cómo saber el lugar donde colocar un breakpoint

Si no haces breakpoints orientados a dispositivos, ¿cómo saber dónde colocarlos? La respuesta te la da tu diseño. En otras palabras, breakpoint debe estar orientado al diseño particular de tu web.

Para saber dónde colocar los saltos con las mediaqueries debes estirar la ventana del navegador, partiendo de la ventana con dimensiones reducidas (mobile first) vas estirando la anchura hasta que comienzas a apreciar que tu diseño está viéndose peor. No es que los usuarios se dediquen a cambiar las dimensiones de la ventana del navegador, es algo que hacemos los diseñadores, para imitar rápidamente distintos tamaños de pantalla de móviles o tablets.

Toma cualquier página web adaptable, como la de DesarrolloWeb.com, y ponla en dimensiones de anchura pequeñas. Entonces agranda la ventana y apreciarás que en determinado momento surge mucho espacio vacío o que las columnas comienzan a ser demasiado grandes. Entonces, en ese momento, poco antes o poco después, verás que "zas", cambia el layout.

Osea, vas haciendo la página más ancha y cuando tu diseño empieza a empeorar, o los espacios comienzan a estar peor distribuidos, entonces es el momento adecuado de colocar un breakpoint.

Breakpoints grandes y pequeños

La regla de oro es no limitarnos a nosotros mismos a un número de breakpoints determinado. No debes escatimar a la hora de hacer breakpoints. No los veas como puntos donde cambias de layout, orientado a móviles, tablets o monitores de ordenador de alta definición. Como hemos dicho, no es ese el objetivo, crear versiones del diseño, aunque mantengas un único HTML. A veces un breakpoint puede ser simplemente cambiar la alineación de un elemento, la medida de un texto en un titular, etc. Los puntos donde colocas media queries pueden ser para cualquier cosa que necesites. A veces es algo tan simple como una imagen, que a partir de determinadas dimensiones, quieres que flote (float) para que el texto alrededor la rodee. O un aumento minúsculo en la fuente de la página. No importa que tan pequeño es el cambio, si ves que beneficia al aspecto de tu página, es motivo para crear un nuevo "media queries".

Por tanto, hay tanto breakpoints grandes, que te cambiarán el layout de la página y por tanto afectan de manera más radical al diseño y otros pequeños puntos de ruptura intermedios, que realizarán pequeños ajustes para solucionar detalles que merezca la pena retocar. Por todo eso, volvemos a remarcar el punto anterior, es importante que los breakpoints los hagas en función de tu diseño, apreciando el momento adecuado para producirlos, agrandando y empequeñeciendo la ventana del navegador para decidir cómo y cuándo.

Medidas estándar para media queries

Hay diseñadores que, a pesar de todo lo dicho anteriormente, aún se preguntan si existen medidas estándar para una página, en los que crear sus breakpoints. No podemos darte esas medidas, entre otras cosas porque no pretendemos contradecirnos a nosotros mismos, al menos no en este artículo. Pero no desesperes porque realmente no las necesitas.

Volvemos a insistir, las veces que haga falta, que las mediaqueries no se deben definir para optimizar un diseño para iPad o iPhone, etc. sino que deben ser aquellas que produzcan una adaptabilidad mejor del diseño. Y eso solo lo consigues conociendo tu propio diseño y no conociendo los soportes desde donde lo van a acceder. Recuerda además que cualquier colección de dispositivos que puedas tener siempre va ser parcial, puesto que es imposible reunir todos los tamaños de pantalla y resoluciones en ningún documento. Básicamente además porque necesitaríamos estar actualizando esa lista casi diariamente.