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

Responsive Web Design: Reinventando el diseño web

13,015

Published on

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

4 Comments
29 Likes
Statistics
Notes
No Downloads
Views
Total Views
13,015
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
286
Comments
4
Likes
29
Embeds 0
No embeds

No notes for slide

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
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×