Diseño Web Adaptativo Responsive Design . Del prototipo al HTML y CSS

1. Diseño Web Adaptativo ResponsiveDesign. Del prototipo al HTML y CSS

2. ¿Qué es? El diseño web adaptable o adaptativo (en inglés, Responsive Web Design) es una filosofía de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.

3. Web = diversidad

5. Optimizar no es igual a miniaturizar

6. Mr. SimonCollison http://colly.com/

7. Stephen Caver http://stephencaver.com/

8. Spark-Box http://seesparkbox.com/

9. FoodSense http://foodsense.is/

10. IllyIssimo http://us.illyissimo.com/

11. Media Queries http://www.mediaqueri.es

12. Necesitamos optimizarla interfaces a través de distintos dispositivos ¿Por qué? • Distintas personasentran con distintos dispositivos • La misma personaempieza tarea en un dispositivo, y la sigue en otro.

13. ¿Como se hace? • Usar Media Queries para lograr un diseño optimizadomediante layout y grillas flexibles, incluyendo tipografía y medios adaptados (fotos, videos, mapas, tablas, sliders) y navegación acorde al dispositivo.

14. Cambió el contexto de uso de la web. Aprendimos nuevas técnicas, como Responsive Web Design. Pero... seguimos aplicando el mismo Workflowlineal

15. Workflowlineal(heredado de gráfica)

16. Análisis de Workflows Responsive

17. Workflow de Viljami Salminen http://viljamis.com/blog/2012/responsive-workflow/

18. Workflow de Pon Kattera http://www.slideshare.net/pkattera/design-process-for-responsive-web-design

19. Workflow de Stephanie Rieger http://www.slideshare.net/yiibu/pragmatic-responsive-design

20. Dos enfoques para la etapa de Diseño Centrado en dispositivos • Vs • Centrado en contenidos

21. Centrado en dispositivos (insostenible) 1) Se hacía una lista de 5 o 6 dispositivos más vendidos 2) Se anotaba el ancho en pixeles de cada dispositivo 3) Se definían los breakpoints con una media querie en pixeles para cada resolución.

22. Ejemplo de gráfico de breakpoints (obsoleto)

23. Código de ejemplo(¡obsoleto!)para iPhone y iPad (no cubre Retina) @media screen and (max-width: 480px){ /* Aquí se diseñabapara iPhone */ } @media screen and (min-width: 481px) and (max-width: 1024px){ /* Aquí se diseñabaparaIpad */ }@media screen and (min-width:1025px){ /* Aquí se diseñabapara PC */ } YO SOSTENIA ESTO EN 2011...

24. Centrado en contenidos (content-out) • 1. Se evalúan los anchos de renglón del contenido. • 2. Se hace una lista de anchos de ventana del navegador a los que ESE contenido ya no es legible. • 3. Se hacen breakpoints en función de esos anchos (convertidos a em)

25. Código de ejemplo basado en contenidos @media screen and (max-width: 26em){ /* Primer Diseño */ } @media screen and (min-width: 26.01em) and (max-width: 37em){ /* Segundo diseño */ }@media screen and (min-width:37.01em){ /* Tercerdiseño */ }

26. Esto implica trabajar con contenidos reales • 1. Inventario de Contenidos (listado total). • 2. Mapa del sitio. • 3. Definición de tipos de Plantillas (para portadas, secciones, fichas de contenido, tipos de recursos multimediales).

27. Entonces... necesitamos prototipos dinámicos, en HTML, con contenidos reales (no “lorem ipsum”...) Y que se puedan mostrar en 24 hs http://uxpin.com/

28. Metodología de Diseño

29. Primero, priorizamos contenidos 2 1 3

30. Con los contenidos priorizados para una plantilla, bocetamos de mayor a menor y codificamos de menor a mayor

31. Bocetado Codificación

32. Bocetar de mayor a menor Considerar qué deja de flotar en cada breakpoint

33. Usar grilla de 1000px de ancho, para que pueda pasarse a porcentajes fácilmente. 1000px = 100% http://www.gridsystemgenerator.com/

34. Acciones posibles: 1. Mantener igual (logo azul) 2. Dejar que se ajusteancho en porcentaje (slider celeste) 3. Dejar de flotar y aumentar ancho en porcentaje (columnas grises) 4. Ocultar 5. Mostrar

35. ¿Cómo definir cada breakpoint? El contenido decide: estirar ventana hasta romper el diseño, y medir. MeasureIt (para Chrome y Firefox)

36. Repetir eso “n” veces... 1. Mantener igual (logo azul) 2. Dejar que se ajusteancho en porcentaje (slider celeste) 3. Dejar de flotar y aumentar ancho en porcentaje (columnas grises)

37. Probar cada boceto hasta extremos

38. Codificar de menor a mayor(Mobile First) HTML solo Flotar, estirar (CSS) Flotar, estirar (CSS)

39. No olvidar en el proceso...

40. Medir zonas de imágenes y hacer lista de tamaños Medirlas en extremo mínimo y máximo

41. Ir haciendo listas por cada breakpoint de: -Tamaños de columnas, márgenes y paddings -Tamaños de tipografías -Tamaños de imágenes etc. “Una clase para cada medida” ¡Documentar! → Guía de estilo

42. ¿Sistemas de Grillas? No, gracias (sirven para prototipar, no para producción)

43. Aaron Gustafson • “I find Foundation, Bootstrap, and similar frameworks interesting from an educational standpoint, but I would never use one when building a production site. For prototyping a concept, sure, but to take one of these into production you need to be rigorous in your removal of unused CSS and JavaScript or you end up creating a heavy, slow experience for your users.”

44. Hacer tres variantes de diseño,no lleva el triple de tiempo! (¡pero el cliente no tiene por qué saberlo!)

45. Un caso: The Boston Globe http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/

46. 960px

47. 960px 768px

48. 768px 600px

49. 600px 480px

50. 480px 320px