introducción a responsive design

14
Responsive Design #mejorFront

Upload: leonidas-esteban-gonzalez

Post on 28-Jun-2015

720 views

Category:

Technology


2 download

DESCRIPTION

Presentaciónde introducción al curso de Responsive Design de Mejorando.la #mejorFront

TRANSCRIPT

Page 1: Introducción a Responsive Design

Responsive Design#mejorFront

Page 2: Introducción a Responsive Design

Estoy aprendiendo Responsive Design con @LeonidasEsteban

#mejorFront

Page 3: Introducción a Responsive Design

¿Qué es Responsive Design?

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

Page 4: Introducción a Responsive Design

Técnicas• Medidas relativas

• Displays

• Videos

• Imágenes

• Sliders

Page 5: Introducción a Responsive Design

Viewport

• El Area visible del navegador.

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

Page 6: Introducción a Responsive Design

Media queries

• Consultas hechas al estado del dispositivo como su ancho, alto o color

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

Page 7: Introducción a Responsive Design

Densidad de pixel

• Pantallas más pequeñas con resoluciones gigantes

• http://bjango.com/articles/min-device-pixel-ratio/

Page 8: Introducción a Responsive Design

Gestos

Page 9: Introducción a Responsive Design

Patrones de diseño

Page 10: Introducción a Responsive Design

Mostly Fluidhttp://www.antarcticstation.org/

Page 11: Introducción a Responsive Design

Column Drophttp://modernizr.com/

Page 12: Introducción a Responsive Design

Layout Shifterhttp://foodsense.is/

Page 13: Introducción a Responsive Design

Tiny Tweakshttp://futurefriendlyweb.com/

Page 14: Introducción a Responsive Design

Off CanvasMobile Apps