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