Responsive web design

1.166 visualizaciones

Publicado el

0 comentarios
5 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
1.166
En SlideShare
0
De insertados
0
Número de insertados
6
Acciones
Compartido
0
Descargas
21
Comentarios
0
Recomendaciones
5
Insertados 0
No insertados

No hay notas en la diapositiva.

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

×