La proliferacion de smartphones y tablets exige adaptar formatos web a nuevos dispositivos: El responsive design corresponde a una tendencia de creación de páginas web que pueden ser visualizadas perfectamente en diversas formas de pantallas. Pero ¿Cómo funciona el responsive web design? Estos 9 Gif lo explican a la perfección.
En lugar de construir una website para cada dispositivo se crea una sola website con un layout de imágenes flexibles. De esta forma, la website detecta desde qué clase de dispositivo está accediendo el usuario y muestra la versión más optimizada para ese medio.
Puede que imaginar la diferencia entre responsive y adaptative no sea tan fácil, es por eso que Froont, (compañía especializada en el diseño de herramientas para diseñadores) ha elaborado estos 9 gif que ayudan a comprenderlo mejor:
1.Conceptos: Responsive expande los contendido. Adaptive "Adapta"
2. Unidades: Responsive usa unidades relativas (ej: Porcentaje de pantalla) Adaptive: pixeles
3. Flujo: mediante la pantalla se achica , el contenido comienza a ocupar espacio vertical . Como si se corriera hacia abajo.
4.Puntos de interrupción: Los puntos de interrupción permiten cambiar en puntos predefinidos , es decir que mientras en desktop, puedes tener 3 columnas, en el celular sólo tienes una. La mayoría de las propiedades CSS se pueden cambiar de un punto de interrupción a otra .
5. Valores de Max y Min: puede que el contenido ocupe todo el ancho de la pantalla en tu teléfono, pero que ocurriría en tu smart-tv? Lo mismo: el contenido se expande
6.Anidados: Mediante la anidacion los elementos se "adaptan" a la pantalla.
8.Fuentes Web vs fuentes del sistema: Atractivo y tiempo de carga
9.¿Tiene muchos detalles o efectos? Entonces puedes utilizar mapa de bits (jpg , png o gif) Si no, puedes pensar en vector de imagen (SVG o un icono de fuente)
Si quieres comunicarte con nosotros, puedes escribirnos a Brotebit@gmail.com
