El diseño Web Responsive vs Adaptive

Hoy en día el uso de diferentes dispositivos para navegar por la red se ha diversificado enormemente. Accedemos a sitios web desde todo tipo de dispositivos como son los ordenadores, smartphones, tablets etc. Sin embargo, nos encontrarnos con multitud de páginas web cuyo contenido no está optimizado para los mismos. No es lo mismo navegar desde un de PC que desde un dispositivo móvil, y es por ello que la experiencia de usuario que ofrezca nuestra web debe adaptarse a todos los formatos.

En julio de 2008 el Consorcio World Wide Web (W3C) en su artículo Mobile Web Best Practices especifica buenas prácticas para mejorar la experiencia del usuario para la web desde el móvil, bajo el subtítulo de One Web, donde no solo engloba la experiencia de navegación en dispositivos móviles sino también en dispositivos de mayor resolución de pantalla. En marzo de 2009, Ethan Marcotte publica el artículo Fluid Grids sobre diseño web con rejillas o cuadrículas fluidas en la revista digital alistapart.com. Define el diseño fluido adaptándose a la pantalla de cada dispositivo. Un año más tarde, en mayo de 2010, en la misma revista, publica el artículo Responsive Web Design, donde se define por primera vez este concepto. En él detalla como el diseño de la web debe cambiar en función del tamaño del dispositivo. En 2011 el portal Boston Globe fue el primer medio de comunicación que adaptó su página web rediseñándolo en términos de responsive web, siguiendo las directrices marcadas por Ethan Marcotte. El término Adaptive Web Design, fue acuñado por Aaron Gustafson en mayo del 2011. Aplicar las técnicas de mejora progresiva (progressive enhancement), donde el diseño web responsive está integrado como una parte fundamental. Es decir, el responsive es un subconjunto del adaptive. En vez de utilizar layouts fluidos, se puede utilizar layouts fijos y hacer uso de media queries para que su contenido se adapte a tamaños de pantalla o dispositivos específicos.

Resposive Web Design vs Adaptive Web Design

Para adaptarse a este tipo de demanda, los diseñadores y desarrolladores web han optado por crear y rediseñar las páginas web bajo las técnicas Diseño Web «Adaptativo» (Adaptive Web Design) o Diseño Web Responsivo (Responsive Web Design).

Adaptive Web Design consiste en que dependiendo del dispositivo que estamos accediendo, accederemos a un diseño o a otro en función del dispositivo que estemos utilizando, ya que utiliza tamaños preestablecidos. Es decir, dispondremos de varios diseños diferentes de un mismo sitio función de la resolución de pantalla.

El gran inconveniente de usar esta última técnica es que en el mercado actual disponemos de muchísimos dispositivos cuyas resoluciones de pantalla son diferentes, y el coste de desarrollo se encarece ya que se debe estudiar cada dispositivo y sus características para adaptar el diseño. A su favor cuenta con que este diseño se cargue más rápidamente que el responsive, ya que solo se envían los datos necesarios para que pueda ser visto correctamente. Además no necesita tanto código CSS como el diseño responsivo lo que lo hace más fácil de programar.

Responsive Web Design es más flexible que diseño adaptativo. Consiste en estructurar los diferentes elementos que contiene nuestra página web adaptándolos a los diferentes tamaños de los dispositivos, plataformas y orientación de la pantalla. Con ello mejoramos la experiencia de navegación de usuario, proporcionando una visualización óptima adaptada al dispositivo que se esté utilizando. Para conseguirlo, se utilizan medidas de ancho y márgenes relativos, en lugar de establecer valores fijos.

La ventaja de utilizar este diseño es que solo necesitamos un único diseño para nuestra web, siendo el coste de desarrollo menor que en el adaptativo. La desventaja es que necesitamos enviar más información para lograr que la página web se adapte a las diferentes resoluciones de pantalla, haciendo que la velocidad de navegación sea más lenta.

El diseñador y desarrollador web Ethan Marcotte describe tres características clave para un diseño web sea considerado responsive:

Fluid grids (rejillas fluidas): El diseño de la página es flexible, basado en rejillas o cuadrículas, donde el tamaño de los elementos de la página debe estar en unidades relativas, utilizando porcentajes, en lugar de estar definido en unidades absolutas como son los píxeles.

Imágenes flexibles: Las imágenes no tienen tamaños fijos a fin de evitar que se presenten fuera de su elemento contenedor. La opción más popular es el uso de un tamaño máximo (max-width) donde normalmente suele mostrarse en 100%. De esta manera, las imágenes se ajustan a la resolución del navegador.
Media queries: Mediante las media queries se permite que los elementos de la página web utilicen diferentes reglas de estilo CSS en base a características del sitio, por lo general se basa en el ancho del navegador.

El diseño responsive es la opción más segura a la hora de desarrollar el sitio web. Siempre funciona bien sin importar los nuevos tamaños de pantalla que van apareciendo en el mercado. El coste de desarrollo y mantenimiento es menor, sólo utilizamos un único diseño, ya que si optásemos por el adaptativo, tendríamos que realizar varios diseños. Además disponemos de frameworks como son Bootstrap o Foundation que nos facilitan enormemente la creación de los sitios web, contiene plantillas de diseño, tipografías, tablas, imágenes, formularios, botones y otros tipos de elementos. Sin embargo existe la posibilidad de que para algunas empresas el diseño adaptativo sea el más conveniente, quizás si se dirige a un público determinado o donde las visitas de ciertos dispositivos sean muy escasas.

Referencias:

Descubre cómo Sogeti puede ayudarte en el desarrollo de páginas web adaptadas al momento actual en el que nos encontramos.

Amaia Baigorri es Ingeniera Informática por la Universidad Pública de Navarra. Desde el 2011 trabaja dentro del mundo de la informática y en 2014 se incorpora a Sogeti España como programadora junior. Actualmente desarrolla funciones de programadora senior dentro de la Unidad de Soluciones Microsoft de Sogeti España.