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.

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

15. ENLACES
http://www.abookapart.com/products/responsive-web-design
http://bradfrost.github.io/this-is-responsive/
http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

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.