DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVAResponsiveweb designTona Monjo http://www.latent-design.com
El contexto: diferentes dispositivos                                       http://www.siliconbeachtraining.co.uk/blog/make...
El contexto: diferentes formatos                                                        Un ejemplo: la variedad de formato...
Diseño fijo                                               DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA4    Tona Monjo http:...
Responsive web design                                               DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA5    Tona M...
Responsive web design                     1. Layout basado en una retícula flexible                     2. Imagen y media ...
Responsive web design                                               http://dribbble.com/shots/494207-Responsive-Design-mob...
Responsive web design    1. Layout basado en una retícula flexible                                               http://bo...
Responsive web design    1. Layout basado en una retícula flexible                               http://elliotjaystocks.co...
Responsive web design     1. Layout basado en una retícula flexible                                                http://...
Responsive web design     2. Imagen y media flexibles                                                http://heathlife.co.u...
Responsive web design     3. Comportamientos adaptativos                                       El comportamiento del menú ...
Responsive web design     4. Posición flexible de los elementos                                                http://coll...
Responsive web design     5. Tamaño flexible del texto y elementos interactivos                                           ...
Responsive web design     6. Control de la visibilidad de los elementos                                          Algunos e...
Responsive web design     ¿Cómo?                Media Queries                Permiten comprobar las condiciones del dispos...
Más info Ejemplos     http://mediaqueri.es/ Recursos     http://bradfrost.github.com/this-is-responsive/ Artículos     htt...
Próxima SlideShare
Cargando en…5
×

Responsive web design

1.237 visualizaciones

Publicado el

  • Sé el primero en comentar

Responsive web design

  1. 1. DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVAResponsiveweb designTona Monjo http://www.latent-design.com
  2. 2. El contexto: diferentes dispositivos http://www.siliconbeachtraining.co.uk/blog/make-your-business-mobile/ DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA2 Tona Monjo http://www.latent-design.com Responsive web design
  3. 3. El contexto: diferentes formatos Un ejemplo: la variedad de formatos Android http://mashable.com/2012/05/16/android-fragmentation-graphic/ DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA3 Tona Monjo http://www.latent-design.com Responsive web design
  4. 4. Diseño fijo DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA4 Tona Monjo http://www.latent-design.com Responsive web design
  5. 5. Responsive web design DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA5 Tona Monjo http://www.latent-design.com Responsive web design
  6. 6. Responsive web design 1. Layout basado en una retícula flexible 2. Imagen y media flexibles 3. Comportamientos adaptativos 4. Posición flexible de los elementos 5. Tamaño flexible de texto y elementos interactivos 6. Control de la visibilidad de los elementos DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA6 Tona Monjo http://www.latent-design.com Responsive web design
  7. 7. Responsive web design http://dribbble.com/shots/494207-Responsive-Design-mobile-first DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA7 Tona Monjo http://www.latent-design.com Responsive web design
  8. 8. Responsive web design 1. Layout basado en una retícula flexible http://bostonglobe.com/ DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA8 Tona Monjo http://www.latent-design.com Responsive web design
  9. 9. Responsive web design 1. Layout basado en una retícula flexible http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/ DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA9 Tona Monjo http://www.latent-design.com Responsive web design
  10. 10. Responsive web design 1. Layout basado en una retícula flexible http://www.cmswire.com/images/responsive-grid.png DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA10 Tona Monjo http://www.latent-design.com Responsive web design
  11. 11. Responsive web design 2. Imagen y media flexibles http://heathlife.co.uk/ DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA11 Tona Monjo http://www.latent-design.com Responsive web design
  12. 12. Responsive web design 3. Comportamientos adaptativos El comportamiento del menú principal se adapta a los diferentes formatos http://www.time.com/time/ DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA12 Tona Monjo http://www.latent-design.com Responsive web design
  13. 13. Responsive web design 4. Posición flexible de los elementos http://colly.com/ DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA13 Tona Monjo http://www.latent-design.com Responsive web design
  14. 14. Responsive web design 5. Tamaño flexible del texto y elementos interactivos http://www.deren.me/ DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA14 Tona Monjo http://www.latent-design.com Responsive web design
  15. 15. Responsive web design 6. Control de la visibilidad de los elementos Algunos elementos son visibles en escritorio, pero no en smartphone http://thehappybit.com/ DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA15 Tona Monjo http://www.latent-design.com Responsive web design
  16. 16. Responsive web design ¿Cómo? Media Queries Permiten comprobar las condiciones del dispositivo (true o false), para aplicar las hojas de estilo o reglas CSS correspondientes. http://alistapart.com/article/responsive-web-design DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA16 Tona Monjo http://www.latent-design.com Responsive web design
  17. 17. Más info Ejemplos http://mediaqueri.es/ Recursos http://bradfrost.github.com/this-is-responsive/ Artículos http://alistapart.com/topic/responsive-design Libros http://www.abookapart.com/products/responsive-web-design DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA17 Tona Monjo http://www.latent-design.com Responsive web design

×