Responsive web design - diseño sensible

1,204 views

Published on

  • Be the first to comment

Responsive web design - diseño sensible

  1. 1. %RESPONSIVEDISEÑO SENSIBLE@janogarcia + http://janogarcia.es Feb 2012 @ The Mêlée
  2. 2. DISCLAIMERNo es una presentación técnica, no habráejemplos de código.El objetivo es discutir qué problema trata deresolver “Responsive Design”, qué principiossigue y qué herramientas ofrece,preguntándonos si éstas se ajustarán a lasnecesidades de nuestros proyectos.
  3. 3. ¿Qué?SENSIBLERESPONSIVONERVIOSOQUE REACCIONA CON ENTUSIASMO
  4. 4. ¿Por qué? Optimized for 800x600Web “1.0” = 1 dispositivo = 1 webDiseño fijo o fluído.
  5. 5. LA UBICUIDADVA A LLEGARRR!!!
  6. 6. ¡Y ya está aquí! Web “n.0” = n dispositivos = n web? ¿Diseño sensible? Múltiples resoluciones, densidades, capacidades...
  7. 7. ¿Qué hacemos?ESCENARIO COMPLEJOWeb “n.0” = n dispositivos = n web?Múltiples dispositivos, resoluciones,densidades, capacidades, contextos...
  8. 8. ¿Qué c*** hacemos?¿SOLUCIÓN SENCILLA?n web = dedicated (desktop, mobile, tablet, app...)1 web = responsive
  9. 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. 10. “Context is everything.” http://twitter.com/jasonfried/status/29487253471
  11. 11. Responsive: ¿Cómo?FLUID GRIDS + FLUID MEDIA + MEDIA QUERIES % % % @media {} % % % Fundamentalmente CSS.
  12. 12. Responsive: ¿Cómo?http://www.abookapart.com/products/responsive-web-design http://www.alistapart.com/articles/responsive-web-design/ Ethan Marcotte.
  13. 13. Responsive: ¿Cómo?Responsive Web Design: What It Is and How ToUse Ithttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/Responsive Web Design Techniques, Tools andDesign Strategieshttp://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/
  14. 14. Responsive: ¿Cómo?http://www.slideshare.net/Martulina http://themelee.org/ ¡Y aquí también!
  15. 15. Pros y Cons + Una sóla base de código cost, time, code once/less, maintenance... Prioriza el contenido content first, mobile first, target experience... Soporte futuro nuevos dispositivoshttp://www.slideshare.net/Martulina/responsive-web-design-the-good-the-bad-and-the-ugly
  16. 16. Pros y Cons + 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...http://www.slideshare.net/Martulina/responsive-web-design-the-good-the-bad-and-the-ugly
  17. 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. 18. VS Mobile sites/apps 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. http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/
  19. 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?933http://artequalswork.com/posts/target-first.phphttp://adactio.com/journal/4523/http://designshack.net/articles/css/responsive-design-why-youre-doing-it-wrong/http://globalmoxie.com/blog/mobile-web-responsive-design.shtmlhttp://www.viget.com/inspire/is-responsive-design-a-good-fit-for-mobile/
  20. 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. 21. User Goals VS Business Goalse:) Usuarios Contenido, experiencia... e $ Negocios Ventas, conversión, ROI...Equilibrio entre ofrecer la mejor experiencia al usuarioy cumplir los objetivos del negocio.
  22. 22. Ejemplo: BookstoresSimple ComplejoIndependiente, VS Mayorista,nicho... generalista...
  23. 23. Ejemplo: NewsComplejo Grandes medios, generalistas.The Boston GlobeRediseñado para ser responsive.http://bostonglobe.comhttp://www.howinteractivedesign.com/inspiration/boston-globe-takes-news-into-responsive-design-eraBig Picture (The Boston Globe)¿Qué cambios requeriría para ser responsive (adaptación de contenido)?, ¿Es el planteamiento adecuado?.http://www.boston.com/bigpicture/ Responsive
  24. 24. Ejemplo: NewsComplejo Grandes medios, generalistas.The New York TimesApp nativa iPad, 4x apps nativas smartphones, web version móvil http://mobile.nytimes.com, Times Reader 2.0para Desktop, Chrome Web Store app http://www.nytimes.com/chrome/.http://www.nytimes.comhttp://www.nytimes.com/services/mobile/Lawrence Journal-WorldAquí 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/ Not Responsive
  25. 25. Ejemplo: NewsSimple Pequeños medios, nichos.Blogs sector webhttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ (6 layouts in 5breakpoints)http://elliotjaystocks.com/blog/css-transitions-media-querieshttp://css-tricks.com/css-media-querieshttp://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign Responsive
  26. 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. 27. “Context is everything.” http://twitter.com/#!/jasonfried/status/29487253471
  28. 28. GRACIAS.@janogarcia + http://janogarcia.es

×