Este documento describe el diseño web responsivo. Explica que debido a la variedad de dispositivos y formatos, el diseño web debe adaptarse dinámicamente. Detalla seis principios clave del diseño web responsivo: 1) uso de una retícula flexible, 2) elementos multimedia flexibles, 3) comportamientos adaptativos, 4) posicionamiento flexible, 5) tamaño flexible de texto y elementos, y 6) control de visibilidad. El diseño web responsivo se implementa mediante el uso de media queries en CSS.

1. DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA
Responsive
web design
Tona Monjo http://www.latent-design.com

2. El contexto: diferentes dispositivos
http://www.siliconbeachtraining.co.uk/blog/make-your-business-mobile/
DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA
2 Tona Monjo http://www.latent-design.com Responsive web design

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 - ELISAVA
3 Tona Monjo http://www.latent-design.com Responsive web design

4. Diseño fijo
DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA
4 Tona Monjo http://www.latent-design.com Responsive web design

5. Responsive web design
DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA
5 Tona Monjo http://www.latent-design.com Responsive web design

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 - ELISAVA
6 Tona Monjo http://www.latent-design.com Responsive web design

7. Responsive web design
http://dribbble.com/shots/494207-Responsive-Design-mobile-first
DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA
7 Tona Monjo http://www.latent-design.com Responsive web design

8. Responsive web design
1. Layout basado en una retícula flexible
http://bostonglobe.com/
DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA
8 Tona Monjo http://www.latent-design.com Responsive web design

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 - ELISAVA
9 Tona Monjo http://www.latent-design.com Responsive web design

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 - ELISAVA
10 Tona Monjo http://www.latent-design.com Responsive web design

11. Responsive web design
2. Imagen y media flexibles
http://heathlife.co.uk/
DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA
11 Tona Monjo http://www.latent-design.com Responsive web design

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 - ELISAVA
12 Tona Monjo http://www.latent-design.com Responsive web design

13. Responsive web design
4. Posición flexible de los elementos
http://colly.com/
DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA
13 Tona Monjo http://www.latent-design.com Responsive web design

14. Responsive web design
5. Tamaño flexible del texto y elementos interactivos
http://www.deren.me/
DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA
14 Tona Monjo http://www.latent-design.com Responsive web design

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 - ELISAVA
15 Tona Monjo http://www.latent-design.com Responsive web design

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 - ELISAVA
16 Tona Monjo http://www.latent-design.com Responsive web design

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 - ELISAVA
17 Tona Monjo http://www.latent-design.com Responsive web design