Qué es lo básico que debo saber sobre diseño web responsive

Por Luiggi Santa Maria - hace 3 años

Sección: Tech


El diseño web responsive es una técnica de diseño y desarrollo web en el que las páginas se crearon para cambiar las características de su estructura según el ambiente (dispositivo o plataforma) y la conducta del usuario (orientación).

Cuando un usuario se pasa de una laptop a un iPad, la página diseñada de manera responsive se adaptará automáticamente al nuevo tamaño, resolución y secuencia de comandos de la imagen del otro dispositivo. Por lo tanto, esto elimina la necesidad de crear diferentes diseños o fases de desarrollo cada vez que un nuevo dispositivo se lanza en el mercado.

¿Cómo función un diseño web responsive?

El diseño web responsive tomó un concepto prestado de los que se conoce como arquitectura responsive, en donde el espacio se ajusta automática dependiendo del número y movimientos de personas dentro del espacio. Utiliza varias técnicas e implementaciones para expandir, flexionar o doblar paredes dependiendo del número de ocupantes y su movimiento en relación a los muros. Una idea similar se utiliza en el diseño web: en lugar de crear una página personalizada para cada grupo de usuarios, se crea un diseño que se ajusta automáticamente.

En un edificio, se utilizan sensores de movimiento y robótica. Sin embargo, en diseños web, el aspecto responsive debe implementarse al adoptar pensamiento abstracto y construir a partir de técnicas que ya están en práctica: media queries, estructura fluida, comandos para modificar el formato de las especificaciones y páginas web continuamente.

Ajuste de la resolución de la pantalla

Cada nuevo dispositivo representa una variación en las orientaciones, definiciones y resoluciones de las pantallas, algunas de las cuales están diseñadas para soportar variaciones de tamaño, funciones y color. ¿Cómo se diseña para un formato vertical, horizontal, cuadrado y para aquellos que cambian de un formato a otro?

Se pueden agrupar tamaños de pantalla en categorías y diseñar de forma personalizada para cada una, pero igual es abrumador, dado que más dispositivos se siguen diseñando y lanzando al mercado. También se debe tener en cuenta que algunos usuarios no maximizan sus navegadores o los cambian de tamaño de acuerdo a sus preferencias.

Ejemplo de cómo una página web responsive se adapta a diferentes dispositivos

Qempo.com Compra en USA desde Perú

Hacer todo flexible

Algunos años atrás, las estructuras flexibles se consideraban un lujo para las páginas web: solo el texto y los elementos estructurales tenían alguna flexibilidad. Incluso entonces, añadir imágenes podría romper las estructuras, al igual que los elementos estructurales flexibles bajo el tipo de presión correcto.

El diseño web responsive incremente la flexibilidad de la mayoría de las cosas en una página web: ajuste automático de imágenes, trabajo entre estructuras y básicamente muchas más opciones con más diferencias en tamaños, resoluciones y orientaciones de pantalla.

Entre las técnicas comunes se incluye la creación de combinaciones de imágenes y grillas fluidas y especificaciones inteligentes que intervengan cuando sea necesario.

Trabajar con imágenes

Una parte importante del diseño web responsive es cómo crear flexibilidad de imágenes. Un método común es aplicar un comando max-width en la hoja CSS, en donde la anchura se establece en 100%. Por lo tanto, las imágenes se muestran al 100% excepto cuando el ancho de la pantalla es más angosto que el 100%.

Sin embargo, los tiempos de descarga y resoluciones de las imágenes se vuelven más significativos con dispositivos móviles, en especial cuando las imágenes estaban destinadas originalmente a dispositivos más grandes. Para resolver esto, se debe incluir a la imagen propiedades de reducción, de forma que imágenes más grandes no ocupan espacio innecesariamente más grande en dispositivos pequeños.

Trabajando con estructuras

Con los cambios extremos en tamaño, también es necesario cambiar las estructuras. El método más eficiente para ello es utilizar un media query en la hoja CSS. En este método, la mayoría de estilos mantienen sus características originales; solo hojas de estilos específicas mantendrían sus estilos, moviendo elementos como se requiere teniendo en cuenta la altura, anchura, etc. 

Conclusión

 

Incluso un diseño web responsive actual no puede ofrecer una solución final a un ambiente móvil en constante evolución. Una implementación correcta de un diseño web responsive tan solo mejora la experiencia del usuario en lugar de ofrecer una solución completa. Trabajar constantemente con tecnologías de resolución y dispositivos en el futuro nos dará, con suerte, mejores soluciones.

Autor del artículo

Luiggi Santa Maria

Luiggi Santa María es CEO de Staff Creativa, Agencia Digital en Lima, Perú. Tiene más de 10 años de experiencia desarrollando soluciones web y móviles para empresas de diferentes rubros.

Comentarios