SlideShare una empresa de Scribd logo
DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA



Responsive
web design
Tona Monjo http://www.latent-design.com
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
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
Diseño fijo




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




                                               DGP65 | REALIZACIÓN DE PROTOTIPOS - ELISAVA
5    Tona Monjo http://www.latent-design.com                            Responsive web design
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
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
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
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
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
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
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
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
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
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
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
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

Más contenido relacionado

PDF
Wireframes
PDF
Diagramas de flujo
PDF
Taller diseño web responsivo
PDF
Responsive web design
PPTX
Responsive web design
PDF
La nueva tendencia del Responsive Web Design
PPTX
Video animado diseño web adaptativo o responsivo
Wireframes
Diagramas de flujo
Taller diseño web responsivo
Responsive web design
Responsive web design
La nueva tendencia del Responsive Web Design
Video animado diseño web adaptativo o responsivo

Similar a Responsive web design (20)

PDF
Diseño Web Responsivo
PDF
Presentación diseño responsivo
PPTX
Las 5 Reglas de Oro del Diseño Web Responsive
PDF
ing.software
DOCX
Diseño web responsivo
PDF
Responsive Web Design, ventaja, inconvenientes y recomendaciones
PDF
Responsive Design - Taller de Diseño av
PDF
Responsive Design
PDF
Responsive Web Design: Reinventando el diseño web
PDF
Responsive design
PDF
Responsive Web Design
PDF
PATRONES DE DISEÑO WEB
PPTX
Introduccion-al-diseno-responsivo (1).pptx
PDF
Responsive Web Design
PPTX
Diseño web responsivo o adaptativo..pptx
PDF
Responsive Web Design
PDF
Guia Definitiva del Mobile Marketing de Netizen
PDF
Qué es el diseño web responsivo
PPTX
PDF
Interfaces Web Adaptables al dispositivo empleando HTML5 y CSS3.pdf
Diseño Web Responsivo
Presentación diseño responsivo
Las 5 Reglas de Oro del Diseño Web Responsive
ing.software
Diseño web responsivo
Responsive Web Design, ventaja, inconvenientes y recomendaciones
Responsive Design - Taller de Diseño av
Responsive Design
Responsive Web Design: Reinventando el diseño web
Responsive design
Responsive Web Design
PATRONES DE DISEÑO WEB
Introduccion-al-diseno-responsivo (1).pptx
Responsive Web Design
Diseño web responsivo o adaptativo..pptx
Responsive Web Design
Guia Definitiva del Mobile Marketing de Netizen
Qué es el diseño web responsivo
Interfaces Web Adaptables al dispositivo empleando HTML5 y CSS3.pdf
Publicidad

Responsive web design

  • 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