¿Qué es una Responsive Web?

El concepto Responsive Web fue creado por Ethan Marcotte en su artículo Responsive Web Design en A list Apart. Hace referencia al hecho de que actualmente los usuarios de un sitio web pueden acceder desde diferentes dispositivos y por lo tanto debe ser sensible y adaptarse a los mismos. De esta forma la información se muestra de forma diferente en función del dispositivo que use el visitante, ya sean ordenadores de escritorio, móviles smartphones o tablets (iPad y tablets Android).

¿Cómo se adapta una Responsive Web?

Principalmente se debe tener en cuenta que la retícula de la página debe ser flexible, es decir, debe plantearse un diseño que se adapte con facilidad a diferentes anchos de pantalla. Como ejemplo pasaríamos de un diseño que contempla un ancho fijo de la columna a un ancho variable en el que un diseño de tres columnas pasaría a ser de dos o de una en función del tamaño de la pantalla del dispositivo desde el que se acceda.

Si nuestra retícula es flexible, el contenido que se aloja en ella también debe serlo. En este aspecto tenemos que tener en cuenta el ancho de las imágenes, el ancho de los vídeos y el tamaño de la tipografía. La pantalla de un Smartphone tiene mayor densidad de píxeles por pulgada, lo que a efectos prácticos se traduce en que una fuente de 12 píxeles se ve a un menor tamaño en un iPhone que en un ordenador de escritorio.

Hay que tener especial cuidado con los elementos de navegación de la página, el menú de navegación no se debe mostrar de la misma forma en la versión de escritorio que en la versión móvil. La razón es, por un lado y de nuevo, el tamaño de la pantalla, y por otro, que para hacer click, en teléfonos táctiles, utilizamos nuestros dedos y no un puntero. En un Smartphone la pantalla es bastante más pequeña que la de un ordenador de escritorio, un portatil o una tablet. Esta diferencia de tamaños nos obliga a que, por ejemplo, si un menú de navegación se ha diseñado de forma horizontal, en este caso se muestre de forma vertical. Además, como utilizamos nuestros dedos tenemos que diseñar botones lo suficientemente grandes para que puedas hacer click con facilidad. En relación al contenido hay que señalar además que cuanto más pequeña es la pantalla más relevancia adquieren los contenidos en comparación con los elementos de navegación. Es decir, los elementos de navegación cambian de posición para dejar paso al contenido, el usuario debe encontrarse con contenido útil cuando entra en la versión móvil de un sitio web.

Para terminar, no podemos olvidarnos del ancho de banda de que disponen los dispositivos móviles. Es muy importante optimizar los contenidos para minimizar los tiempos de espera de los usuarios.

Beneficios de un Responsive Web

• Mejoras la experiencia del usuario ya que adaptas tu web a las características de su dispositivo
• Ahorro de costes de mantenimiento, cuando incluyes contenidos nuevos realizas una sola actualización para todas las versiones de la web
• Ahorro de costes de desarrollo, el coste de desarrollo de una responsive web adaptada a todos los dispositivos es menor que el coste de desarrollo de una versión de la web para cada dispositivo

Mas información acerca de diseño web multidispositivos.