Renovando el concepto de diseño responsive

Recuerdo hace años cuando apenas llegaba a mis ojos el concepto de “responsive design”, recuerdo que incluso antes de ello la práctica más o menos común era generar diversos sitios basados en las dimensiones del dispositivo y mandarlo a llamar con un script para que abriera la determinada sección.

Los media queries

Después nos topamos con la magia de los media queries, que para quien no lo sepa, son un módulo de CSS que permiten que determinado contenido se adapte a ciertas dimensiones. Gracias a esto, podemos usar un sólo sitio y adaptar su contenido para diferentes dispositivos.

En el transcurso se han establecido ciertos “estándares” al definir las dimensiones sobre las que se deben trabajar los media queries para tener un sitio responsive funcional. Aún al día de hoy es una práctica común diseñar en base a las dimensiones del iPhone (320px y 480px), iPad (768px, 1024px) y monitores basados en el mínimo de 1024px (960px y algunas variaciones mayores), Bootstrap, uno de los frameworks más populares, maneja este estilo de estructura.

Los típicos breakpoints ya no son suficientes

Ahora ya no nos podemos conformar con diseñar sólamente para este reducido margen de dispositivos móviles, porque como verán, en unos cuantos años la cantidad de dimensiones de pantallas han crecido exponencialmente, y la tendencia ya no sólo muestra crecimiento, sino expansión a otra clase de plataformas y dispositivos.

La cantidad de dispositivos móviles y computadoras siguen creciendo. Imagen por Pivotal Labs

Si estamos al tanto de los avances, nos habremos dado cuenta que la gente puede acceder a la web a través de pantallas de televisión, relojes, en sus autos y en sus lentes (Google Glass). ¿Quién sabe que otros objetos conectados a internet se volverán parte de nuestras vidas?

Como diseñadores web, necesitamos tener esta conciencia de estos cambios y como tal, prepararnos para planear con otro enfoque.

La web necesita fluir

Josh Clark manifiesta precisamente esta necesidad de que el contenido no sólo se adapte a determinadas dimensiones, sino que fluya completamente, como agua:

Content like water: design flexible content to flow anywhere. “Put water into a cup, it becomes the cup”—Content strategist Bruce Lee #fowd

— Josh Clark (@globalmoxie) noviembre 7, 2011

Haciendo hincapié, estoy hablando de que la web cada vez se orienta más hacia el contenido más allá de animaciones y saturación de efectos. Tomen en cuenta que si hablamos de diseño para todo tipo de dispositivos, deben saber que aún la velocidad de respuesta de javascript en móviles es aún lento, y esto afecta en la experiencia del usuario.

¿Cómo diseñar con un pensamiento más fluido?

Para empezar, creo que ayuda mucho dejar de pensar en un sitio web como un todo, sino como un conjunto de componentes que muestran contenido o realizan alguna función. Pueden pensar en diferentes casos, digamos, móvil, tablet y escritorio, pero también conviene pensar y bocetar el comportamiento de los componentes del sitio ante diversas situaciones y cómo se reestructurarían. Ayuda mucho empezar desde la dimensión más pequeña posible, que es parte del pensamiento Mobile First.

Por lo general, inicio mis bocetos desde su pre-visualización en móviles

Es un proceso que puede tener muchas variantes, en mi caso, me he encontrado trabajando con porcentajes y rem’s (root em), y que el contenido se adapte lo mejor posible ante dimensiones mínimas. En el proceso, me he apoyado mucho con el uso de SASS, un preprocesador de CSS que me ayuda a tener mejor control de mi hoja de estilos.

Espero que este artículo les ayude en su proceso, si tienen alguna duda o comentario al respecto, ¡compartan!

Te puede interesar