Curso de Responsive Design impartido en Platzi, plataforma de educación online efectiva: Suscríbete en https://platzi.com/cursos/responsive-design/ Entiende los patrones de diseño adaptativo Utiliza Media Queries para hacer sitios responsivos Aprende la diferencia y cómo usar los estándares Graceful Degradation y Progressive Enhacement Maqueta pensando en Mobile First

1. Curso de Responsive
Design
@carlosazaustre
+CarlosAzaustre
Bogotá Octubre 2015

2. Sobre Mi
Carlos Azaustre
Ingeniero en Telemática
CTO y Cofundador en Chefly
Formador Web / Tech. Blogger
Mentor en NodeSchool Madrid
Autor de
Desarrollo web ágil con Angular.js
Aprendiendo JavaScript
Me puedes leer en
https://carlosazaustre.es

3. La Web en lo 90’s
http://www.vectorportal.com/img_novi/desktop-pc-vector.jpg

4. La Web ahora
webresponsivas.com - http://www.vectorsland.com/

5. La Web ¿ahora?
webresponsivas.com - http://www.vectorsland.com/

6. Responsive Design no es una opción
http://www.inthedigital.co.uk/mobile-friendly-websites-must-2015/

7. Unidades relativas
Porcentajes - %
em
rem
vh, vw

8. media-queries
@media screen and (max-width:480px) {
.miClase {
...
}
}
width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid

9. media-queries
max-width
Aplica a todo lo menor del valor
min-width
Aplica a todo lo mayor que el valor

10. Viewport
Hardware Pixel
Device Independent Pixel (DIP)
Pixel CSS

11. Viewport
<meta name="viewport" content="
width=device-width,initial-scale=1">

12. Progressive Enhancement vs
Graceful Degradation
http://metamonks.com/mobile-first-vs-responsive/

13. Patrones de diseño Responsive
Tiny Tweaks
http://www.lukew.com/ff/entry.asp?1514

14. Patrones de diseño Responsive
Column-Drop
http://www.lukew.com/ff/entry.asp?1514

15. Patrones de diseño Responsive
Mostly-Fluid
http://www.lukew.com/ff/entry.asp?1514

16. Patrones de diseño Responsive
Layout Shifter
http://www.lukew.com/ff/entry.asp?1514

17. Patrones de diseño Responsive
Off-Canvas
http://www.lukew.com/ff/entry.asp?1514