Introducción a Responsive design

El espectro de pantallas, tamaños y resoluciones crece cada día y crear un diseño específico para cada tamaño sería imposible. El diseño web responsivo soluciona este problema.

No podemos pensar en tamaños fijos ni en sólo diseñar en pixeles. Ahora la web se va volviendo algo más fluido y orgánico y los principios de diseño responsivo ayudan a ir con la corriente en vez de luchar contra ella. Una página se debería de verse y funcionar bien independientemente de si la estás viendo en una computadora o un teléfono o usándola con tu mano o con un mouse. Lograr esto es un conjunto de conceptos y técnicas que, en su conjunto, se llaman ‘diseño responsivo’.

Principios básicos

Vamos a ver siete principios básicos de diseño responsivo:

Diseño responsivo vs. diseño adaptable

Desplazamiento

Unidades relativas

Los breakpoints

Valores max y min

Objetos anidados

Tipografías web vs. tipografías del sistema

Diseño responsivo vs. diseño adaptable

Pareciera que es lo mismo pero no lo es. Con diseño responsivo, el mismo layout responde automáticamente al tamaño de la pantalla, como una pelota que crece o encoge para pasar por diferentes aros. La ventaja es que las páginas responsivas se cargan más rápido pero son más complejos de implementar.

Diseño adaptable es diferente porque no hay un solo layout, sino varios layouts diferentes que se diseñan para múltiples pantallas. El layout que se use depende del tamaño de la pantalla. Por ejemplo, puede haber un layout específico para móvil, tablets y computadora y cada una se diseña por separado. Cada diseño se carga cada que alguien visita la página y el que se le presenta al usuario depende del dispositivo. En vez de una misma pelota que crece y encoge, tienes varias pelotas para cada aro. La ventaja es que es más fácil de implementar pero es menos flexible.

Las dos metodologías se complementan entonces no hay una forma correcta o incorrecta de manejarlo. Que el contenido lo defina.

⁠

Desplazamiento

Cuando una pantalla se va haciendo más chica, el contenido empieza a ocupar más espacio vertical. Todo el contenido que esté abajo se desplaza hacia abajo.

⁠

Unidades relativas

Las pantallas varían muchísimo de tamaño como también la densidad de pixeles de cada pantalla. Por eso hacen falta unidades que sean flexibles y siempre funcionen. Por eso usamos unidades relativas como porcentajes. Diseñar algo que ocupe el 50% de la pantalla quiere decir que siempre ocupará el 50% sin importar el tamaño de la pantalla.

⁠

Los breakpoints

Breakpoints te permiten cambiar el layout en puntos predefinidos. Por ejemplo, tener 12 columnas en una pantalla de 1440px pero sólo 4 columnas para móvil. Los breakpoints te permiten combinar diseño responsivo con diseño adaptable para lograr experiencias óptimas en cada tamaño de dispositivo.

⁠

Valores max y min

A veces queremos que el contenido ocupe todo el ancho de una pantalla, en un móvil por ejemplo, pero que el mismo contenido ocupe todo el ancho de una pantalla como tu tele igual y no tiene sentido. Por esto tenemos valores max/min. Por ejemplo, fijar un ancho de 100% y y ancho max de 1,000px significa que el contenido va a ocupar toda la pantalla pero nunca será de más de 1,000 pixeles.

⁠

Objetos anidados

¿Se acuerdan de posición relativa? Muchos elementos que dependen de otros sería difícil de controlar entonces meterlos en un contenedor ayuda a mantener claridad y organización. Aquí ayudan las unidades estáticas como los pixeles. Son útiles para objetos anidados que no quieres que escalar, como logos y botones.

⁠

Tipografías web vs. tipografías del sistema

Durante décadas, los diseñadores se han visto en la obligación de usar un pequeño grupo de fuentes instaladas en los ordenadores, generando que afecte a la propuesta de diseño original y su performance. Por ello la tipografía web permite no depender de estas fuentes y abre camino a un catálogo de otras posibilidades. Un claro ejemplo es Google Fonts donde puedes encontar un gran grupo de familia de tipografías de uso libre; hay que tener cuidado en no utilizar muchas fuentes porque cuando el usuario vaya al producto la carga de la página puede ser más lenta. Por otor lado, tipografías del sistema son aquellas que se encuentran en la mayoría de los dispositivos de los usuarios.

Finalmente el uso y su funcionalidad dependerá del objetivo que deseamos , además de evaluar por qué decidimos utilizarlas.

⁠

Te compartimos un taller donde ahondamos a fondo estos temas:

⁠

Ayúdanos a seguir mejorando nuestro contenido🤩

Puedes dejarnos tu comentarios

aquí⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.