La nueva tendencia del Responsive Web Design
•
3 recomendaciones•1,157 vistas
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”
Recomendados
Recomendados
Más contenido relacionado
Similar a La nueva tendencia del Responsive Web Design
Similar a La nueva tendencia del Responsive Web Design (20)
Último
Último (20)
La nueva tendencia del Responsive Web Design
- 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 al ancho 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 800px Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
- 6. 2000’s la web mide 1024px Diseñ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 específicas para distintos dispositivos o “media”. Ahora con CSS3 esta funcionalidad permite definir condiciones como el tamaño en dimensiones de las pantallas de los dis o iivos 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.com Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
- 20. www.bradsawicki.com Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
- 21. www.madebysplendid.com Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
- 22. www.palantir.net Diseñando una web para todos los dispositivos - La nueva tendencia del Responsive Web Design Nicolás Salinas - Graphic & Interactive Web Designer
- 23. www.orestis.nl Diseñ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 Standard Diseñ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 Grilla Diseñ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.com Diseñ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.info Diseñ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.es Diseñ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ón No 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