Responsive Web Design
0 recomendaciones165 vistas
Este documento discute la importancia de diseñar sitios web responsivos (RWD) que se adapten a diferentes dispositivos. Explica que RWD ofrece una única imagen coherente para todos los dispositivos, reduce la necesidad de manejar múltiples tecnologías y disminuye los costos a largo plazo. También proporciona consejos sobre cómo comenzar un proyecto RWD, incluido el enfoque en mobile first, el uso de frameworks como Bootstrap y pruebas automatizadas.
Responsive Web Design
- 2. ¿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é?
- 3. RESPONSIVE
- 4. DEFINICIÓN
- 5. 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)
- 6. CONSECUENCIAS • Cambia la manera de diseñar • Disminuye el contenido • Más complejo de hacer bien • No hay muchos standares • Mayor inversión inicial
- 7. ¿CÓMO ATACAR UN PROYECTO DE RWD? • Mobile first • Forzar a que el cliente • Prototipos vs wireframes • Pruebas automatizadas • Optimiza ciertos dispositivos
- 8. 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
- 9. TECNOLOGÍAS • Frameworks: Bootstrap | Foundation • Hazlo tu: @media queries • Otras herramientas: sprokets, grunt, phantom.js, selenium • Detector de dispositivos: Web services, user agent
- 10. 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
- 11. TIPS PARA DISEÑADORES • Usar prototipos con HTML • Varias iteraciones • Preguntar si es posible • Hacer sacrificios • De menor a mayor contenido
- 12. TIPS PARA DESARROLLADORES • Grid fluido • Piensa en tamaños (CH, M, G), no en dispositivos • Automatiza • Pruebas unitarias • El backend puede ayudar
- 13. TIPS PARA CLIENTES • Define una estrategia • Invierta ahora • Mayores visitas no significan mayores ventas • Usa tus metricas de visitas
- 14. LIBROS
- 16. 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.