Este documento discute el diseño responsivo y sus principios. El diseño responsivo crea sitios web que se adaptan a diferentes dispositivos mediante el uso de rejillas fluidas, medios fluidos y consultas de medios. Proporciona una única base de código para múltiples dispositivos en lugar de sitios web dedicados. Sin embargo, también puede tener desventajas como el rendimiento y la dependencia de JavaScript. El documento plantea que el enfoque correcto dependerá del proyecto específico y si el contenido puede adaptarse fácilmente o si se

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

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

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

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

5. LA UBICUIDAD
VA A LLEGARRR!!!

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.”
http://twitter.com/jasonfried/status/29487253471

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

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?
Responsive Web Design: What It Is and How To
Use It
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Responsive Web Design Techniques, Tools and
Design Strategies
http://www.smashingmagazine.com/2011/07/22/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
+
Una sóla base de código
cost, time, code once/less, maintenance...
Prioriza el contenido
content first, mobile first, target experience...
Soporte futuro
nuevos dispositivos
http://www.slideshare.net/Martulina/responsive-web-design-the-good-the-bad-and-the-ugly

16. Pros y Cons
+
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...
http://www.slideshare.net/Martulina/responsive-web-design-the-good-the-bad-and-the-ugly

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
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.
http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/

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
e:)
Usuarios
Contenido,
experiencia... e
$
Negocios
Ventas,
conversión, ROI...
Equilibrio entre ofrecer la mejor experiencia al usuario
y cumplir los objetivos del negocio.

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

23. Ejemplo: News
Complejo Grandes medios, generalistas.
The Boston Globe
Rediseñado para ser responsive.
http://bostonglobe.com
http://www.howinteractivedesign.com/inspiration/boston-globe-takes-news-into-responsive-design-era
Big Picture (The Boston Globe)
¿Qué cambios requeriría para ser responsive (adaptación de contenido)?, ¿Es el planteamiento adecuado?.
http://www.boston.com/bigpicture/
Responsive

24. Ejemplo: News
Complejo Grandes medios, generalistas.
The New York Times
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/
Lawrence Journal-World
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/
Not Responsive

25. Ejemplo: News
Simple Pequeños medios, nichos.
Blogs sector web
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
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.”
http://twitter.com/#!/jasonfried/status/29487253471

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