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
   

   View Slide

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
   

   View Slide

3. ¿Qué?
   SENSIBLE
   RESPONSIVO
   NERVIOSO
   QUE REACCIONA CON ENTUSIASMO
   

   View Slide

4. ¿Por qué?
   Web “1.0” = 1 dispositivo = 1 web
   Diseño fijo o fluído.
   Optimized for
   800x600
   

   View Slide

5. VA A LLEGARRR!!!
   LA UBICUIDAD
   

   View Slide

6. ¡Y ya está aquí!
   Web “n.0” = n dispositivos = n web?
   ¿Diseño sensible? Múltiples resoluciones, densidades, capacidades...
   

   View Slide

7. ¿Qué hacemos?
   ESCENARIO COMPLEJO
   Web “n.0” = n dispositivos = n web?
   Múltiples dispositivos, resoluciones,
   densidades, capacidades, contextos...
   

   View Slide

8. ¿Qué c*** hacemos?
   ¿SOLUCIÓN SENCILLA?
   n web = dedicated (desktop, mobile, tablet, app...)
   1 web = responsive
   

   View Slide

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?
   

   View Slide

10. “Context is everything.”
    https://twitter.com/#!/jasonfried/status/29487253471
    

    View Slide

11. Responsive: ¿Cómo?
    FLUID GRIDS + FLUID MEDIA + MEDIA QUERIES
    Fundamentalmente CSS.
    % %
    %
    % % %
    @media {}
    

    View Slide

12. Responsive: ¿Cómo?
    http://www.abookapart.com/products/responsive-web-design http://www.alistapart.com/articles/responsive-web-design/
    Ethan Marcotte.
    

    View Slide

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
    

    View Slide

14. Responsive: ¿Cómo?
    http://www.slideshare.net/Martulina
    http://themelee.org/
    ¡Y aquí también!
    

    View Slide

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...
    

    View Slide

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...
    +
    

    View Slide

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/
    

    View Slide

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.
    ”
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

22. Ejemplo: Bookstores
    Simple
    Independiente,
    nicho...
    Complejo
    Mayorista,
    generalista...
    VS
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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?
    ?
    

    View Slide

27. “Context is everything.”
    https://twitter.com/#!/jasonfried/status/29487253471
    

    View Slide

28. GRACIAS.
    @janogarcia + http://janogarcia.es
    

    View Slide