En el campo del diseño y desarrollo web, estamos llegando rápidamente al punto de no poder mantenernos al día con las infinitas resoluciones y dispositivos nuevos. Para muchos sitios web, sería imposible, o al menos poco práctico, crear una versión del sitio web para cada resolución y dispositivo nuevo. ¿Deberíamos simplemente sufrir las consecuencias de perder visitantes de un dispositivo, en beneficio de obtener visitantes de otro? o ¿hay otra opción? Pues sí, eso es el Diseño Web Responsive o Adaptativo.
¿Qué es el Diseño Web Responsive o adaptativo?
El diseño web receptivo es el enfoque que sugiere que el diseño y el desarrollo de una página web deben responder al comportamiento y al entorno del usuario en función del tamaño de la pantalla, la plataforma y la orientación.
La práctica consiste en una combinación de cuadrículas y diseños flexibles, imágenes y un uso inteligente de consultas de medios CSS. A medida que el usuario cambia de su computadora portátil a iPad, el sitio web debe cambiar automáticamente para adaptarse a la resolución, el tamaño de la imagen y las capacidades de secuencias de comandos.
Uno también puede tener que considerar la configuración de sus dispositivos; si tienen una VPN para iOS en su iPad, por ejemplo, el sitio web no debe bloquear el acceso del usuario a la página. En otras palabras, el sitio web debe tener la tecnología para responder automáticamente a las preferencias del usuario. Esto eliminaría la necesidad de una fase de diseño y desarrollo diferente para cada nuevo dispositivo en el mercado.
El diseño web receptivo requiere una forma de pensar más abstracta. Sin embargo, ya se están practicando algunas ideas: diseños fluidos, consultas de medios y secuencias de comandos que pueden reformatear páginas web y marcar sin esfuerzo (o automáticamente).
Pero el diseño web receptivo no se trata solo de resoluciones de pantalla ajustables e imágenes redimensionables automáticamente, sino de una forma completamente nueva de pensar sobre el diseño. Hablemos de todas estas características, además de ideas adicionales en desarrollo.
Con más dispositivos vienen diferentes resoluciones de pantalla, definiciones y orientaciones. Todos los días se desarrollan nuevos dispositivos con nuevos tamaños de pantalla, y cada uno de estos dispositivos puede manejar variaciones en tamaño, funcionalidad e incluso color. Algunos están en paisaje, otros en retrato, otros incluso completamente cuadrados. Como sabemos por la creciente popularidad del iPhone, iPad y los teléfonos inteligentes avanzados, muchos dispositivos nuevos pueden cambiar de vertical a horizontal según el antojo del usuario. ¿Cómo diseñar para estas situaciones?
Además de diseñar tanto para paisaje como para retrato (y permitir que esas orientaciones posiblemente cambien en un instante al cargar la página), debemos considerar los cientos de tamaños de pantalla diferentes. Sí, es posible agruparlos en categorías principales, diseñar para cada uno de ellos y hacer que cada diseño sea tan flexible como sea necesario.
¿Características del Diseño Web Responsive o Adaptativo?
Centrándose en el contenido
La priorización del contenido es un aspecto clave para hacer bien el diseño receptivo. Se puede ver mucho más contenido sin desplazarse en un monitor de escritorio grande que en la pantalla de un teléfono inteligente pequeño. Si los usuarios no ven instantáneamente lo que quieren en un monitor de escritorio, pueden mirar fácilmente alrededor de la página para descubrirlo. En un teléfono inteligente, es posible que los usuarios tengan que desplazarse sin cesar para descubrir el contenido de interés. La priorización de contenido inteligente ayuda a los usuarios a encontrar lo que necesitan de manera más eficiente.
Teniendo en cuenta el rendimiento
Para evaluar verdaderamente la experiencia del usuario de un diseño web receptivo, no pruebe sus diseños receptivos solo en la comodidad de su propia oficina, en su conexión de alta velocidad. Aventúrese en la naturaleza con su teléfono inteligente, entre edificios altos en una ciudad, en salas de conferencias interiores o sótanos, en áreas remotas con conectividad irregular, en lugares con problemas conocidos para la conexión de red de su propio teléfono celular, y vea cómo funciona su sitio en variadas condiciones. El objetivo de muchos diseños receptivos es brindar un acceso equivalente a la información independientemente del dispositivo. Un usuario de smartphone no tiene una experiencia equivalente a la de un usuario de escritorio si los tiempos de descarga son intolerables.