By El diseño web responsive o adaptativo es una técnica de diseño web que busca la correcta visualización de una misma página en distintos dispositivos.
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.
¿En qué consiste el diseño responsive?
Se trata de redimensionar y colocar los elementos de la web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario. Se caracteriza porque los layouts (contenidos) e imágenes son fluidos y se usa código media-queries de CSS3.
El diseño responsive permite reducir el tiempo de desarrollo, evita los contenidos duplicados, y aumenta la viralidad de los contenidos ya que permite compartirlos de una forma mucho más rápida y natural.
Se basa en proporcionar a todos los usuarios de una web los mismos contenidos y una experiencia de usuario lo más similar posible, frente a otras aproximaciones al desarrollo web móvil como la creación de apps, el cambio de dominio o webs servidas dinámicamente en función del dispositivo.
- 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.
- 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.
En definitiva, el diseño web responsive se consolida como una de las mejores prácticas hoy en día en diseño web.
Fuentes: www.40defiebre.com y www.timov.la