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