Transcript
¿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.
top related