Diseñando una web para   todos los dispositivos La nueva tendencia del Responsive Web Design                       Nicolás...
¿Qué es el Responsive Web Design    o Diseño Web Adaptable?         Diseñando una web para todos los dispositivos - La nue...
Es la tendencia para crear sitios web que se adaptan alancho del dispositivo en que se esté navegando, lo que permite tene...
Un poco de historia... pero solo un poco             Diseñando una web para todos los dispositivos - La nueva tendencia de...
1990’s la web mide 800pxDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design      ...
2000’sla web mide 1024pxDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design      ...
2007                        +la web mide 1024px y 320px    Diseñando una web para todos los dispositivos - La nueva tenden...
2010        +                                 +la web mide 1200px y 320px y 768px       Diseñando una web para todos los d...
2012   +                  +                                    +la web mide 1200px y 320px y 768px y 1800px            Dis...
2012 +                     +                                    +                       ¿320px?la web mide 256px y 320px y...
¿Cómo abordar una versión móvil?         Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive...
1ra. solución:versión desktop + versión mobile      (específica para c/dispositivo)          Diseñando una web para todos ...
¿Cómo logro que mi web    sea adaptable?    Diseñando una web para todos los dispositivos - La nueva tendencia del Respons...
+                         +          Retículas                                     flexibles        +           Elementos ...
¿Qué son las Media Queries?       Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web De...
Son una exten­ ión de CSS2 que per­ iten defi­ ir las hojas de estilo             s                           m           ...
Dentro de las etiquetas <head> </head><link rel=”stylesheet” media=”screen and (min-device-width: 980px)” href=”desktop.cs...
Retículas Flexibles  Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design         ...
www.anderssonwise.comDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design         ...
www.bradsawicki.comDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design           ...
www.madebysplendid.comDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design        ...
www.palantir.netDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design              ...
www.orestis.nlDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design                ...
Navegación - Soluciones Adaptables          Diseñando una web para todos los dispositivos - La nueva tendencia del Respons...
Navegación StandardDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design           ...
Navegación en GrillaDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design          ...
Navegación con un botón “Menú”     Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web D...
Navegación “Select” Drop-down     Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web De...
Frameworks más utilizados      Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Desig...
http://html5boilerplate.com/html5boilerplate.com/dist/mobile/                 Diseñando una web para todos los dispositivo...
http://lessframework.com/Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design     ...
http://twitter.github.com/bootstrap/     Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive...
http://goldengridsystem.com/  Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design...
http://foundation.zurb.com/ Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design  ...
Resoluciones de pantallas posibles          Diseñando una web para todos los dispositivos - La nueva tendencia del Respons...
Pros:- Una sola versión para todos los dispositivos (multiplataforma)- Reducción de los costos del mantenimiento- No se tr...
Contras:- Tiempos de diseño- Desarrollo en formato web- Compatibilidad con navegadores y dispositivos                     ...
¿Puedo ver más ejemplos?     Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design ...
Smashing Magazine  www.smashingmagazine.com  Diseñando una web para todos los dispositivos - La nueva tendencia del Respon...
CSS-Tricks         css-tricks.comDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Des...
App Cube          appcube.infoDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design...
Media Queries         mediaqueri.esDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web D...
¿Algunos links sobre RWD?- mediaqueri.es- webdesignledger.com/tips/web-design-trends-in-2012- www.emenia.es/diseno-web-ada...
ConclusiónNo hay una web para escritorio, una para smartphones y otra             para tablets; hay UNA SOLA WEB          ...
Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design                              ...
Muchas Gracias!     Nicolás Salinas Graphic & Interactive Web Designer     @nick_supremacy nico@socialcherry.com.py    Dis...
Upcoming SlideShare
Loading in …5
×

La nueva tendencia del Responsive Web Design

1,065 views
999 views

Published on

La importancia del diseño y desarrollo de un sitio web hoy radica en darle al usuario la ventaja de poder acceder a la información que desee cuando lo desee, sobre todo desde cualquier dispositivo como una pc de escritorio, notebook, netbook, tablets o smartphones. Esto es una tendencia en aumento considerada como “Responsive Web Design”

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,065
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

La nueva tendencia del Responsive Web Design

  1. 1. Diseñando una web para todos los dispositivos La nueva tendencia del Responsive Web Design Nicolás Salinas Graphic & Interactive Web Designer
  2. 2. ¿Qué es el Responsive Web Design o Diseño Web Adaptable? Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  3. 3. Es la tendencia para crear sitios web que se adaptan alancho del dispositivo en que se esté navegando, lo que permite tener un único diseño para PC’s, notebooks, netbooks, smartphones y tablets. Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  4. 4. Un poco de historia... pero solo un poco Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  5. 5. 1990’s la web mide 800pxDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  6. 6. 2000’sla web mide 1024pxDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  7. 7. 2007 +la web mide 1024px y 320px Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  8. 8. 2010 + +la web mide 1200px y 320px y 768px Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  9. 9. 2012 + + +la web mide 1200px y 320px y 768px y 1800px Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  10. 10. 2012 + + + ¿320px?la web mide 256px y 320px y 426px y 480px y 560px y 640px y 768px y 800px y 960px y 1024px y 1280px y 1440px y 1600px y 1800px Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  11. 11. ¿Cómo abordar una versión móvil? Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  12. 12. 1ra. solución:versión desktop + versión mobile (específica para c/dispositivo) Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  13. 13. ¿Cómo logro que mi web sea adaptable? Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  14. 14. + + Retículas flexibles + Elementos multimedia flexibles + Diseños fluidos (@media queries) Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  15. 15. ¿Qué son las Media Queries? Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  16. 16. Son una exten­ ión de CSS2 que per­ iten defi­ ir las hojas de estilo s m n espe­cí­fi­cas para dis­tin­tos dis­po­si­ti­vos o “media”. Ahora con CSS3 esta fun­cio­na­li­dad per­mi­te defi­nir con­di­cio­nescomo el tamaño en dimensiones de las pantallas de los dis­ o­ i­ivos p st Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  17. 17. Dentro de las etiquetas <head> </head><link rel=”stylesheet” media=”screen and (min-device-width: 980px)” href=”desktop.css” /><link rel=”stylesheet” media=”screen and (min-device-width: 768px)” href=”tablet.css” /><link rel=”stylesheet” media=”screen and (min-device-width: 480px)” href=”mobile.css” />Dentro del archivo .css#wrapper { @media screen and (max-width: 768px) { margin:auto; #wrapper { width:90%; background-color:#0C0; padding:20px; } background-color:#0CF; }} Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  18. 18. Retículas Flexibles Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  19. 19. www.anderssonwise.comDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  20. 20. www.bradsawicki.comDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  21. 21. www.madebysplendid.comDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  22. 22. www.palantir.netDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  23. 23. www.orestis.nlDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  24. 24. Navegación - Soluciones Adaptables Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  25. 25. Navegación StandardDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  26. 26. Navegación en GrillaDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  27. 27. Navegación con un botón “Menú” Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  28. 28. Navegación “Select” Drop-down Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  29. 29. Frameworks más utilizados Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  30. 30. http://html5boilerplate.com/html5boilerplate.com/dist/mobile/ Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  31. 31. http://lessframework.com/Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  32. 32. http://twitter.github.com/bootstrap/ Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  33. 33. http://goldengridsystem.com/ Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  34. 34. http://foundation.zurb.com/ Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  35. 35. Resoluciones de pantallas posibles Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  36. 36. Pros:- Una sola versión para todos los dispositivos (multiplataforma)- Reducción de los costos del mantenimiento- No se trata sólo del dispositivo, sino de la UX (User Experience)- SEO, mejora la usabilidad y conversión Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  37. 37. Contras:- Tiempos de diseño- Desarrollo en formato web- Compatibilidad con navegadores y dispositivos Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  38. 38. ¿Puedo ver más ejemplos? Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  39. 39. Smashing Magazine www.smashingmagazine.com Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  40. 40. CSS-Tricks css-tricks.comDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  41. 41. App Cube appcube.infoDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  42. 42. Media Queries mediaqueri.esDiseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  43. 43. ¿Algunos links sobre RWD?- mediaqueri.es- webdesignledger.com/tips/web-design-trends-in-2012- www.emenia.es/diseno-web-adaptable-o-responsive-web-design- teamtreehouse.com/blog/beginners-guide-to-responsive-web-design- www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/ Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  44. 44. ConclusiónNo hay una web para escritorio, una para smartphones y otra para tablets; hay UNA SOLA WEB Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  45. 45. Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  46. 46. Muchas Gracias! Nicolás Salinas Graphic & Interactive Web Designer @nick_supremacy nico@socialcherry.com.py Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer

×