Si eres de las personas que ha visto evolucionar los dispositivos móviles hasta lo que conocemos ahora, seguramente recordarás que navegar sitios web en los primeros smartphones era sumamente incómodo e inflexible. El diseño y tamaño de las fuentes era inconsistente, las imágenes rompían fácilmente la estructura de la página, y básicamente para visualizar todos los elementos e interactuar con el contenido era necesario ajustar la pantalla del dispositivo. 

Como en la actualidad muchos sitios importantes reciben gran porcentaje de las visitas desde smartphones y tablets, para todos ellos ha sido necesario adaptar sus páginas para que sea posible visualizarlas en cualquier dispositivo. Esta accesibilidad es lo que se conoce hoy en día como diseño web responsivo o adaptativo. 

Diseño web responsive en diferentes dispositivos.

El diseño web responsivo es una configuración en la que el servidor siempre envía el mismo código HTML a todos los dispositivos, pero modifica el procesamiento de la página en cada dispositivo utilizando CSS. Es decir, es una manera de adaptar una misma web a las diferentes plataformas (ordenador, tablet, smartphone, etc.) desde el código. Esto resulta muy conveniente cuando los visitantes de tu sitio utilizan navegadores avanzados, pero disponen de un espacio en pantalla limitado.

¿Por qué diseño responsivo? 

El término “responsivo” sugiere que un sitio idealmente responde al comportamiento y entorno de la persona usuaria en todos los sentidos, tanto en el tamaño de la pantalla y la orientación, como en la plataforma. La implementación de un diseño responsivo tiene la intención de enriquecer la experiencia de usuario, pues permite el completo aprovechamiento de la interfaz, evita complicadas redirecciones y hace que compartir direcciones web sea más fácil.

¿Cómo funciona una interfaz responsiva? 

El diseño responsivo consiste en una serie de hojas de estilo en CSS que, por medio del atributo “mediaquery”, convierten una web ordinaria en una web multiplataforma capaz de adaptarse a todos los tamaños que existen. Además, tiene la particularidad de que posee un código HTML único que se envía a todos los dispositivos, lo que hace posible que no sea necesario redireccionar a los usuarios y así mantiene una única URL.

Para indicar a los navegadores que tu página se adapta a todos los dispositivos, se agrega una metaetiqueta <meta name=”viewport”> en el encabezado del documento. Esta técnica detecta el ancho de la pantalla del navegador en cuestión y adapta automáticamente todos los elementos de la página. Cuando no se incluye este elemento, los navegadores para dispositivos móviles procesan de forma automática la página con un ancho de pantalla de computadora de escritorio (que por lo general es de alrededor de 980px), modificando el aspecto del contenido.

Se visita una página desde ordenador y móvil.

¿Por qué usar un diseño web responsivo?

Los navegadores móviles representan una gran fuente de tráfico hoy en día y saber adaptarse a ellos constituye una nueva área del desarrollo profesional. Asimismo, las ventajas de utilizar este formato para la construcción de sitios web son muchas. Algunas de las que podemos señalar son:

1. Mejora la experiencia de usuario

Ya que facilita a los usuarios compartir y vincular el contenido mediante una sola URL.

2. Ahorra recursos cuando el robot de Google rastrea tu sitio.

‍Algunas páginas utilizaban una versión móvil para que los usuarios que accedían al sitio desde su teléfono o tablet pudieran visualizar el contenido adaptado. Pero, esto resultaba perjudicial para el SEO de la página, ya que al tener dos versiones de la misma se crea un contenido duplicado y Google penaliza la web. 

En el caso de páginas con diseño web responsivo el mismo contenido se organiza de manera distinta según el dispositivo; no es necesario redireccionar a los usuarios a una versión con vista optimizada y, por ende, sólo pide rastrear la página una vez para recuperar todas las versiones del contenido. 

3. Ayuda a que tu contenido sea viral.

‍Si consideramos que en la actualidad un gran número de usuarios acceden a los sitios web a través de un smartphone, una página que permita un acceso fácil y cómodo aumentará las visitas y la permanencia del usuario. 

Además, si el usuario quiere compartir contenido del sitio en sus redes sociales o migrarlo a otras plataformas, le resultará mucho más rápido y natural.

4. Reduce costos de desarrollo.

Al utilizar la misma plantilla para todas las plataformas reduces la inversión en mantenimiento y desarrollo, así como la posibilidad de que se produzcan los errores comunes que afectan a los sitios móviles.

Sin embargo, recuerda que pese a todas estas ventajas, se deben considerar otros factores como que el coste inicial será mayor al de una web normal por su dificultad de ejecución, o que el tiempo de carga probablemente aumentará debido a que los elementos son los mismos y requerirán ajustarse. Si bien no existe una solución sencilla para facilitar el acceso a los sitios web desde una amplia gama de dispositivos, el diseño responsivo es un buen comienzo.