Cómo solucionar los problemas del diseño web adaptativo

El diseño responsive o responsive web design es el método más fácil y práctico para lograr un correcta visualización de las páginas webs en todo tipo de dispositivos (PCs, portátiles, smartphones y tablets) sin tener que programar versiones distintas. Su implementación técnica es bastante sencilla, se crea una única versión de la página mediante plantillas CSS3 y, según el tipo de dispositivo desde que el usuario esté accediendo, se cargan unas reglas u otras, lo que permite una buena visualización y una navegación cómoda, utilizando para ello parámetros basados en el mantenimiento de la proporcionalidad.

Las soluciones a los problemas del diseño responsive

Aunque el diseño responsive se encarga de mostrar automáticamente la versión más optimizada para cada medio de conexión, reorganizando los elementos de la web e incluso discriminando algunos de ellos (imágenes más ligeras, reducción de textos, redistribución de columnas) en la práctica se producen algunos problemas que merman la calidad del diseño o dificultan su usabilidad o navegabilidad.

Afortunadamente, existen técnicas capaces de resolver fácilmente estos problemas. Estas son las principales:

Aplicaciones para adaptar los navegadores más antiguos al diseño reponsive

Las versiones más antiguas del explorer (8 e inferiores) no se adaptan automáticamente al diseño responsive. La solución es utilizar aplicaciones como respond.js o Modernizr. Su implantación es muy fácil: solamente hay que añadir el archivo correspondiente de estos programas al final de la CSS y los navegadores no actualizados ya estarán preparados para ejecutar las reglas del diseño responsive.

Sustituir los anchos fijos por valores máximos

Esta sencilla solución ayuda a rectificar los problemas de desencuadre que a veces se producen en los encabezados, navegación, menú e imágenes, en especial cuando se parte de un diseño original en pantalla grande y se trata de visualizar en las reducidas pantallas de un móvil.

Aquí tienes un ejemplo:

Reducir lo menús

La mayoría de páginas webs usan un menú basado en listas horizontales o verticales más o menos extensas. Se trata de una buena disposición para la navegación en un monitor grande que, sin embargo, causa importantes problemas de usabilidad en las pantallas más pequeñas. Por lo tanto, conviene reducir el menú ya sea reescalando el tamaño de las fuentes o dejando el menú a un solo icono y desplegarlo cuando el usuario pulse sobre el mismo. También se pueden combinar ambas opciones.

Establecer una tamaño máximo para imágenes estáticas o vídeos

Es bastante frecuente que, al implantar el diseño responsive, algunos fotos dibujos, infografías o vídeos se descuadren o crezcan demasiado. Para solucionar este problema se puede establecer un tamaño máximo para las imágenes, de manera que cuando se disminuya el tamaño del contenedor, estas se encojan, adaptándose a la página.

Este sería un ejemplo de implantación de esta solución:

El diseño responsive es una técnica bastante nueva que, por lo tanto, se encuentra todavía en una fase de desarrollo y perfeccionamiento. Esto significa que con el tiempo la necesidad de aplicar instrucciones manuales para solucionar desajustes de diseño o problemas de uso o navegabilidad será insignificante, puesto que todo se realizará de forma automática, con una mínima intervención del diseñador. Pero hoy en día es muy recomendable conocer los trucos y técnicas de mejora y optimización, para lograr el objetivo ideal de una visualización perfecta en todos los dispositivos, sin que influya para nada el tamaño de pantalla o que se trate de una  navegación táctil o con teclado y ratón.