Responsive Web Design

¿POR QUÉ?

•  Parte de tu estrategía móvil

•  Necesidad de una imagen única

•  Velocidad al hacer cambios

•  50% es móvil

•  Pregunta: ¿Por qué?

RESPONSIVE

DEFINICIÓN

BENEFICIOS

•  Un sólo diseño, consistente.

•  Disminuye necesidad manejar diferents tecnologias

•  No dependes de nuevos dispositivos que no conoces.

•  Disminuye el costo (a LARGO plazo)

CONSECUENCIAS

•  Cambia la manera de diseñar

•  Disminuye el contenido

•  Más complejo de hacer bien

•  No hay muchos standares

•  Mayor inversión inicial

¿CÓMO ATACAR UN PROYECTO DE RWD?

•  Mobile first

•  Forzar a que el cliente

•  Prototipos vs wireframes

•  Pruebas automatizadas

•  Optimiza ciertos dispositivos

COMENZANDO

•  Automatiza build, deployment y pruebas

•  Diseño para todos los view ports

•  Explica el proceso de retroalimentación

•  Mantente firme en los cambios

•  Desarrolladores todo terreno

TECNOLOGÍAS

•  Frameworks: Bootstrap | Foundation

•  Hazlo tu: @media queries

•  Otras herramientas: sprokets, grunt, phantom.js,

selenium

•  Detector de dispositivos: Web services, user agent

ERRORES COMUNES

•  Ignorar ‘mobile first’

•  Forzar RWD en un sitio con diferente diseño

•  Optimizar sólo una parte del sitio

•  Involucrar sólo a los desarrolladores

•  Ignorar tus analytics

TIPS PARA DISEÑADORES

•  Usar prototipos con HTML

•  Varias iteraciones

•  Preguntar si es posible

•  Hacer sacrificios

•  De menor a mayor contenido

TIPS PARA DESARROLLADORES

•  Grid fluido

•  Piensa en tamaños (CH, M, G), no en dispositivos

•  Automatiza

•  Pruebas unitarias

•  El backend puede ayudar

TIPS PARA CLIENTES

•  Define una estrategia

•  Invierta ahora

•  Mayores visitas no significan mayores ventas

•  Usa tus metricas de visitas

LIBROS

ENLACES

http://www.abookapart.com/products/responsive-web-design

http://bradfrost.github.io/this-is-responsive/

http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

CONCLUSIÓN

RWD es una técnica que involucra a todo el equipo ó empresa en un mismo objetivo.

No es una solución universal que resuelva todos los problemas.