Responsive Web Design - Reinventando la web

0fe2973fa8d27d96547e43322341183a?s=47 Swwweet
April 27, 2012
Technology
15
4.5k

Responsive Web Design - Reinventando la web

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

0fe2973fa8d27d96547e43322341183a?s=128

Swwweet

April 27, 2012
Tweet

More Decks by Swwweet

See All by Swwweet
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
0
110
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
4
310
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
4
310
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
206
6.8k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
12
610
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
2
470
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
23
1.3k
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
0
780
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
4
280

Other Decks in Technology

See All in Technology
E7f82c6db76f340b8ccc175d4330405b?s=48 sakon310
4
4.2k
53e2d354b3299d64a54af680865516d5?s=48 satotakeshi
0
160
567600e04dbcb14d6bd8f120e6625a27?s=48 tsuyo
0
180
3420e65cb2d008af23ec2ca10afe0aef?s=48 yuuturn
1
130
79fc33e55cacc42beef647541de24d58?s=48 yasuakiomokawa
0
260
Da40bdb49bfb7a3fc9426dacac78a99c?s=48 ama_ch
0
3.3k
Deb41fbc059f796a9eb3109ffed6c84d?s=48 toshinoritakai
1
190
9b63847a4c413a2604e1d64e5d595dab?s=48 humank
0
210
3009eedce0d0f7ae45987a7bd8f57b85?s=48 nkjzm
1
780
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
160
3bd2c1eac6c4d0852c6a788dd835db44?s=48 awsbelaraby
4
1k
Dd7fa413be25d8672c03a487db6a8fe6?s=48 fujiihda
0
140

Featured

See All Featured
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
684
180k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
56
9.3k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
200
9.6k
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
103
4.9k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
446
36k
282d599b414022eba5096510f675b6e2?s=48 chrislema
173
14k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
13
4.2k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
295
27k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
258
24k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
186
14k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
71
1.4k
78b475797a14c84799063c7cd073962f?s=48 holman
288
130k

Transcript

  1. RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN reinventando

    el diseño web Javier Usobiaga #DevUp12

  2. @htmlboy @htmlboy @htmlboy trabajo en Swwweet.com

  3. ¿Qué es el responsive web design? ¿Qué es el responsive

    web design? ¿Qué es el respoNsive web design?

  4. ¿Qué es LA web? ¿Qué es LA web? ¿Qué es

    LA web?

  5. obsesión obsesión historia de una obsesión por el control

  6. 1990s 1990s 1990s la web mide 800px

  7. 2000s 2000s 2000s la web mide 1024px

  8. 2007 2007 2007 + la web mide 1024px y 320px

  9. 2010 2010 2010 + + la web mide 1200px y

    320px y 768px

  10. 2012 2012 2012 + + la web mide 1200px y

    320px y 768px y 1800px +

  11. 2012 2012 2012 + + ¿320px? +

  12. 2012 2012 2012 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… + + + +

  13. ¡BASTA! ¡BASTA! ¡BASTA! es hora de aceptar la naturaleza de

    la web

  14. LA WEB ES LA WEB ES LA WEB ES fluida

    universal multidispositivo

  15. primer acto RESPoNSIVE WEB DESIGN RESPoNSIVE WEB DESIGN RESPoNSIVE WEB

    DESIGN

  16. 2012.dconstruct.org

  17. mediaqueri.es

  18. ¿PERO CÓMO? ¿PERO CÓMO? ¿PERO CÓMO? retículas flexibles elementos multimedia

    flexibles @media queries

  19. RETÍCULAS RETÍCULAS RETÍCULAS 16% 16% 16% 16% 16% 16% 16%

    16%

  20. RETÍCULAS RETÍCULAS RETÍCULAS target contexto ÷ resultado

  21. RETÍCULAS RETÍCULAS RETÍCULAS .grid_3{width:300px} 300 / 960 = 0,2340 .grid_3{width:23.40%}

  22. MULTIMEDIA MULTIMEDIA MULTIMEDIA img, video{ max-width:100% }

  23. MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES @media screen and (max-width:320px){

    .columna_lateral{ width: 100%; float: none; } }

  24. MEDIA QUERIES MEDIA QUERIES MEDIA QUERIES cambiar el layout cambiar

    los estilos aumentar el tamaño de la tipografía

  25. workflow workflow workflow segundo acto

  26. CASCADA CASCADA CASCADA DISEÑO UX DISEÑO VISUAL FRONT END JEFE

  27. CASCADA CASCADA CASCADA Hola, quería una web...

  28. CASCADA CASCADA CASCADA ¡Claro!

  29. CASCADA CASCADA CASCADA Empezaré por definir las estructuras en unos

    wireframes.

  30. CASCADA CASCADA CASCADA Le damos un poco de color...

  31. CASCADA CASCADA CASCADA Unos CSS por aquí, un JS por

    allá... ¡Y ya tenemos web!

  32. CASCADA CASCADA CASCADA Uh... esto...

  33. FAIL fail Fail

  34. responsive responsive Responsive

  35. diez consejos diez consejos diez consejos tercer acto

  36. 1. Comunicación Entre todo el equipo, durante todo el ciclo

    de vida del proyecto.

  37. 2. Diseño y front-end, juntos El proceso está lleno de

    decisiones que se toman sobre la marcha.

  38. 3. Microentregas El cliente participa activamente y ayuda a tomar

    decisiones.

  39. 4. Lo primero, el contenido Haz un inventario del contenido

    y busca sus límites.

  40. 5. Identifica puntos críticos Navegación, imágenes, publicidad, jerarquía informativa…

  41. 6. Mobile first La pantalla pequeña es el primer límite.

  42. 7. Bocetos de referencia Crea bocetos básicos para jerarquizar el

    contenido.

  43. 8. Prototipa rápido Empieza a ver la página en HTML

    cuanto antes.

  44. 9. Diseña en el navegador Toma decisiones de diseño a

    medida que ves cómo quedan en pantalla.

  45. 10. Diseña todo a la vez Desarrolla pensando en los

    diferentes tamaños al mismo tiempo.

  46. EN RESUMEN EN RESUMEN EN RESUMEN no se puede dominar

    la web RWD es una solución viable si cambiamos la mentalidad

  47. ¡gracias! ¡gracias! ¡gracias! Javier Usobiaga · http://Swwweet.com · @htmlboy