responsive web design

DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA

Responsiveweb designTona Monjo http://www.latent-design.com

DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVAResponsive web designTona Monjo http://www.latent-design.com

http://www.siliconbeachtraining.co.uk/blog/make-your-business-mobile/

2

El contexto: diferentes dispositivos

DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVAResponsive web designTona Monjo http://www.latent-design.com

http://mashable.com/2012/05/16/android-fragmentation-graphic/

3

El contexto: diferentes formatos

Un ejemplo: la variedad de formatos Android

DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVAResponsive web designTona Monjo http://www.latent-design.com4

Diseño fijo

DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVAResponsive web designTona Monjo http://www.latent-design.com5

Responsive web design

DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVAResponsive web designTona Monjo http://www.latent-design.com

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

6

Responsive web design

DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVAResponsive web designTona Monjo http://www.latent-design.com

http://dribbble.com/shots/494207-Responsive-Design-mobile-first

7

Responsive web design

DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVAResponsive web designTona Monjo http://www.latent-design.com8

Responsive web design1. Layout basado en una retícula flexible

http://bostonglobe.com/

DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVAResponsive web designTona Monjo http://www.latent-design.com

http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/

9

Responsive web design1. Layout basado en una retícula flexible

DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVAResponsive web designTona Monjo http://www.latent-design.com

http://www.cmswire.com/images/responsive-grid.png

10

Responsive web design1. Layout basado en una retícula flexible

DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVAResponsive web designTona Monjo http://www.latent-design.com

http://heathlife.co.uk/

11

Responsive web design2. Imagen y media flexibles

DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVAResponsive web designTona Monjo http://www.latent-design.com12

Responsive web design3. Comportamientos adaptativos

http://www.time.com/time/

El comportamiento del menú principal se adapta a los diferentes formatos

DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVAResponsive web designTona Monjo http://www.latent-design.com

http://colly.com/

13

Responsive web design4. Posición flexible de los elementos

DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVAResponsive web designTona Monjo http://www.latent-design.com

http://www.deren.me/

14

Responsive web design5. Tamaño flexible del texto y elementos interactivos

DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVAResponsive web designTona Monjo http://www.latent-design.com15

Responsive web design6. Control de la visibilidad de los elementos

http://thehappybit.com/

Algunos elementos son visibles en escritorio, pero no en smartphone

DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVAResponsive web designTona Monjo http://www.latent-design.com16

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 - ELISAVAResponsive web designTona Monjo http://www.latent-design.com

http://mediaqueri.es/

17

Más info

Recursos

http://www.abookapart.com/products/responsive-web-design

Libros

http://bradfrost.github.com/this-is-responsive/

Ejemplos

http://alistapart.com/topic/responsive-design

Artículos