Responsive Design

Resp (binary/octet-stream)

Responsive Design

Caption: : 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.

Es 798 (binary/octet-stream)

Mostly Fluid 800x460 (binary/octet-stream)

Mostly Fluid

Caption: :

        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.

Column Drop 800x460 (binary/octet-stream)

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.

Layout Shifter 800x460 (binary/octet-stream)

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).

Tiny Tweaks 800x460 (binary/octet-stream)

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.  

Offcanvas Top (binary/octet-stream)

Consideraciones de desarrollo

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

Descarga (binary/octet-stream)

Caption: : 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">  

Html5 Web App Viewport Meta Tag (binary/octet-stream)

Caption: : https://developer.mozilla.org/es/docs/M%C3%B3vil/Viewport_meta_tag

Consideraciones de desarrollo

3.- Unidades de Medida Absolutas: son los píxelesPí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).  

F0601 (binary/octet-stream)

Caption: : 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)

Densidad Pixeles Por Pulgada 012 (binary/octet-stream)

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.    

S4 Z9 H Eg (binary/octet-stream)

Consideraciones de desarrollo

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

Main Qimg Af34a655b859528665185c65a4a81d75 C (binary/octet-stream)

Consideraciones de desarrollo

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

Giphy (binary/octet-stream)

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