En la actualidad, visitar una web con nuestro Smartphone es una actividad casi cotidiana para la mayoría. Pero no hace tantos años que únicamente consultábamos páginas web a través de ordenadores de sobremesa y portátiles. Por aquel entonces, el diseño de una página web solo debía centrarse en un tipo dispositivo: el ordenador.

Mucho ha cambiado desde entonces y ya hace algo más de un lustro que se aplica el diseño web adaptable (traducción del término Responsive Web Design o RWD en inglés) en la creación de sitios web. Esta técnica de desarrollo nos permite crear un único diseño web que se adapta según el tipo de dispositivo o pantalla desde el que visualicemos el sitio web.

El diseño web adaptable no fue la única técnica que se adoptó con el auge del uso de los dispositivos móviles. Una de las alternativas fue la creación de una web específica para móviles, completamente diferente a la versión de escritorio, alojada habitualmente bajo un subdominio (por ejemplo, www.latevaweb.com y m.latevaweb.com para smartphones). También existen métodos para servir un código fuente u otro en función del dispositivo que haga la petición al servidor.

Tanto en estos casos, como con el Responsive Web Design, el objetivo acaba siendo el mismo: ofrecer la mejor experiencia posible al usuario, independientemente de si accede a nuestra web a través del ordenador, el móvil o una tablet.

Características del diseño web adaptable

Dejando a un lado las especificaciones técnicas a nivel de código HTML y CSS, vamos a analizar cuáles son las principales características que definen un diseño web adaptable:

  • Compatibilidad entre dispositivos: la principal característica del diseño web responsive, su capacidad para adaptar la visualización de un portal a cualquier dispositivo.
  • Una única versión: el desarrollo y mantenimiento del código se simplifica, dado que contamos únicamente con una versión del mismo.
  • Le gusta a Google: es el patrón de diseño web recomendado por Google.
  • Mejora la experiencia de usuario: pensad, por ejemplo, en un caso tan sencillo como girar el móvil, pasando de posición vertical a horizontal. Con el diseño web adaptable, el usuario seguirá visualizando los contenidos de forma correcta.
  • Reducción de carga del servidor: principalmente porque desparece la necesidad de realizar redirecciones de URLs en función del tipo de dispositivo.

Por otro lado, cabe destacar que la implementación de un diseño web adaptable no debe centrarse únicamente en recursos visuales y código HTML y CSS. Un buen diseño web responsive tendrá en cuenta los usos del sitio web en cada tipo de dispositivo.