El documento discute el diseño web adaptable (responsive web design), que permite que los sitios se ajusten a diferentes dispositivos como PCs, smartphones y tablets. Se abordan aspectos históricos, soluciones para la creación de versiones móviles, herramientas como media queries, y se enumeran pros y contras del enfoque responsive. La conclusión enfatiza la necesidad de una única versión web para todos los dispositivos, mejorando la experiencia del usuario y reduciendo costos de mantenimiento.

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
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­nes
como 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.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