Hacia una Metodología de Diseño Web Responsive

2,658 views

Published on

Exploramos las distintas metodologías de diseño web Responsive existentes a fines de 2013 y proponemos una etapa de diseño iterativa, basada en los contenidos, y con el enfoque de bocetar de mayor a menor y codificar de menor a mayor.

Published in: Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,658
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
116
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Hacia una Metodología de Diseño Web Responsive

  1. 1. Hacia una Metodología de Diseño Web Responsive Del prototipo al HTML y CSS Hernán Beati @hernan_beati
  2. 2. Web = diversidad
  3. 3. A julio de 2013: 17.4% + tablets (1 de cada 4,5 usuarios) En 2014 ¿1 de cada 3,5?
  4. 4. Si no optimizamos, miniaturizamos
  5. 5. Desafío: Optimizar la experiencia
  6. 6. Necesitamos optimizar la UX a través de distintos dispositivos porque:  distintas personas entran con distintos dispositivos y la misma persona empieza tarea en un dispositivo, y la sigue en otro  (búsqueda, compra, lectura, campus, etc.)
  7. 7. Definición de Diseño Web Responsive • Usar Media Queries para lograr un diseño optimizado mediante layout y grillas flexibles, incluyendo tipografía y medios adaptados (fotos, videos, mapas, tablas, sliders) y navegación acorde al dispositivo. ción ifica plan má s xige E
  8. 8. Ejemplos
  9. 9. Galería de sitios Responsive http://www.mediaqueri.es
  10. 10. Cambió el contexto de uso de la web. Aprendimos nuevas técnicas, como Responsive Web Design. Pero... seguimos aplicando el mismo Workflow lineal
  11. 11. Viejo Workflow lineal (heredado de gráfica) NSID CO NO RAR ITE ERA
  12. 12. Análisis de Workflows Responsive
  13. 13. Stephen Hay http://www.slideshare.net/stephenhay/mobilism2012
  14. 14. ¿Cuándo hay entregables? (para generar acuerdo o ajustes) DE IADO MAS DE... TAR
  15. 15. Workflow de Viljami Salminen http://viljamis.com/blog/2012/responsive-workflow/
  16. 16. Workflow de Pon Kattera http://www.slideshare.net/pkattera/design-process-for-responsive-web-design
  17. 17. Workflow de Stephanie Rieger http://www.slideshare.net/yiibu/pragmatic-responsive-design
  18. 18. ¿Qué tienen en común?
  19. 19. Nuevo ciclo de la etapa de Diseño El cliente interactúa mucho más
  20. 20. Dos enfoques para la etapa de Diseño
  21. 21. 1. Centrado en dispositivos versus... 2. Centrado en contenidos
  22. 22. 1. 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. NO C ER A NSID O CON LO S I DO S TEN
  23. 23. Ejemplo de gráfico de breakpoints (obsoleto)
  24. 24. 1. Código de ejemplo (¡obsoleto!) para iPhone y iPad (no cubre Retina) @media screen and (max-width: 480px){ /* Aquí se diseñaba para iPhone */ } @media screen and (min-width: 481px) and (max-width: 1024px){ /* Aquí se diseñaba para Ipad */ } @media screen and (min-width:1025px){ /* Aquí se diseñaba para PC */ } OSTE YO S 11... EN 20 ESTO N IA
  25. 25. 2. 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) E DE EN D DEP CON LO S IDOS TEN
  26. 26. 2. 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){ /* Tercer diseño */ }
  27. 27. 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).
  28. 28. Entonces... necesitamos prototipos dinámicos, en HTML, con contenidos reales (no “lorem ipsum”...) Y que se puedan mostrar en 24 hs http://uxpin.com/
  29. 29. Mi metodología de Diseño de una plantilla web
  30. 30. Primero, priorizamos contenidos 2 1 3
  31. 31. Con los contenidos priorizados para una plantilla, bocetamos de mayor a menor y codificamos de menor a mayor
  32. 32. Bocetado Codificación
  33. 33. Bocetar de mayor a menor Considerar qué deja de flotar en cada breakpoint
  34. 34. Usar grilla de 1000px de ancho, para que pueda pasarse a porcentajes fácilmente. 1000px = 100% http://www.gridsystemgenerator.com/
  35. 35. Acciones posibles: 1. Mantener igual (logo azul) 2. Dejar que se angoste ancho en porcentaje (slider celeste) 3. Dejar de flotar y aumentar ancho en porcentaje (columnas grises) 4. Ocultar 5. Mostrar
  36. 36. ¿Cómo definir cada breakpoint? El contenido decide: estirar ventana hasta romper el diseño, y medir. MeasureIt (para Chrome y Firefox)
  37. 37. Repetir eso “n” veces... 1. Mantener igual (logo azul) 2. Dejar que se angoste ancho en porcentaje (slider celeste) 3. Dejar de flotar y aumentar ancho en porcentaje (columnas grises)
  38. 38. Probar cada boceto hasta extremos
  39. 39. El usuario da su aprobación a un prototipo HTML (en mi caso, hecho con UXPin) O se vuelve a modificar, hasta su aprobación. Ejemplo de prototipado rápido con UXPin: http://www.youtube.com/watch?v=9YqfKENZEKM
  40. 40. Codificar de menor a mayor (Mobile First) HTML solo Flotar, estirar (CSS) Flotar, estirar (CSS)
  41. 41. Diseñar en el navegador “Usar Photoshop / Fireworks para diseño responsive es como llevar un cuchillo a un tiroteo” Andy Clarke
  42. 42. Textos con Typecast http://typecast.com
  43. 43. El usuario da su aprobación a un prototipo HTML (ya con CSS incluido) Se vuelve a modificar, hasta su aprobación.
  44. 44. No olvidar en el proceso...
  45. 45. Medir zonas de imágenes y hacer lista de tamaños Medirlas en extremo mínimo y máximo
  46. 46. 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
  47. 47. El usuario sigue pidiendo modificaciones, hasta dar su aprobación. Y se hace mantenimiento, hasta el fin del proyecto.
  48. 48. ¿Sistemas de Grillas? No, gracias (sirven para prototipar, no para producción)
  49. 49. 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.”
  50. 50. Nota final, sobre el presupuesto Lo Responsive se incluye “sí o sí” de entrada, no es un plus opcional (agregarlo después implica re-prototipar y re-codificar todo el sitio).
  51. 51. Hacer tres variantes de diseño, no lleva el triple de tiempo! (¡pero el cliente no tiene por qué saberlo!)
  52. 52. Un caso: The Boston Globe http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
  53. 53. 960px
  54. 54. 960px 768px
  55. 55. 768px 600px
  56. 56. 600px 480px
  57. 57. 480px 320px
  58. 58. Si quieren códigos: http://www.responsivewebdesign.com.ar
  59. 59. No deje de completar su evaluación online ux2013.com.ar/encuesta ¡Muchas gracias! Hacia una Metodología de Diseño Web Responsive Hernán Beati

×