Renovando el concepto de diseño responsive

Publicado el 27 / 05 / 2014
El diseño responsive llegó para quedarse y todos los involucrados en esta área debemos estar al tanto de ello. Conforme sigue la tecnología avanzando y la cantidad de dispositivos creciendo, ha llegado el momento de trabajar el diseño responsive desde otra perspectiva.

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

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:

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

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!


Escrito por

Te puede interesar

  • Carlos M

    Que tal Bernardo, tu como web designer me gustaría que postearas o me dieras tu opinión acerca de tu posición de adobe Muse, ¿Es bueno?, ¿Es malo? Ventajas o desventajas. Es válido usarlo? Saludos.

    • 25Horas

      No lo he usado a conciencia, pero en mi opinión, cuando te quieres enfocar a ser un buen diseñador web que desarrolle interfaces no hay nada mejor que el editor de código. Por ejemplo, el SublimeText.

      Fuera de eso, aunque Muse permita muchas herramientas sencillas de implementar en tu sitio, al final, no tienes el control absoluto en el código que se genera, y a veces la interpretación de ciertos elementos puede causar un exceso de código para una función aparentemente sencilla.

      Lo importante es conocer aprender a diseñar desde cero con HTML y CSS, no hay nada mejor. No he conocido a algún diseñador web de aquellos que admiro que utilice algún software como Muse. Así que hay que amar el código 😉

      • Carlos M

        Gracias por tu opinión. Estoy de acuerdísimo contigo. Pero vi hace años aparecer el Muse en el panorama y sentí que el acto de codear se había “democratizado” por así decirlo. Saludos.

  • Carlos M

    Que tal Bernardo, tu como web designer me gustaría que postearas o me dieras tu opinión acerca de tu posición de adobe Muse, ¿Es bueno?, ¿Es malo? Ventajas o desventajas. Es válido usarlo? Saludos.

  • Enrique Betancourt

    No soy para nada un diseñador web. No se me da. Pero, a pesar de las conclusiones -las cuales fueron muy técnicas-, me sentí identificado que debemos de pensar en todas las publicaciones en todos sus formatos, sean web o no. Si pensamos más allá de lo que nos piden, como un futuro próximo de mejoría tendremos soluciones más certeras e incluso vendibles. Muy buen artículo 😀