Responsive Web Design - Diseño Sensible by @janogarcia

No es una presentación técnica, no hay ejemplos de código.

El objetivo es discutir qué problema trata de resolver “Responsive Design”, qué principios sigue y qué herramientas nos ofrece, preguntándonos si éstas se ajustan a las necesidades de nuestros proyectos.

http://janogarcia.es/post/18437640851/responsive-sensible

Transcript

1. DISEÑO SENSIBLE RESPONSIVE % @janogarcia + http://janogarcia.es Feb 2012 @ The Mêlée
2. No es una presentación técnica, no habrá ejemplos de código. El objetivo es discutir qué problema trata de resolver “Responsive Design”, qué principios sigue y qué herramientas ofrece, preguntándonos si éstas se ajustarán a las necesidades de nuestros proyectos. DISCLAIMER
3. ¿Qué? SENSIBLE RESPONSIVO NERVIOSO QUE REACCIONA CON ENTUSIASMO
4. ¿Por qué? Web “1.0” = 1 dispositivo = 1 web Diseño fijo o fluído. Optimized for 800x600
5. VA A LLEGARRR!!! LA UBICUIDAD
6. ¡Y ya está aquí! Web “n.0” = n dispositivos = n web? ¿Diseño sensible? Múltiples resoluciones, densidades, capacidades...
7. ¿Qué hacemos? ESCENARIO COMPLEJO Web “n.0” = n dispositivos = n web? Múltiples dispositivos, resoluciones, densidades, capacidades, contextos...
8. ¿Qué c*** hacemos? ¿SOLUCIÓN SENCILLA? n web = dedicated (desktop, mobile, tablet, app...) 1 web = responsive
9. ¿El santo grial? ESCENARIO COMPLEJO + SOLUCIÓN SENCILLA = ? ¿Es posible? Sí - No - Depende. ¿Es Responsive Desgin la respuesta? ¿O dedicadas? ¿O una combinación?
10. “Context is everything.” https://twitter.com/#!/jasonfried/status/29487253471
11. Responsive: ¿Cómo? FLUID GRIDS + FLUID MEDIA + MEDIA QUERIES Fundamentalmente CSS. % % % % % % @media {}
12. Responsive: ¿Cómo? http://www.abookapart.com/products/responsive-web-design http://www.alistapart.com/articles/responsive-web-design/ Ethan Marcotte.
13. Responsive: ¿Cómo? http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ Responsive Web Design: What It Is and How To Use It http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/ Responsive Web Design Techniques, Tools and Design Strategies
14. Responsive: ¿Cómo? http://www.slideshare.net/Martulina http://themelee.org/ ¡Y aquí también!
15. Pros y Cons http://www.slideshare.net/Martulina/responsive-web-design-the-good-the-bad-and-the-ugly + Una sóla base de código cost, time, code once/less, maintenance... Soporte futuro nuevos dispositivos Prioriza el contenido content first, mobile first, target experience...
16. Pros y Cons http://www.slideshare.net/Martulina/responsive-web-design-the-good-the-bad-and-the-ugly Rendimiento (tráfico, requests) bloated HTML/JS, oversized/hidden images... Dependencias JavaScript o Server side @media, images, video... Esfuerzo (frente a un único layout fijo) development, testing... +
17. VS Mobile sites/apps ¿Es un mito el “Mobile Context”? Dependerá de cada caso. Ya no se puede asociar un dispositivo con unas necesidades o contexto específico. ? http://timkadlec.com/2011/03/responsive-web-design-and-mobile-context/ http://adactio.com/journal/4443/ http://jeffcroft.com/blog/2010/aug/06/responsive-web-design-and-mobile-context/ http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/
18. VS Mobile sites/apps http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/ There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web. Thank you. ”
19. VS Mobile sites/apps ¿Mobile first, Desktop first, Content first, o Target experience? Dependerá de cada caso. El foco en la experiencia objetivo y en el contenido. ? http://www.lukew.com/ff/entry.asp?933 http://artequalswork.com/posts/target-first.php http://adactio.com/journal/4523/ http://designshack.net/articles/css/responsive-design-why-youre-doing-it-wrong/ http://globalmoxie.com/blog/mobile-web-responsive-design.shtml http://www.viget.com/inspire/is-responsive-design-a-good-fit-for-mobile/
20. VS Mobile sites/apps Design for a Target Experience First. “Mobile First” is as arbitrary as designing “Desktop First”. [...] “Target First” design approach sets a target experience to anchor our decisions of what should be added or subtracted, diminished or emphasized in each screen context. ” http://artequalswork.com/posts/target-first.php
21. User Goals VS Business Goals Usuarios Contenido, experiencia... e Negocios Ventas, conversión, ROI... e $ :) Equilibrio entre ofrecer la mejor experiencia al usuario y cumplir los objetivos del negocio.
22. Ejemplo: Bookstores Simple Independiente, nicho... Complejo Mayorista, generalista... VS
23. Ejemplo: News Complejo Grandes medios, generalistas. Rediseñado para ser responsive. http://bostonglobe.com http://www.howinteractivedesign.com/inspiration/boston-globe-takes-news-into-responsive-design-era The Boston Globe ¿Qué cambios requeriría para ser responsive (adaptación de contenido)?, ¿Es el planteamiento adecuado?. http://www.boston.com/bigpicture/ Big Picture (The Boston Globe) Responsive
24. Ejemplo: News Complejo Grandes medios, generalistas. Aquí nació el framework Django (Python). Web versión móvil básica (XHTML/CSS, no HTML5/CSS3/JavaScript), drásticamente simplificada. http://www2.ljworld.com/ http://mobile.ljworld.com/ Lawrence Journal-World App nativa iPad, 4x apps nativas smartphones, web version móvil http://mobile.nytimes.com, Times Reader 2.0 para Desktop, Chrome Web Store app http://www.nytimes.com/chrome/. http://www.nytimes.com http://www.nytimes.com/services/mobile/ The New York Times Not Responsive
25. Ejemplo: News Simple Pequeños medios, nichos. http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ (6 layouts in 5 breakpoints) http://elliotjaystocks.com/blog/css-transitions-media-queries http://css-tricks.com/css-media-queries http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign Blogs sector web Responsive
26. ¡Discutamos! ¿Escala para sitios complejos? ¿Se puede plantear a posteriori (retrofit)? ¿En qué punto deja de tener sentido adaptar contenido (HTML/CSS/JS, images, video...) en favor de una versión dedicada? ¿El planteamiento de responsive es acertado? ¿Y las tecnologías existentes son suficientes? ¿Qué estrategia usarás en tu próximo proyecto? ?
27. “Context is everything.” https://twitter.com/#!/jasonfried/status/29487253471
28. GRACIAS. @janogarcia + http://janogarcia.es