Responsive y adaptive: sitios web aptos para cualquier dispositivo

En varias oportunidades nos referimos al diseño web responsivo. Esta técnica, basada mayormente en los media queries de CSS3, consiste en adaptar una misma plantilla a múltiples dispositivos haciendo que el contenido o el aspecto visual que se muestra dependa del ancho o el alto de la pantalla del usuario, entre otros factores. Por ejemplo, si el usuario ingresa a un sitio web responsivo desde una computadora de escritorio podrá ver tres bloques de texto alineados horizontalmente; pero si ingresa desde un smartphone o una tablet, los verá apilados verticalmente, para ahorrar espacio horizontal y evitar que deba hacer scroll hacia la derecha. Otra posibilidad es que se muestre más o menos contenido dependiendo del tamaño de la pantalla. Un mismo diseño se ajusta a las características del dispositivo donde se muestra.

Pero este enfoque tiene algunos problemas:

  • Los archivos de plantilla que se carguen serán los mismos sin importar si estamos utilizando un smartphone o una computadora de escritorio. Esto quiere decir que, por más que en la versión móvil no se muestren algunos elementos, se cargarán de todas formas. Así, parte del tiempo de carga es desperdiciado, afectando la experiencia de usuario.
  • Si el sitio es muy complejo, puede ser necesario crear demasiadas reglas condicionales para adaptarlo a diferentes dispositivos, entorpeciendo el proceso de desarrollo y afectando la claridad del código fuente.
  • Puede ser muy difícil rediseñar para que sea responsivo un sitio web con layout fija.
  • Los media queries no son reconocidos por browsers antiguos.

Por estos inconvenientes, muchos sitios emplean un enfoque alternativo. El diseño web adaptive se basa en generar varias plantillas, para que se detecte el tipo de dispositivo y se cargue la más adecuada. De esta manera, sólo se cargan los archivos indispensables para mostrar el sitio en el dispositivo desde el que navegamos.

Este enfoque es indicado para sitios web con un gran volumen de contenido en cada página, especialmente si está organizado en numerosos bloques de texto (por ejemplo, los sitios web de noticias). En estos casos, generar diferentes plantillas es más eficiente que tratar de adaptar una sola a diferentes tamaños. Sin embargo, no es tan efectivo a la hora de adaptar un sitio web a una variedad de pantallas y formas de interacción cada vez más grande e impredecible: probablemente, tres o cuatro plantillas no cubran las necesidades de todos los usuarios.