Hacia una Metodología de Diseño Web Responsive
-
Upload
hernan-beati -
Category
Design
-
view
1.617 -
download
5
description
Transcript of Hacia una Metodología de Diseño Web Responsive
Hacia una Metodología de Diseño Web Responsive Del prototipo al HTML y CSS
Hernán Beati
@hernan_beati
Web = diversidad
A julio de 2013: 17.4% + tablets(1 de cada 4,5 usuarios)En 2014 ¿1 de cada 3,5?
Si no optimizamos, miniaturizamos
Desafío: Optimizar la experiencia
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.)
Necesitamos optimizar la UX a través de distintos dispositivos porque:
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.
Exige más planificación
Ejemplos
http://www.mediaqueri.es
Galería de sitios Responsive
Cambió el contexto de uso de la web.
Aprendimos nuevas técnicas, como Responsive Web Design.
Pero... seguimos aplicando el mismo Workflow lineal
Viejo Workflow lineal(heredado de gráfica)
NO CONSIDERA ITERAR
Análisis de WorkflowsResponsive
http://www.slideshare.net/stephenhay/mobilism2012Stephen Hay
¿Cuándo hay entregables?(para generar acuerdo o ajustes)
DEMASIADO TARDE...
Workflow de Viljami Salminenhttp://viljamis.com/blog/2012/responsive-workflow/
http://www.slideshare.net/pkattera/design-process-for-responsive-web-design
Workflow de Pon Kattera
http://www.slideshare.net/yiibu/pragmatic-responsive-design
Workflow de Stephanie Rieger
¿Qué tienen en común?
Nuevo ciclo de la etapa de Diseño
El cliente interactúamucho más
Dos enfoques para la etapade Diseño
1. Centrado en dispositivos
versus...
2. Centrado encontenidos
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.
1. Centrado en dispositivos (insostenible)
NO CONSIDERA LOS CONTENIDOS
Ejemplo de gráfico de breakpoints (obsoleto)
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 */}
YO SOSTENIA ESTO EN 2011...
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)
2. Centrado en contenidos (content-out)
DEPENDE DE LOS CONTENIDOS
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 */}
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).
Entonces... necesitamos prototipos dinámicos, en HTML,con contenidos reales (no “lorem ipsum”...)
Y que se puedan mostrar en 24 hs
http://uxpin.com/
Mi metodologíade Diseño
de una plantilla web
Primero, priorizamos contenidos
1
2
3
Con los contenidos priorizados para una plantilla,
bocetamos de mayor a menor
y
codificamos de menor a mayor
Codificación
Bocetado
Bocetar de mayor a menor
Considerar qué deja de flotar en cada breakpoint
Usar grilla de 1000px de ancho, para que pueda pasarse a porcentajes fácilmente.
1000px = 100%
http://www.gridsystemgenerator.com/
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
¿Cómo definir cada breakpoint?
El contenido decide: estirar ventana hasta romper el diseño, y medir.
MeasureIt (para Chrome y Firefox)
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)
Probar cada boceto hasta extremos
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
Codificar de menor a mayor(Mobile First)
HTMLsolo
Flotar, estirar(CSS)
Flotar, estirar(CSS)
Diseñar en el navegador
“Usar Photoshop / Fireworks para diseño responsive es como llevar un cuchillo a un tiroteo”
Andy Clarke
http://typecast.com
Textos con Typecast
El usuario da su aprobación a un prototipo HTML(ya con CSS incluido)
Se vuelve a modificar, hasta su aprobación.
No olvidar en el proceso...
Medir zonas de imágenesy hacer lista de tamaños
Medirlas en extremo mínimo y máximo
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
El usuario sigue pidiendo modificaciones,hasta dar su aprobación.
Y se hace mantenimiento, hasta el fin del proyecto.
¿Sistemas de Grillas? No, gracias(sirven para prototipar, no para producción)
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.”
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).
Hacer tres variantes de diseño,no lleva el triple de tiempo!
(¡pero el cliente no tiene por qué saberlo!)
Un caso: The Boston Globe
http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
960px
768px
960px
768px
600px
600px
480px
480px
320px
Si quieren códigos:http://www.responsivewebdesign.com.ar
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