Hubo un tiempo en que pensábamos que la gente sólo visitaba los sitios web usando ordenadores de escritorio con pantalla grande. Ese día ya ha pasado. De hecho, ese día ha desaparecido desde hace bastante tiempo.

En los primeros días de diseño web, la mayoría de los sitios web fueron diseñados para las pantallas que se encontrarían con el ordenador de escritorio. En la Web de hoy en día, sin embargo, la amplia gama de dispositivos y tamaños de pantalla que se utilizan para acceder a esos sitios significa que una solución “one size fits all” ya no es viable.

Los sitios web necesitan acomodar pantallas desde las muy grandes a las muy pequeñas con un diseño y experiencia adecuados para cada una. Hay un número de maneras en que un sitio se puede hacer para incluir “soporte móvil”, pero la mejor práctica de la industria es con un enfoque llamado “diseño web responsive”.

Las 3 calidades de diseño web responsive

Responsive Web Design como lo conocemos fue presentado por primera vez por Ethan Marcotte en un artículo publicado por A List Apart y más tarde en su libro “Responsive Web Design”. Ethan definió este enfoque como teniendo tres cualidades distintas:

Un diseño flexible basado en la red. En lugar de tener tamaños de píxeles fijos en un diseño, las áreas de diseño como columnas de contenido se construyen con porcentajes de manera que al mismo tiempo que su tamaño puede cambiar, sus proporciones entre sí se mantendrán.

Imágenes y soportes flexibles – de forma similar, las imágenes y los medios como el contenido de vídeo se pueden clasificar con porcentajes en lugar de anchos fijos de píxeles. Esto significa que las imágenes pueden escalar con un sitio web para diferentes tamaños de pantalla.

Consultas de medios, las consultas de medios permiten que los cambios de diseño se realicen dinámicamente en los sitios cuando se cumplen ciertas condiciones. Por ejemplo, una vez que la resolución de una pantalla cae por debajo de un cierto punto, el contenido presentado en columnas puede ser cambiado en una sola columna con el contenido presentado uno encima del otro.

Con este enfoque, un diseñador web podría desarrollar un sitio web cuyo diseño cambiaría automáticamente en función del tamaño de la pantalla de un visitante.

Una mejora sobre sitios web “sólo móviles”

Antes de la introducción del diseño web sensible, un sitio web separado, “sólo para móviles” fue la solución que muchas empresas recurrieron en un esfuerzo por proporcionar una mejor experiencia de usuario a los clientes que cada vez más recurren a dispositivos móviles.

Si bien este enfoque era mejor que no hacer nada (y entregar la versión de pantalla grande del sitio a esos dispositivos de pantalla pequeña), todavía había muchos inconvenientes en el uso de sitios web sólo para móviles, incluido el hecho de que ahora tenía dos sitios web distintos para mantener. Con un sitio web de respuesta, sin embargo, sólo habría un sitio web para desarrollar y administrar y que el sitio podría acomodar grandes pantallas, pantallas pequeñas, e intermediarias.

El aumento de los dispositivos de tableta mostró que era necesario considerar pantallas de “tamaño mediano”, además de pantallas pequeñas (teléfonos móviles) y pantallas grandes (escritorios).

Mediante el diseño responsivo, el contenido se adapta a la pantalla mientras que existe una alternativa que sería crear numerosas versiones de sitio, cada una dirigida a un tamaño de pantalla general diferente y cada una necesitando ser mantenida por separado.

La mejor práctica de hoy

Inicialmente, el diseño web sensible fue adoptado por los diseñadores web que querían probar este nuevo enfoque en sus propios sitios. De forma lenta pero segura, sin embargo, se ha convertido en una mejor práctica en toda la industria.

Hoy en día, Google lista el diseño web sensible como su enfoque recomendado para el soporte de diferentes dispositivos y tamaños de pantalla. También utilizan el diseño web sensible y la “amistad móvil” como uno de los factores que pesan en su algoritmo de clasificación, por lo que el soporte de dispositivos múltiples no sólo ayuda a los visitantes de un sitio a ser capaz de utilizar una amplia gama de dispositivos y tamaños de pantalla, sino que también tiene un impacto positivo en su ranking general en los motores de búsqueda.

Desafíos

Mientras que el diseño web sensible puede ser una práctica recomendada actual y una forma poderosa de crear sitios web para una audiencia multi-dispositivo, este enfoque viene con algunos desafíos. El rendimiento del sitio web se vuelve más importante que nunca y los elementos del sitio web común como imágenes y navegación tienen que ser reconsiderados con el fin de trabajar eficazmente en un entorno de respuesta.