Responsive Web Design - Diseño Sensible by @janogarcia

3b53f32a92ff371b49203a9cb93a4a3a?s=47 Alejandro García
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

Alejandro García

February 28, 2012
Tweet

Transcript

  1. 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
  2. 4.

    ¿Por qué? Web “1.0” = 1 dispositivo = 1 web

    Diseño fijo o fluído. Optimized for 800x600
  3. 6.

    ¡Y ya está aquí! Web “n.0” = n dispositivos =

    n web? ¿Diseño sensible? Múltiples resoluciones, densidades, capacidades...
  4. 7.

    ¿Qué hacemos? ESCENARIO COMPLEJO Web “n.0” = n dispositivos =

    n web? Múltiples dispositivos, resoluciones, densidades, capacidades, contextos...
  5. 8.
  6. 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?
  7. 11.

    Responsive: ¿Cómo? FLUID GRIDS + FLUID MEDIA + MEDIA QUERIES

    Fundamentalmente CSS. % % % % % % @media {}
  8. 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
  9. 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...
  10. 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... +
  11. 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/
  12. 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. ”
  13. 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/
  14. 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
  15. 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.
  16. 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
  17. 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
  18. 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
  19. 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? ?