Curso de ResponsiveDesign

@carlosazaustre+CarlosAzaustre

Bogotá Octubre 2015

Sobre Mi

Carlos Azaustre

Ingeniero en Telemática

CTO y Cofundador en CheflyFormador Web / Tech. BloggerMentor en NodeSchool Madrid

Autor deDesarrollo web ágil con Angular.jsAprendiendo JavaScript

Me puedes leer enhttps://carlosazaustre.es

La Web en lo 90’s

http://www.vectorportal.com/img_novi/desktop-pc-vector.jpg

La Web ahora

webresponsivas.com - http://www.vectorsland.com/

La Web ¿ahora?

webresponsivas.com - http://www.vectorsland.com/

Responsive Design no es una opción

http://www.inthedigital.co.uk/mobile-friendly-websites-must-2015/

Unidades relativas

Porcentajes - %emremvh, vw

media-queries

@media screen and (max-width:480px) {.miClase {

...}

}

widthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratiocolorcolor-indexmonochromeresolutionscangrid

media-queries

max-widthAplica a todo lo menor del valor

min-widthAplica a todo lo mayor que el valor

Viewport

Hardware Pixel

Device Independent Pixel (DIP)

Pixel CSS

Viewport

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

Progressive Enhancement vsGraceful Degradation

http://metamonks.com/mobile-first-vs-responsive/

Patrones de diseño Responsive

Tiny Tweaks

http://www.lukew.com/ff/entry.asp?1514

Patrones de diseño Responsive

Column-Drop

http://www.lukew.com/ff/entry.asp?1514

Patrones de diseño Responsive

Mostly-Fluid

http://www.lukew.com/ff/entry.asp?1514

Patrones de diseño Responsive

Layout Shifter

http://www.lukew.com/ff/entry.asp?1514

Patrones de diseño Responsive

Off-Canvas

http://www.lukew.com/ff/entry.asp?1514