Responsive Web Design - Diseño Sensible by @janogarcia

3b53f32a92ff371b49203a9cb93a4a3a?s=47 Jano Garcia
February 28, 2012

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

3b53f32a92ff371b49203a9cb93a4a3a?s=128

Jano Garcia

February 28, 2012
Tweet

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