responsive web design
TRANSCRIPT
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