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.

1. Hacia una Metodología de
Diseño Web Responsive
Del prototipo al HTML y CSS
Hernán Beati
@hernan_beati

2. Web = diversidad

4. A julio de 2013: 17.4% + tablets
(1 de cada 4,5 usuarios)
En 2014 ¿1 de cada 3,5?

5. Si no optimizamos,
miniaturizamos

6. Desafío:
Optimizar la experiencia

7. 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.)

8. 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

9. Ejemplos

15. Galería de sitios Responsive
http://www.mediaqueri.es

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

17. Viejo Workflow lineal
(heredado de gráfica)
NSID
CO
NO
RAR
ITE
ERA

18. Análisis de Workflows
Responsive

19. Stephen Hay
http://www.slideshare.net/stephenhay/mobilism2012

20. ¿Cuándo hay entregables?
(para generar acuerdo o ajustes)
DE
IADO
MAS
DE...
TAR

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

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

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

24. ¿Qué tienen en común?

25. Nuevo ciclo
de la etapa de Diseño
El cliente interactúa
mucho más

26. Dos enfoques para la etapa
de Diseño

27. 1. Centrado en dispositivos
versus...
2. Centrado en
contenidos

28. 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

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

30. 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

31. 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

32. 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 */
}

33. 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).

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

35. Mi metodología
de Diseño
de una plantilla web

36. Primero, priorizamos contenidos
2
1
3

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

38. Bocetado
Codificación

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

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

41. 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

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

43. 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)

44. Probar cada boceto hasta extremos

45. 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

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

47. Diseñar en el navegador
“Usar Photoshop / Fireworks para diseño responsive
es como llevar un cuchillo a un tiroteo”
Andy Clarke

48. Textos con Typecast
http://typecast.com

49. El usuario da su aprobación a un prototipo HTML
(ya con CSS incluido)
Se vuelve a modificar, hasta su aprobación.

50. No olvidar en el proceso...

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

52. 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

53. El usuario sigue pidiendo modificaciones,
hasta dar su aprobación.
Y se hace mantenimiento, hasta el fin del proyecto.

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

55. 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.”

56. 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).

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

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

59. 960px

60. 960px
768px

61. 768px
600px

62. 600px
480px

63. 480px
320px

64. Si quieren códigos:
http://www.responsivewebdesign.com.ar

65. 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