Responsive Design

Responsive Design

• 
• Legenda: Por Mariyselita

¿Qué es?

• Son todas esas técnicas o patrones que usamos para adaptar nuestras aplicaciones web a la mayor cantidad de dispositivos

Patrones de Diseño

• Un patrón de diseño es una solución a un problema de diseño.
• 

Mostly Fluid

• 
• Cuadricula fluida autoajustable al tamaño de la pantalla.
• Los elementos de la derecha van bajando.

Column Drop

• Colocación de columnas de forma vertical. Las columnas van cayendo pero se adaptan a lo largo de todo el ancho.
• 

Layout shifter

• Reajuste del diseño del sitio de acuerdo al ancho de la pantalla (es la forma más compleja de ajustar un sitio web). Tiene múltiples diseños responsivos.
• 

Tiny tweaks

• Pequeños cambios en el diseño, como ajustar el tamaño de la fuente, cambiar el tamaño de las imágenes o desplazar el contenido de diferentes maneras (es la forma más sencilla de adaptar un sitio que no tiene mucho contenido).
• 

Off canvas

• El contenido menos usado se coloca fuera de la pantalla y solo se muestra cuando el tamaño de la pantalla es lo suficientemente grande; en las pantallas más pequeñas, el contenido está solo a un clic de distancia.
• 

Consideraciones de desarrollo

• 1.- Si se requiere trabajar en un smartphone, es vital utilizar y hacer pruebas en vistas portrait y landscape
• 
• Legenda: Portrait y landscape respectivamente

Consideraciones de desarrollo

• 2.- Viewport: Área visible del navegador, lo que entra dentro de la pantalla.
• <meta name="viewport" content="width=device-width, user-scalable=no">
• 
• Legenda: https://developer.mozilla.org/es/docs/M%C3%B3vil/Viewport_meta_tag

Consideraciones de desarrollo

• 3.- Unidades de Medida
• Absolutas: son los píxeles
• Píxeles = px
• Relativas: son medidas que cambian dependiendo sus condiciones.
• Porcentaje = %
• Altura de Fuente: em - Root-em = rem (em son medidas heredadas que miden lo que mide el tamaño del padre. rem responde al tamaño de fuente del DOM)
• Viewport Height = vh - Viewport Width = vw (Toman la consideración del tamaño disponible de la pantalla).
• 
• Legenda: http://librosweb.es/libro/css/capitulo_6.html

Consideraciones de desarrollo

• 4.- Densidad de píxel o retina display
• Para pantallas que no tienen una resolución fija, pero tienen una resolución grande que comprimen en una pantalla más pequeña.
• Escalables: SVG, Fuentes
• No escalables: Mapas de bits (imágenes)
• 

Consideraciones de desarrollo

• 5.- Tab y Gestos
• Tab: Total de eventos que se hacen con los dedos.
• Gestos: Eventos especiales que se hacen con los dedos.
• 

Consideraciones de desarrollo

• 6.- Estrategias: Consideraciones de dispositivos principales.
• Graceful Degradation
• Progressive Enhancement
• 

Consideraciones de desarrollo

• 7.- Carga del sitio
• Que el sitio web cargue rápido y que sea ligero.
• 

Referencias

• https://platzi.com/clases/responsive-design/concepto/introduccion-y-conceptos-basicos9793/bienvenidos-al-curso-de-responsive-design6968/material/
• https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns?hl=es
• https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement