Seguro que has escuchado por ahí eso de “responsible”, “web responsive” “design responsive” “responsible web” y etc. etc. etc. Claramente es un nuevo concepto tecnológico de moda cuya funcionalidad debes conocer. Se trata del futuro, no sólo en concepto de diseño, sino también de cara a facilitar el acceso de los usuarios a tu web.

¿Qué es responsive web design?

El responsive web design (RWD) trata, básicamente, de adaptar una web a cualquier tipo de pantalla y dispositivo. Es decir: que no se descoloque el contenido de la web en la pantalla de nuestra tableta o smartphone, o bien en resoluciones menos comunes de las pantallas del ordenador. La web se adapta perfectamente a la pantalla, facilitando así su lectura y uso.

Parece algo lógico pero su aplicación tiene más de lo que muchos creen. Además de funcionalidad, a día de hoy es una necesidad, ya que cada vez son más los usuarios que utilizan el móvil o la tablet para navegar por Internet.

Si eres usuario de estos dispositivos ya sabrás lo engorroso que es no poder ver una web correctamente porque sigue estando en un “formato” acorde con la pantalla de un ordenador estándar.

¿Cómo funciona el responsive web design?

Es indispensable conocer los CSS Media Queries que nos permiten activar y desactivar partes del CSS para que se adapte a la pantalla adecuada. Y ¡ojo! Sólo funciona con los navegadores modernos. Internet 6, 7 y 8 no lo soportan, aunque puede haber soluciones con el uso de Javascript.

La principal diferencia es que ya no jugamos con píxels sino con porcentajes, abandonando así los anchos fijos de una web. El responsive web design prefiere el concepto de proporción. Así, cuando veamos el mismo contenido en la pantalla de nuestro móvil, todos los elementos se harán proporcionalmente más pequeños. Eso sí, serán los elementos que nosotros escojamos.

Por ejemplo, si en una web tenemos un menú lateral, con esta técnica se puede crear un menú desplegable arriba, en la pantalla de los móviles. Disponemos así del mismo contenido adaptado a una pantalla de 480 píxeles. También podemos desprendernos de contenidos que pueden ser demasiado cargantes dentro del móvil: widgets, iconos de redes sociales… Nosotros manejamos qué queremos mostrar y qué no en cada tipo de dispositivo.

En el sector, a esta flexibilidad en los elementos se le denomina breakpoints, es decir, los puntos donde quieres romper el contenido de la web para adaptarlo a las distintas resoluciones de pantallas.

Vale, ¿y el coste del responsive web design?

Parece un trabajo que requiere un coste económico alto, pero nada de eso. Con el responsive web design creamos diferentes formatos a partir de una misma web y ya no es necesario crear diferentes sites adaptados a cada dispositivo. Requiere conocimientos avanzados en diseño pero evita muchos problemas de cara al presente tecnológico: smartphones y tablets.

  • Con el resposive web design no necesitamos actualizar por partida doble (o triple) el contenido de nuestra web. Con que lo actualicemos una vez ya se adapta a las distintas pantallas.
  • La conversión aumenta considerablemente ya que no ponemos barreras al usuario para acceder a nuestra web y a los contenidos que le ofrecemos.
  • Y, lo más importante, la comodidad que le proporcionamos al usuario no tiene precio. Agradecerá enormemente que nos hayamos tomado la molestia de adaptar la web a estos formatos, lo que generará un impacto positivo como empresa/proyecto que apuesta por la innovación tecnológica.

Como ves nos enfrentamos a una nueva era del diseño web, con un diseño sensible, manejable y adaptado a los tiempos que corren.

Te dejamos con algunos ejemplos muy atractivos para ilustrar el responsive web design:

ejemplo web responsive web design

ejemplo web responsive web design2

ejemplo web responsive web design3

ejemplo web responsive web design4

ejemplo web responsive web design5

¿Te gustan los resultados? Contacta con nosotros si te interesa adaptar tu página web con responsive web design.