La nueva tendencia del Responsive Web Design

  • 769 views
Uploaded 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 …

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”

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
769
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Diseñando una web para todos los dispositivos La nueva tendencia del Responsive Web Design Nicolás Salinas Graphic & Interactive Web Designer
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. ¿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. 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. ¿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. + + 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. ¿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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. ¿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. 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. 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. 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. 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. ¿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. 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. Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
  • 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