Diseño web adaptativo o responsivo.
Elementos del diseño
Esquema tipográfico flexible.
Maquetación adaptable usando Media Queries.
Modificando la cantidad de columnas del diseño, congrillas flexibles, adaptando los anchos dentro de cada rango.
Imágenes, Objetos, Videos o medios similares flexibles.
Cambiando el tamaño de las imágenes y otros elementos vinculados, incluyendo la adaptación de videos, animaciones, y contenidos complejos como mapas, tablas, slides, etc.
Navegacion adaptable.
Caracteristicas
El tamaño de las fuentes tipográficas.
Se establece en em en vez de píxeles, su valor no es absoluto sino relativo y depende directamente del elemento padre que lo contiene.
El uso de un diseño fluid o mediante cuadriculas flexibles o fluid grid.
Se basa en proporciones y no en píxeles, hace posible que el sitio web se visualice en distintas modalidades.
La utilización de Media Queries.
Orientadas a configurar el ancho, alto y resolución dependiendo de las características del dispositivo donde se consulte el sitio.
Navegación Adaptable.
Maquetación adaptable y grilla flexible.
La grilla flexible consiste en definir anchos de contenedor y de columnas en porcentajes, para que los bloques de un diseño mantengan una proporción entre sí dentro del rango de ancho mínimo y máximo definido en cada media query del punto anterior.
Márgenes y paddings flexibles.
También debemos volver flexibles los márgenes y paddings, para que no arruinen con pixeles la proporcionalidad de los espacios conseguida.
El ancho de las imágenes, objetos, video o medios similares, es flexible y su tamaño se modifica por medio de porcentajes.
Que se guarden en el tamaño más grande en que se mostrarán y su ancho máximo equivaldrá al 100 por ciento de su dimensión.
Uso de unidades de medidas flexibles
Unidad em
La unidad em tiene como referencia de medida el font-size del elemento actual, dependen del tamaño de fuente del selector o elemento al que se le aplica el atributo.
Unidad rem
La unidad rem tiene como referencia de medida el font-size del elemento root, dependen directamente del elemento raíz de la página, osea del tamaño de fuente del elemento<html>.
Beneficio del Diseño.
Reducción de costos.
Se logra por que el código es menor y no se necesita diferentes actualizaciones para los dispositivos existentes.
Eficiencia en la actulización.
Se utiliza una sola plantilla para la producción de la página, por lo que resulta eficiente la modificación.
Mejora en la usabilidad.
La legibilidad y características de uso del sitio se ajustan automáticamente en cada dispositivo.
Capacidad de adaptación de la interfaz.
Al ser un sitio con fluidez, la información es jerarquizada para presentar lo esencial de los contenidos para la consulta del usuario.