Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Web Design: Reinventando el diseño web

15,643 views

Published on

Presentación de Javier Usobiaga en el Ideateca HTML5 DevUp 2012.

Responsive Web Design: Reinventando el diseño web

  1. 1. RESPoNSIVE WEB DESIGN reinventando el diseño webJavier Usobiaga #DevUp12
  2. 2. @htmlboytrabajo en Swwweet.com
  3. 3. ¿Qué es elrespoNsiveresponsiveweb design?
  4. 4. ¿Qué esLA web?
  5. 5. historia de unaobsesión por el control
  6. 6. 1990sla web mide 800px
  7. 7. 2000sla web mide 1024px
  8. 8. 2007 +la web mide 1024px y 320px
  9. 9. 2010 + +la web mide 1200px y 320px y 768px
  10. 10. 2012 + + +la web mide 1200px y 320px y 768px y 1800px
  11. 11. 2012+ + + ¿320px?
  12. 12. 2012 + + + + la web mide 256px y 320pxy 426px y 480px y 560px y 640px y 768px y 800px y 960px y 1024px y 1280px y 1440px y 1600px y 1800px…
  13. 13. ¡BASTA!es hora de aceptar lanaturaleza de la web
  14. 14. LA WEB ES fluida universal multidispositivo
  15. 15. primer actoRESPoNSIVEWEB DESIGN
  16. 16. 2012.dconstruct.org
  17. 17. mediaqueri.es
  18. 18. ¿PERO CÓMO? retículas flexibleselementos multimedia flexibles @media queries
  19. 19. RETÍCULAS16% 16% 16% 16% 16% 16% 16% 16%
  20. 20. RETÍCULAS target ÷ contexto resultado
  21. 21. RETÍCULAS .grid_3{width:300px} 300 / 960 = 0,2340 .grid_3{width:23.40%}
  22. 22. MULTIMEDIA img, video{ max-width:100% }
  23. 23. MEDIA QUERIES@media screen and (max-width:320px){ .columna_lateral{ width: 100%; float: none; }}
  24. 24. MEDIA QUERIES cambiar el layout cambiar los estilosaumentar el tamaño de la tipografía
  25. 25. segundo actoworkflow
  26. 26. CASCADADISEÑO DISEÑO FRONT JEFE UX VISUAL END
  27. 27. CASCADA Hola, quería una web...
  28. 28. CASCADA ¡Claro!
  29. 29. CASCADA Empezaré por definir las estructuras en unos wireframes.
  30. 30. CASCADA Le damos un poco de color...
  31. 31. CASCADA Unos CSS por aquí, un JS por allá... ¡Y ya tenemos web!
  32. 32. CASCADA Uh... esto...
  33. 33. FailfailFAIL
  34. 34. Responsiveresponsive
  35. 35. tercer acto diezconsejos
  36. 36. 1. ComunicaciónEntre todo el equipo, durante todo el ciclo de vida del proyecto.
  37. 37. 2. Diseño y front-end, juntosEl proceso está lleno de decisiones que se toman sobre la marcha.
  38. 38. 3. MicroentregasEl cliente participa activamente y ayuda a tomar decisiones.
  39. 39. 4. Lo primero, el contenidoHaz un inventario del contenido y busca sus límites.
  40. 40. 5. Identifica puntos críticosNavegación, imágenes, publicidad, jerarquía informativa…
  41. 41. 6. Mobile firstLa pantalla pequeña es el primer límite.
  42. 42. 7. Bocetos de referenciaCrea bocetos básicos para jerarquizar el contenido.
  43. 43. 8. Prototipa rápidoEmpieza a ver la página en HTML cuanto antes.
  44. 44. 9. Diseña en el navegadorToma decisiones de diseño a medida que ves cómo quedan en pantalla.
  45. 45. 10. Diseña todo a la vez Desarrolla pensando en losdiferentes tamaños al mismo tiempo.
  46. 46. EN RESUMENno se puede dominar la webRWD es una solución viablesi cambiamos la mentalidad
  47. 47. ¡gracias!Javier Usobiaga · http://Swwweet.com · @htmlboy

×