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

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

description

Diseño Web Adaptativo Responsive Design . Del prototipo al HTML y CSS. ¿Qué es?. - PowerPoint PPT Presentation

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

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

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

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

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.

¿Qué es?

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

Web = diversidad

Page 4: Diseño Web Adaptativo Responsive Design . Del prototipo al HTML y CSS
Page 5: Diseño Web Adaptativo Responsive Design . Del prototipo al HTML y CSS

Optimizar no es igual a miniaturizar

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

Mr. Simon Collison

http://colly.com/

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

Stephen Caver

http://stephencaver.com/

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

Spark-Box

http://seesparkbox.com/

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

Food Sense

http://foodsense.is/

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

Illy Issimo

http://us.illyissimo.com/

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

http://www.mediaqueri.es

Media Queries

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

Distintas personas entran con distintos dispositivos

La misma persona empieza tarea en un dispositivo, y la sigue en otro.

Necesitamos optimizar la interfaces a través de distintos dispositivos ¿Por qué?

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

¿Como se hace?

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

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

Cambió el contexto de uso de la web.

Aprendimos nuevas técnicas, como Responsive Web Design.

Pero... seguimos aplicando el mismo Workflow lineal

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

Workflow lineal(heredado de gráfica)

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

Análisis de WorkflowsResponsive

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

Workflow de Viljami Salminenhttp://viljamis.com/blog/2012/responsive-workflow/

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

http://www.slideshare.net/pkattera/design-process-for-responsive-web-design

Workflow de Pon Kattera

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

http://www.slideshare.net/yiibu/pragmatic-responsive-design

Workflow de Stephanie Rieger

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

Centrado en dispositivos

Vs

Centrado en contenidos

Dos enfoques para la etapa de Diseño

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

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.

Centrado en dispositivos (insostenible)

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

Ejemplo de gráfico de breakpoints (obsoleto)

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

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

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

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)

Centrado en contenidos(content-out)

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

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

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

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

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

Entonces... necesitamos prototipos dinámicos, en HTML,con contenidos reales (no “lorem ipsum”...)

Y que se puedan mostrar en 24 hs

http://uxpin.com/

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

Metodologíade Diseño

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

Primero, priorizamos contenidos

1

2

3

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

Con los contenidos priorizados para una plantilla,

bocetamos de mayor a menor

y

codificamos de menor a mayor

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

Codificación

Bocetado

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

Bocetar de mayor a menor

Considerar qué deja de flotar en cada breakpoint

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

Usar grilla de 1000px de ancho, para que pueda pasarse a porcentajes fácilmente.

1000px = 100%

http://www.gridsystemgenerator.com/

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

Acciones posibles:

1. Mantener igual (logo azul)

2. Dejar que se ajuste ancho en porcentaje (slider celeste)

3. Dejar de flotar y aumentar ancho en porcentaje (columnas grises)

4. Ocultar

5. Mostrar

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

¿Cómo definir cada breakpoint?

El contenido decide: estirar ventana hasta romper el diseño, y medir.

MeasureIt (para Chrome y Firefox)

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

Repetir eso “n” veces...

1. Mantener igual (logo azul)

2. Dejar que se ajuste ancho en porcentaje (slider celeste)

3. Dejar de flotar y aumentar ancho en porcentaje (columnas grises)

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

Probar cada boceto hasta extremos

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

Codificar de menor a mayor(Mobile First)

HTMLsolo

Flotar, estirar(CSS)

Flotar, estirar(CSS)

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

No olvidar en el proceso...

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

Medir zonas de imágenesy hacer lista de tamaños

Medirlas en extremo mínimo y máximo

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

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

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

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

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

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

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

Hacer tres variantes de diseño,no lleva el triple de tiempo!

(¡pero el cliente no tiene por qué saberlo!)

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

Un caso: The Boston Globe

http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/

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

960px

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

768px

960px

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

768px

600px

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

600px

480px

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

480px

320px

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

Paginas de interés

http://www.responsivewebdesign.com.arhttp://typecast.com/http://uxpin.com/https://www.youtube.com/watch?v=9YqfKENZEKM

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

Gracias