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

1. RESPoNSIVE
WEB DESIGN
reinventando el diseño web
Javier Usobiaga #DevUp12

2. @htmlboy
trabajo en Swwweet.com

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

4. ¿Qué es
LA web?

5. historia de una
obsesión
por el control

6. 1990s
la web mide 800px

7. 2000s
la web mide 1024px

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

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

10. 2012
+ + +
la web mide 1200px y 320px
y 768px y 1800px

11. 2012
+ + +
¿320px?

12. 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!
es hora de aceptar la
naturaleza de la web

14. LA WEB ES
fluida
universal
multidispositivo

15. primer acto
RESPoNSIVE
WEB DESIGN

16. 2012.dconstruct.org

17. mediaqueri.es

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

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

20. RETÍCULAS
target
÷
contexto
resultado

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

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

23. MEDIA QUERIES
@media screen and (max-width:320px){
.columna_lateral{
width: 100%;
float: none;
}
}

24. MEDIA QUERIES
cambiar el layout
cambiar los estilos
aumentar el tamaño de la tipografía

25. segundo acto
workflow

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

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

28. CASCADA
¡Claro!

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

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

31. CASCADA
Unos CSS por
aquí, un JS por
allá... ¡Y ya
tenemos web!

32. CASCADA
Uh... esto...

33. Fail
fail
FAIL

34. Responsive
responsive

35. tercer acto
diez
consejos

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
no se puede dominar la web
RWD es una solución viable
si cambiamos la mentalidad

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