Responsive Web Design - Reinventando la web

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