Diseño web adaptable, la solución para portales web multicanal

El santo grial del desarrollo web actual recibe el nombre de diseño web adaptable (Responsive Web Design). Hasta que este conjunto de técnicas se ha empezado a popularizar, ofrecer una experiencia óptima adaptada a las características de cada dispositivo utilizado para acceder a un portal web requería mantener tantas versiones como dispositivos deseáramos soportar. Con la proliferación de equipos móviles, smartphones y tabletas (iPhone, iPad, Android, Windows Phone, Blackberry…), mantener diferentes versiones del código ya no es una opción viable.

El desarrollo web adaptable no consiste en desarrollar para uno o varios dispositivos concretos (de ser así habría que seleccionar previamente qué dispositivos constituyen nuestro objetivo), sino que consiste en desarrollar para determinadas configuraciones de pantalla y capacidades presentes en el navegador web utilizado (independientemente de su marca y versión), buscando la mejor experiencia de usuario posible para cada configuración en lugar de aplicar un mismo esquema a todas las configuraciones.

Para lograr esto, se utilizan librerías Javascript y sobre todo mecanismos de HTML5 y CSS3 como maquetación fluida con unidades proporcionales (por contraposición a maquetación rígida con unidades exactas), @media queries para aplicar diferentes reglas CSS en función de características como las dimensiones de la pantalla del dispositivo utilizado (puntos de ruptura) e imágenes y elementos multimedia flexibles (optimizados para cada punto de ruptura).

En at4 llevamos un tiempo experimentando con estas técnicas y ya estamos aplicando diseño web flexible en todos los nuevos proyectos web de clientes. De esta forma, además de mejorar la experiencia del usuario también se optimiza la inversión de nuestros clientes.

Como anécdota diré que nuestra primera experiencia fue ya cuando sacamos al aire el carrusel de proyectos que se muestra en la portada de nuestro portal web. Este carrusel utiliza técnicas de diseño web adaptable para linearizar su contenido en dispositivos móviles (a partir de cierto tamaño de pantalla). Lógicamente se puede ir mucho más allá de lo que este sencillo ejemplo demuestra y, esto es, precisamente, a lo que nos dedicamos en los proyectos para nuestros clientes.

Publicado e