Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Design - Diseño Sensible by @janogarcia

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

Jano Garcia

February 28, 2012
Tweet

More Decks by Jano Garcia

Other Decks in Design

Transcript

  1. DISEÑO SENSIBLE
    RESPONSIVE
    %
    @janogarcia + http://janogarcia.es
    Feb 2012 @ The Mêlée

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  5. VA A LLEGARRR!!!
    LA UBICUIDAD

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide