Diseño web adaptativo o responsivo.

更多类似内容

ESTILOS DE EMPRENDIMIENTO

由carlos saenz

Modalidades de Aprendizaje

由Paulina Alvidrez Fornes

Aspectos Positivos y Negativos de e-learning

由Jose Cruz

Criterios de Rentabilidad

由Rosa Orozco

Moreno Vázquez Angel Antonio 4BPRV

Diseño web adaptativo o responsivo.

Beneficio del Diseño.

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.

Mejora en la usabilidad.

La legibilidad y características de uso del sitio se ajustan automáticamente en cada dispositivo.

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.

Reducción de costos.

Se logra por que el código es menor y no se necesita diferentes actualizaciones para los dispositivos existentes.

Uso de unidades de medidas flexibles

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.

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.

Caracteristicas

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.

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.

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.

Navegación Adaptable.

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.

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.

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.

Elementos del diseño

Navegacion adaptable.

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.

Maquetación adaptable usando Media Queries.

Modificando la cantidad de columnas del diseño, congrillas flexibles, adaptando los anchos dentro de cada rango.

Esquema tipográfico flexible.